Snapkit - iOS Library

• Snapkit 깃허브 링크
• Documents

Snapkit이란?

• 기존의 Auto Layout을 조금 더 간결한 코드로 작성할 수 있도록 도와주는 라이브러리
  편리한 것은 잘 모르겠고, 코드 수는 조금 줄일 수 있다...

기존의 AutoLayout 코드

• Auto Layout을 코드베이스로 정해줄 때, 중요한 개념은 바로 크기와 위치를 정해주면 된다는 점이다.
• Snapkit이 레이아웃을 잡는 것을 편하게 도와주기는 하지만, 오토레이아웃에 대한 기본적인 이해가 없으면 이해하는 것에 어려움을 겪을 수 있을 것 같다.

yellowBox.translatesAutoresizingMaskIntoConstraints = false

yellowBox.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 20).isActive = true
yellowBox.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -20).isActive = true
yellowBox.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 20).isActive = true
yellowBox.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -20).isActive = true

위와 같은 방법을 사용한다
translatesAutoresizingMaskIntoConstraints = false 메소드를 호출한 후,
Top, Bottom, Leading, Trailing 등의, constraints를 설정한다.

Snapkit을 사용한 코드

makeConstrains 호출 후 작업

redBox.snp.makeConstraints { make in
	make.width.height.equalTo(100)
    make.top.equalTo(self.view.safeAreaLayoutGuide.snp.top)
	make.centerX.equalToSuperview()
}

• 이는 아주 직관적이다. make 컴포넌트 뒤에 width , height , top , bottom 등의 method를 호출할 수 있다.
• 그 후, equalTo() 메서드를 호출해서 원하는 값으로 레이아웃을 조절할 수도 있다.
• SuperView에 종속된 레이아웃이라면, equalToSuperview() 메서드를 호출해 아주 간단하게(?) (왜냐하면, self.view.centerX를 치는 것은 너무 귀찮기 때문) 처리할 수 있다.

Padding 넣어주기

yellowBox.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 20).isActive = true
yellowBox.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -20).isActive = true
yellowBox.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 20).isActive = true
yellowBox.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -20).isActive = true

• 패딩을 넣어주는 것은 굉장히 귀찮은 일이다.
• Trailing, Bottom은 음수값을 넣어줘야하기 때문에 더더욱 귀찮다.

Snapkit을 사용해서 패딩 넣어주기

yellowBox.snp.makeConstraints { make in
    make.edges.equalToSuperview().inset(UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20))
}

• Snapkit을 사용하면 Layout관련 작업들을 다양한 방법으로 사용할 수 있다.
• inset 메서드를 호출해서 한번에 처리할 수 있다.

Snapkit을 사용하여 Layout 수정하기

var greenBoxTopConstraint: Constraint? = nil

먼저 Constraint라는 Snapkit에서 지원하는 class를 선언해준다.

self.greenBoxTopConstraint = make.top.equalTo(blueBox.snp.bottom).offset(20).constraint

makeConstraints 메서드를 호출 한 후, 방금 선언한 constraint의 바꾸고자 하는 부분을 호출, 저장해준다.

@objc private func moveGreenBoxDown() {
        print("viewController - moveGreenBoxDown() called / offset: \(offset)")
        offset += 40

        self.greenBoxTopConstraint?.update(offset: offset)
        //        self.greenBoxTopNSLayoutConstraint?.constant = CGFloat(offset)
        UIViewPropertyAnimator(duration: 0.2, curve: .easeIn) {
            self.view.layoutIfNeeded()
        }.startAnimation()
    }

self.greenBoxTopConstraint?.update(offset: offset) 의 코드에서 볼 수 있듯이 간단히 offset을 설정해준 후, update 메서드를 호출해주면 된다.
아주 간단히 레이아웃의 수정이 가능하다.