[iOS/Swift] SnapKit offSet() 기본 사용법 설명

 snapkit에서는 inset과 offset이 있습니다. 둘은 비슷하면서도 많이 헷갈리기도 합니다. 저는 offset을 자주 사용하고 있긴 한데 둘의 차이점은 적용 대상의 안을 기준으로 하느냐 바깥을 기준으로 하느냐의 따라서 양수와 음수가 달라집니다. 사실 사용하다 보면서 그냥 익혀가는 게 더 빠르긴 합니다. 

 

// UI
private func setUI() {
    // 슈퍼 View에 파랑색 View 추가
    self.view.addSubview(self.myView)
    self.view.addSubview(self.secondView)

    // SnapKit 적용
    self.myView.snp.makeConstraints { make in
        make.top.equalToSuperview()
        make.leading.equalToSuperview()
        make.trailing.equalToSuperview()
        make.height.equalTo(200)
    }

    // SnapKit 적용
    self.secondView.snp.makeConstraints { make in
        make.top.equalTo(self.myView.snp.bottom)
        make.leading.equalToSuperview()
        make.trailing.equalToSuperview()
        make.bottom.equalToSuperview()
    }
}

 우선 서로 맞이한 View 두 개를 만들었습니다. 실행하면 세로로 나뉜 모습이 나옵니다. 그리고 각 View들은 맞이한 부분이 아닌 곳들은 상위 View에 밀착시켜두었습니다. 여기서 아래에 위치한 View에 모든 면에 offSet을 주도록 하겠습니다.

 

// SnapKit 적용
self.secondView.snp.makeConstraints { make in
    make.top.equalTo(self.myView.snp.bottom).offset(50)
    make.leading.equalToSuperview().offset(50)
    make.trailing.equalToSuperview().offset(-50)
    make.bottom.equalToSuperview().offset(-50)
}

 모든 면에 offSet을 50씩 주었습니다. 

 

결과

 보시면 아래 View는 상단의 파란색 View와 상위 View에서 간격을 두고 배치된 모습을 확인할 수 있습니다. offSet은 top과 leading은 양수, trailing과 bottom은 음수를 주었습니다. 반약 양수/음수를 반대로 한다면 간격이 아닌 대상과 겹치게 표시되게 됩니다. 

 

결과

 offSet 값의 양수/음수를 반전해서 준 결과 아래 빨간색 View가 간격을 두지 않고 모두 넘어간 모습을 확인할 수 있습니다. top 같은 경우는 파란색 View와 겹첬고, leading, trailing, bottom은 화면을 넘어가서 가득찬 것처럼 보이게 되었습니다.