SnapKit은 쉽게 Auto layout을 쉽게 만들기 위한 써드파티 라이브러리입니다.

---

---

Why SnapKit??

superview에 각각 20만큼 떨어진 뷰를 추가해 보겠습니다.
오른쪽 사진의 SnapKit을 사용한 것과 왼쪽 사진의 NSLayoutConstraint를 사용하여 레이아웃을 그린것을 비교해보면 확연히 짧아지고 코드를 이해하기 쉬워진것을 보실 수 있습니다.

---

equalTo() & equalToSuperview()

위 예제와 함께 equalTo()와 equalToSuperview()에 대하여 알아보겠다.

equalTo()

equalTo()는 비교 대상을 정해주어야 한다.

        numberLabel.snp.makeConstraints {
            $0.width.equalTo(80)
            $0.center.equalToSuperview()
        }

numberLabel은 width를 80과 같다라는 의미로 볼 수 있습니다.

        incrementBtn.snp.makeConstraints {
            $0.size.equalTo(CGSize(width: 80, height: 30))
            $0.centerY.equalToSuperview()
            $0.left.equalTo(numberLabel.snp.right).offset(32)
        }

incrementBtn의 left는 numberLabel의 right와 같은 위치에 있고 32만큼의 offset(거리)을 가집니다. offset에 관하여는 밑에서 자세하게 설명하겠습니다.

equalToSuperview()

위 예제의 numberLabel은 centerX와 centerY를 Superview와 같게 한다는것을 볼 수 있습니다.

Superview : 특정 view의 상위 view를 말합니다.
numberLabel은 superview로서 기본 view를 가지므로 화면의 정중앙에 위치하게 되는것입니다.

---

inset과 offset

offset

offset은 양수로 조건을 줄 시 가로는 왼쪽으로 움직이고 세로는 아래쪽으로 움직이게 됩니다. 즉 양수로 네 방향에 constraint를 주게된다면 위 사진처럼 view가 위치하게 됩니다.

inset

inset은 constraint관계를 가지는 다른 view와의 거리를 말하게 됩니다.
양수로 네방향에 constraint를 주게 된다면 사진처럼 view가 위치하게 됩니다.
padding과 비슷하다고 생각하셔도 좋습니다.

---

더욱 더 간편하게

SnapKit에서는 여러가지 constraint들을 한번에 설정해주는 몇가지 method를 제공합니다.

edges

edges는 top, left, bottom, right를 의미합니다.

물론 각각 constraint를 주는것도 가능합니다.

size

colorBox를 width: 50 height: 50을 준 모습입니다.

center

centerX와 centerY를 한번에 제약을 준 것과 동일합니다. 즉 정중앙에 정렬합니다.

물론 정중앙을 기준점으로 잡고 offset을 주는것도 가능합니다.

---

마무리

SnapKit은 Autolayout을 쉽게 작성하게 해주는 라이브러리입니다.
"써드파티" 라이브러리이므로 SnapKit을 쓰는것은 좋지만 SnapKit만큼
기본적으로 UIKit에서 제공하는 NSLayoutConstraint에 관하여도
공부하시면 좋겠습니다.