[iOS] SnapKit 사용하기

SnapKit이란?

간결한 코드로 NSLayoutConstraint를 쉽게 제어할 수 있도록 해준다. 즉, 짧은 코드로 오토레이아웃을 구현할 수 있도록 도와주는 프레임워크이다.

오토레이아웃 및 제약 조건을 쉽게 사용할 수 있도록 하는 DSL (Domain-specific language).

DSL은?!

Domain specific language (DSL)은 특정 도메인을 표현, 처리하거나 특정 문제를 해결하기 위해 만들어진 언어이다.

SnapKit의 경우, 오토레이아웃 제약 조건에 대해 훨씬 더 직관적이고 사용하기 쉬운 구문을 만드는 것을 목표로 한다.

 

 

먼저 코코아팟으로 라이브러리 추가하기!

https://github.com/SnapKit/SnapKit

pod 'SnapKit', '~> 5.6.0'

 

이렇게 import SnapKit을 하면 사용할 수 있음!

 

이제 SnapKit을 사용하면, 아래 코드를 쓸 필요가 없다.

translatesAutoresizingMaskIntoConstraints = false

왜냐?! SnapKit이 내부에서 알아서 해주기 때문에!

 

💡 translatesAutoresizingMaskIntoConstraints

UIView의 인스턴스 프로퍼티로, 뷰의 autoresizing mask를 AutoLayout constraints로 변환할지의 여부를 결정하는 bool 값을 의미한다.

기본값이 true이기 때문에, 뷰를 코드로 짠다면 이 값을 항상 false로 설정해야한다.

 

 

아래 코드를 예시로 보자.

child.translatesAutoresizingMaskIntoConstraints = false

NSLayoutConstraint.activate([
  child.leadingAnchor.constraint(equalTo: parent.leadingAnchor),
  child.topAnchor.constraint(equalTo: parent.topAnchor),
  child.trailingAnchor.constraint(equalTo: parent.trailingAnchor),
  child.bottomAnchor.constraint(equalTo: parent.bottomAnchor),
])

 

위 코드를 SnapKit을 사용하여 변환하면 아래와 같다.

child.snp.makeConstraints { make in
  make.leading.equalToSuperview()
  make.top.equalToSuperview()
  make.trailing.equalToSuperview()
  make.bottom.equalToSuperview()
}

 

SnapKit은 시스템의 모든 UIView에 snp이란 namespace를 도입한다.

snp은 makeConstraints(_:) 메소드와 함께 SnapKit의 필수 요소이다.

위 두 코드는 비슷해보이지만, 가독성이 매우 개선되었고 확인할 수 있는 사항은 다음과 같다.

• SnapKit의 equalToSuperView() 덕분에, parent를 참조할 필요가 전혀 없다. 즉, child가 다른 parent view로 이동해도 코드를 수정할 필요가 없다는 것이다.
• make는 거의 영어와 비슷한 구문을 만들어낸다. make 구문은 “leading이 superview와 동일하도록 만들어라”라고 읽는 것이 좋다.

 

아래와 같이 쓰는 것도 가능하다.

child.snp.makeConstraints {
  $0.leading.equalToSuperview()
  $0.top.equalToSuperview()
  $0.trailing.equalToSuperview()
  $0.bottom.equalToSuperview()
}

 

Composability & Chaining

SnapKit의 가장 큰 특징은 composition 기능이다. 제약 조건 자체 뿐만 아니라, 모든 anchor들도 함께 연결할 수 있다.

위에서의 예제 코드를 다시 작성하면 아래와 같다.

child.snp.makeConstraints { make in
  make.leading.top.trailing.bottom.equalToSuperview()
}

또는, edges를 사용하여 더 간단하게 쓸 수 있다.

child.snp.makeConstraints { make in
  make.edges.equalToSuperview()
}

inset을 추가하고 싶다면, 간단하게 chaining을 추가하면 된다.

child.snp.makeConstraints { make in
  make.edges.equalToSuperview().inset(16)
}

위와 같이 Composability와 chaining은 SnapKit의 핵심으로, NSLayoutConstraints로는 절대 나타낼 수 없는 표현력을 제공한다.

 

 

아래의 예시를 보자.

// Before
myLabel.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
  myLabel.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.45),
  myLabel.heightAnchor.constraint(equalToConstant: 45),
  myLabel.topAnchor.constraint(equalTo: viewProgress.bottomAnchor, constant: 32),
  myLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor)
])

// After
myLabel.snp.makeConstraints { make in
  make.width.equalToSuperview().multipliedBy(0.45) // 1
  make.height.equalTo(45) // 2
  make.top.equalTo(viewProgress.snp.bottom).offset(32) // 3
  make.centerX.equalToSuperview() // 4
}

• 1 - 라벨의 width를 슈퍼뷰 너비의 0.45배로 설정
• 2 - 라벨의 height를 45로 설정
• 3 - 라벨의 top을 progress bar의 bottom으로 제약을 주되, offset은 32만큼 설정
• 4 - x축을 슈퍼뷰의 x축에 맞춰서, 라벨을 수평으로 중앙에 배치

 

또 다른 예시를 하나 보자.

anotherLabel.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
  anotherLabel.topAnchor.constraint(equalTo: myLabel.bottomAnchor, constant: 24),
  anotherLabel.leadingAnchor
    .constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 16),
  anotherLabel.trailingAnchor
    .constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -16)
])

 

위의 제약 조건들을 SnapKit으로 변경하면 아래와 같다.

make.top.equalTo(myLabel.snp.bottom).offset(24)
make.leading.equalToSuperview().offset(16)
make.trailing.equalToSuperview().offset(-16)

하지만 사실 여기서 leading과 trailing anchor가 같은 역할을 하고 있는데, 이를 또 아래와 같이 나타낼 수 있다.

anotherLabel.snp.makeConstraints { make in
  make.top.equalTo(lblTimer.snp.bottom).offset(24)
  make.leading.trailing.equalTo(view.safeAreaLayoutGuide).inset(16)
}

• leading, trailing이 chain되어있다.
• 뷰에 제약을 주기 위해 항상 snp을 사용할 필요는 없다. 이번에는 UILayoutGuide를 사용했다.

또한 inset 옵션이 항상 숫자일 필요는 없다. UIEdgeInsets를 넣어도 된다.

make.leading.trailing.equalTo(view.safeAreaLayoutGuide)
  .inset(UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16))

 

또한, SnapKit은 특정 제약 조건을 추론할 수 있다.

// Before
myButtons.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
  myButtons.leadingAnchor.constraint(equalTo: anotherLabel.leadingAnchor),
  myButtons.trailingAnchor.constraint(equalTo: anotherLabel.trailingAnchor),
  myButtons.topAnchor.constraint(equalTo: anotherLabel.bottomAnchor, constant: 16),
  myButtons.heightAnchor.constraint(equalToConstant: 80)
])

// After
myButtons.snp.makeConstraints { make in
  make.leading.trailing.equalTo(anotherLabel)
  make.top.equalTo(anotherLabel.snp.bottom).offset(16)
  make.height.equalTo(80)
}

여기서 leading과 trailing의 constraint가 단순히 anotherLabel과 같다고 정의하기만 하면, SnapKit은 알아서 추론하여 제약을 설정한다.

 

 

아래 예시에서도 마찬가지로, otherView의 특수성은 필요하지 않다.

SnapKit은 관계에서 첫번째 뷰를 기반으로 어떤 종류의 제약 조건을 생성해야 하는지 알고 있기 때문이다!

// Original Code
view.snp.makeConstraints { make in
  make.width.equalTo(otherView.snp.width)
  make.centerX.equalTo(otherView.snp.centerX)
}

// Could be written as 1:
view.snp.makeConstraints { make in
  make.width.equalTo(otherView)
  make.centerX.equalTo(otherView)
}

// Could be written as 2:
view.snp.makeConstraints { make in
  make.width.centerX.equalTo(otherView)
}

 

 

To be continue..

 

 

참고 문서

SnapKit for iOS: Constraints in a Snap