SnapKit

• Github
• 오토 레이아웃을 쉽게 만들어주는 iOS & OSX 라이브러리

Usage

기본

let box = UIView()
superView.addSubview(box) 

box.snp.makeConstraints { (make) -> Void in 
	// make constraint here
}

superView로부터 20 padding 주기 (1)

make.top.equalTo(superView).offset(20)
make.left.equalTo(superView).offset(20)
make.bottom.equalTo(superView).offset(-20)
make.right.equalTo(superView).offset(-20)

superView로부터 20 padding 주기 (2)

make.edges.equalTo(superView).inset(UIEdgeInsets(top: 20, left: 20, bottom: 20, right:20))

Snapkit이 처리 해 주는 것

• item 2 생략하면 superView로 자동 처리
• translatesAutoresizingMaskIntoConstraints = false 생략해도 자동 처리

Equal 외에

• equalTo
• lessThanOrEqualTo
• greaterThanOrEqualTo

같은 attribute면 생략 가능

make.left.greaterThanOrEqualTo(label)
make.left.greaterThanOrEqualTo(labe.snp.left)

constant

constant constraint 사용 가능

// width >= 200 && width <= 400
make.width.greaterThanOrEqualTo(200)
make.width.lessThanOrEqualTo(400)

align attribute (left, right, centerY, ...) 는 constant 사용 불가 -> 자동으로 superView와 관련된 constraint가 되도록 처리

// 두개는 같음
make.left.lessThanOrEqualTo(10) 
make.left.lessThanOrEqualTo(superView).offset(20)

다른 것들로 constraint 사용 가능

make.size.equalTo(CGSize(width: 50, height: 100))
make.edges.equalTo(UIEdgeInsets(top: 10, left: 0, bottom: 10, right: 0))
make.left.equalTo(view).offset(UIEdgeInsets(top: 10, left: 0, bottom: 10, right: 0))

Prioritize

make.top.equalTo(label.snp.top).priority(600)
make.top.equalTo(label.snp.top).priority(.medium)

Composition

edges

// top, left, bottom, right 이 전부 equal
make.edges.equalTo(view2)

// make top = superview.top + 5
// left = superview.left + 10,
// bottom = superview.bottom - 15
// right = superview.right - 20
make.edges.equalTo(superview).inset(UIEdgeInsets(top: 5, left: 10, bottom: 15, right: 20))

size

// width, heigth 둘다 greaterThan
make.size.greaterThanOrEqualTo(titleLabel)

// width = superview.width + 100
// height = superview.height + 100
make.size.equalTo(superview).offset(100)

center

// centerX, centerY 둘다 동일
make.center.equalTo(button1)

// centerX = superview.centerX + 5
// centerY = superview.centerY + 5
make.center.equalTo(superview).offset(5)

여러개 chain

// left, right, bottom이 superView와 같음
make.left.right.bottom.equalTo(superView)

// top이 같음
make.top.equalTo(otherView)

Updating Constraints

참조

// 변수 선언
var topConstraint: Constraint? = nil

// 클로저 안에서 변수에 할당
view1.snp.makeConstraints { (make) -> Void in
  self.topConstraint = make.top.equalTo(superview).offset(padding.top).constraint
  make.left.equalTo(superview).offset(padding.left)
}

deactivate

self.topConstraint.deactivate()

update

self.topConstraint.updateOffset(5)

constant만 업데이트 : snp.updateConstriants

self.growingButton.snp.updateConstraints { (make) -> Void in
    make.center.equalTo(self);
    make.width.equalTo(self.buttonSize.width).priority(250)
    make.height.equalTo(self.buttonSize.height).priority(250)
    make.width.lessThanOrEqualTo(self)
    make.height.lessThanOrEqualTo(self)
}

SnapKit으로 설정된 constraint들 전부 리셋후 새로추가

self.button.snp.remakeConstraints { (make) -> Void in 
	// new constraint
}

디버깅을 위해

make.top.equalTo(otherView).labeled("buttonViewTopConstraint")
-> 콘솔 로그에 나타남