Snapkit

SnapKit

Snapkit Github

Snapkit 이란?

Snapkit은 코드로 레이아웃을 간략하게 설정해줄수 있는 기능을 가진 라이브러리다.
오토레이아웃을 이해하고있다면 무리없이 사용할 수 있다.

CocoaPods, SPM(Swift Package Manager), Carthage 모두 지원하며 원하는 방식을 사용해 import할수 있다.

Snapkit을 사용하는 이유

예를들어 스택뷰를 View에 꽉채운다고 가정해보자.
기존에는 다음과 같이 레이아웃을 설정해줬다.

private func setupContraint() {
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: self.view.topAnchor),
            stackView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            stackView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
        ])
    }

SnapKit을 사용하게될경우 다음과 같이 간략하게 작성할수 있게된다.

private func setupContraint() {
        self.stackView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
    }

Snapkit 사용방법

위에 설명한대로 CocoaPods, SPM, Carthage를 사용하여 import해준다.

import SnapKit

import했으면 제약을 걸고 싶은 요소에 .snp를 붙여 사용한다.

final class malrangViewController: UIViewController {
    let stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .vertical
        return stackView
    }()

    let label = UILabel()

    private func setupView() {
        self.addSubview(self.stackView)
        self.addArrangedSubview(self.label)
    }

    private func setupConstraint() {
        self.stackView.snp.makeConstraints {
            $0.top.leading.equalToSuperview().offset(10)
            $0.trailing.bottom.equalToSuperview().offset(-10)
        }
    }
}

Constraint 생성, 변경, 제거

• makeConstraints: 새로운 Constraints(제약)을 만든다.
• updateConstraints: 기존에 있던 Constraints를 업데이트한다.(기존Constraints가 존재하지 않을 경우 에러 발생함.)
• removeConstraints: Constraints를 제거할때 사용한다.
• remakeConstraints: 기존 Constraints를 무시하고 새로만들때 사용한다.

Constraint Attributes

• top: 위
• bottom: 아래
• left: 왼쪽
• right: 오른쪽
• leading: 읽기 시작하는 방향(일반적으로는 왼쪽 특정국가에서는 오른쪽에 해당한다.)
• trailing: 문장이 끝나는부분?(일반적으로는 오른쪽 특정 국가에서는 왼쪽에 해당한다.)
• centerX: X축의 중앙
• centerY: Y축의 중앙
• center: [.centerX, .centerY]
• size: [.width, .height]
• horizontalEdges: [.left, .right]
• verticalEdges: [.top, .bottom]
• edges: [.horizontalEdges, .verticalEdges]
• directionalHorizontalEdges: [.leading, .trailing]
• directionalVerticalEdges: [.top, .bottom]
• directionalEdges: [.directionalHorizontalEdges, .directionalVerticalEdges]

관계 형성

• equalToSuperview(): 자신의 상위뷰와 같게 적용한다.
• equalTo(): 다른 요소와 관계를 형성하거나 간단하게 숫자로 지정할수 있다.(다른 View와 관계를 짓는다던지)

위치와 크기

• offset(): 현재 뷰 constraint = 슈퍼뷰 constraint + offset 값
• inset(): UIEdgeInsets을 설정한다.
• multipliedBy(): 곱하기.
• dividedBy(): 나누기.

offset() VS inset() (상하좌우 50만큼 여백 주기)

• offset(): 현재 뷰 constraint = 슈퍼뷰 constraint + offset 값

     stackView.snp.makeConstraints { 
        $0.top.equalToSuperview().offset(50)
        $0.left.equalToSuperview().offset(50)
        $0.right.equalToSuperview().offset(-50)
        $0.bottom.equalToSuperview().offset(-50)
  }

  • 값을 더해준다고 생각하면 쉽다.
  • right, bottom에서 값을 50만큼 더해주면 X,Y축에 50을 더하는게 되니까 위치가 오른쪽아래에 위치하게 된다.
  • 중앙에 있길 바라면 위의 코드처럼 음수로 -50 해주어야한다!
  • 아래는 결과 이미지.
  • 

• inset(): UIEdgeInsets을 설정한다.

    stackView.snp.makeConstraints {
        $0.directionalEdges.equalToSuperview().inset(50)
    }

  • 음수가 아닌 양수값임을 확인한다.
  • offset()을 사용했을때와 결과가 같다.
  • 

Sanpkit 특징

translatesAutoresizingMaskIntoConstraints = false 필요없다.

view.translatesAutoresizingMaskIntoConstraints = false

코드로 레이아웃을 잡아줄 때에는 위의 코드를 작성해주어야 하나, snapkit을 사용한다면 작성하지 않아도 된다.

이유는 Snapkit내부에 아래와 같이 프로토콜로 정의 되어있기 때문인다.

extension ConstraintView: LayoutConstraintItem {

}

extension LayoutConstraintItem {

    internal func prepare() {
        if let view = self as? ConstraintView {
            view.translatesAutoresizingMaskIntoConstraints = false
        }
    }
}

Pods/Pods/SnapKit/LayoutConstraintItem 에 정의되어 있다.