[iOS] SnapKit / Then 라이브러리를 이용해 코드로 UI 구현하기

SnapKit

iOS 에서 Autolayout 을 코드로 구현할 때 쉽고 편리하게 도와주는 라이브러리

 

• 작성해야하는 코드의 길이를 줄여주고, 가독성을 높여주는 장점이 있다.
• 뷰 계층의 depth 가 깊어지면 복잡해질 수 있다.

 

pure autolayout 으로 Autolayout 을 적용하는 방법

view.addSubview(label)
label.translatesAutoresizingMaskIntoConstraints = false
let leading = label.leadingAnchor.constraint(equalTo: view.leadingAnchor)
let trailing = label.trailingAnchor.constraint(equalTo: view.trailingAnchor)
let centerX = label.centerXAnchor.constraint(equalTo: view.centerXAnchor)
let centerY = label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
NSLayoutConstraint.activate([leading, trailing, centerX, centerY])

 

SnapKit 을 이용해 Autolayout 을 적용하는 방법

 

• superview 에 대한 constraint 적용을 쉽게 할 수 있다.
• translatesAutoresizingMaskIntoConstraints = false 설정은 기본으로 되어있어, 별도로 작성하지 않아도 된다.

let label = UILabel()
view.addSubview(label)
label.snp.makeConstraints { make in
    make.width.height.centerX.centerY.equalToSuperview()
}​

---

SnapKit 구성 요소 - 속성, 메소드

view.snp.makeConstraints { make in 
    make.{properties}.equalTo(...).{methods}
}

 

✔︎ makeConstraints 메소드를 통해 view 에 대한 constraints 를 생성한다.

 

• viewAnchor 와 targetAnchor 를 연결해주는 코드를 작성한다.
• properties , methods 는 여러 개를 중첩해서 사용할 수 있다.

 

✔︎ properties : constraints 를 적용할 대상

 

• left / right / top / bottom / leading / trailing / lastBaseline
• 크기와 관련된 속성 : size / width / height
• 가운데 정렬 속성 : centerX / centerY

 

✔︎  eqaulTo(...) : constraints 를 적용하기 위한 기준이 되는 대상을 설정하는 메소드

 

• equalTo / greaterThanOrEqualTo / lessThanOrEqualTo
• 위의 메소드들에 대해 eqaulToSuperView() 등 Super view 에 적용할 수 있는 메소드를 제공한다.
• make.left.equalTo(view) == make.left.equalTo(view.snp.left)

 

✔︎  methods : constraints 에 대한 추가적인 정보를 설정하는 메소드

 

• multipliedBy / dividedBy / offset / inset
• > offset : view 와 constraints 를 적용한 view 와의 간격
• > inset : view 내부의 여백
• priority : 우선순위 - integer or .low, .medium, .high, .required.

---

SnapKit - update constraints

constraints 를 생성한 뒤에 업데이트할 필요가 있을 때, 가능한 방법들

 

1 constraint 를 생성할 때 레퍼런스를 저장하고, 필요시 레퍼런스를 통해 값을 변경한다.

 

2 snp.updateConstraints 메소드를 통해 constraints 를 재정의한다.
- makeConstraints 와 비슷하게 작성하지만, 상수 값만 지정할 수 있다.

 

3 snp.remakeConstraints 메소드를 통해 constraints 를 재정의한다.
- makeConstraints 와 비슷하지만, 기존의 constraints 를 삭제한 후 새로 설정한다.

---

Then

• 주로 UIView 기반 인스턴스를 생성하고 속성 설정을 좀 더 편하게 위해 사용된다.
• 코드로 View 를 생성하는 기존 방법에 비해 반복되는 코드가 적어진다는 장점이 있다.

// 1. UILabel 인스턴스를 생성과 속성 설정을 따로 작성한 코드
let label = UILabel()
label.textAlignment = .center
label.text = "Hello, World!"

// 2. 클로저를 통해 UILabel 인스턴스 생성과 속성을 설정하는 코드
let label: UILabel = {
  let label = UILabel()
  label.textAlignment = .center
  label.text = "Hello, World!"
  return label
}()

// 3. UILabel 인스턴스를 생성해 then + 클로저를 통해 속성을 설정하는 코드
let label = UILabel().then {
  $0.textAlignment = .center
  $0.text = "Hello, World!"
}

---

Then 라이브러리의 다른 메소드

• then() : 클로저를 통해 인스턴스 생성과 함께 속성값 설정이 가능하도록 한다.
• with() : 클로저를 통해 value type 을 복사와 함께 속성값 설정이 가능하도록 한다.
• do() : 클로저를 통해 인스턴스의 메소드 동작이 수행 가능하도록 한다.

---

참고 문서

• GitHub - SnapKit/SnapKit: A Swift Autolayout DSL for iOS & OS X
• SnapKit document
• GitHub - Then