안녕하세요 iOS 개발자 루크입니다!
오늘은 스토리보드없이 개발하기 제 4탄 SnapKit 라이브러리를 들고 와봤습니다.
스토리보드 없이 개발을 하다보니
요녀석... 은근 코드 길이를 많이 잡아 먹거든요 가독성도 안좋고 중복도 많고
이번엔 이러한 오토레이아웃 코드를 깔끔하게 바꿔줄 수 있는 라이브러리를 들고 와봤습니다.
사용전
let label = UILabel()
view.backgroundColor = .white // 배경색
view.addSubview(label)
label.text = "스토리보드가 없어요!" // test를 위해서 출력할 라벨
label.font = .boldSystemFont(ofSize: 30)
label.translatesAutoresizingMaskIntoConstraints = false
label.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0).isActive = true
label.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
Swift
복사
사용후
let label = UILabel()
view.backgroundColor = .white // 배경색
view.addSubview(label)
label.text = "스토리보드가 없어요!" // test를 위해서 출력할 라벨
label.font = .boldSystemFont(ofSize: 30)
label.snp.makeConstraints { make in
make.center.equalToSuperview()
}
Swift
복사
어떤가요? 훨씬 깔끔하죠?
이제 사용법을 알아봅시다.
SnapKit 구문의 해석
make.top.equalTo(viewProgress.snp.bottom).offset(32)
Swift
복사
만들다 → 상단을 → viewProgress 의 하단과 동일하게 → offset 은 32
SnapKit 의 구문은 왼쪽부터 순차적으로 그 의미를 갖습니다.
Anchor
SnapKit 을 사용하면
모든 앵커와 제약 조건 자체를 한꺼번에 연결하는 것이 가능합니다!
child.snp.makeConstraints { make in
make.lead.top.trailing.bottom.equalToSuperview()
}
Swift
복사
위 코드처럼 한번에 연결하고자 하는 앵커들을 프로퍼티를 호출하듯이 연달아 나열해주면 돼요!
물론 위 코드는 edges 프로퍼티를 사용하면 더 간단하게 표현이 가능합니다
child.snp.makeConstraints { make in
make.edges.equalToSuperview()
}
Swift
복사
view 에 inset 을 주고 싶은경우 inset() 을 사용하면 됩니다
child.snp.makeConstraints { make in
make.edges.equalToSuperview().inset(16)
}
Swift
복사
Constraint
•
multipliedBy()
// superview의 너비와 같게 만들고 0.45를 곱한 형태
make.width.equalToSuperview().multipliedBy(0.45)
Swift
복사
•
offset()
// 상단을 viewProgress의 하단으로 제한하고, 32만큼 offset
make.top.equalTo(viewProgress.snp.bottom).offset(32)
Swift
복사
•
offset() vs inset()
◦
offset: element와의 간격에 사용
myView.snp.makeConstraints { make in
make.top.equalToSuperview().offset(50)
make.left.equalToSuperview().offset(50)
make.right.equalToSuperview().offset(-50)
make.bottom.equalToSuperview().offset(-50)
}
Swift
복사
◦
inset: superview와의 간격에 사용
myView.snp.makeConstraints { make in
make.edges.equalToSuperview().inset(UIEdgeInsets(top: 50, left: 50, bottom: 50, right: 50))
}
// 동일 코드: make.edges.equalToSuperview().inset(50)
Swift
복사
SnapKit 은 암묵적으로 동일한 constraint 를 따라갑니다
// 원본
view.snp.makeConstraints { make in
make.width.equalTo(otherView.snp.width)
make.centerX.equalTo(otherView.snp.centerX)
}
// 동일1
view.snp.makeConstraints { make in
make.width.equalTo(otherView)
make.centerX.equalTo(otherView)
}
Swift
복사
빨간색 줄이 쳐진 부분이 생략이 가능합니다.
Update Constraint
constraint 의 기준이 되는 view 가아니라 constant 값만 업데이트 하고자 하는 경우
button.snp.updateConstraints { make in
make.height.equalTo(100)
}
Swift
복사
RemakeContraint
Constant 값 뿐만아니라 기준이 되는 view 를 변경하고자 할 때, >> 기존의 contraint 는 삭제됨
func updateProgress(to progress: Double) {
viewProgress.snp.remakeConstraints { make in
make.top.equalTo(view.safeAreaLayoutGuide)
make.width.equalToSuperview().multipliedBy(progress)
make.height.equalTo(32)
make.leading.equalToSuperview()
}
}
Swift
복사
lessThanOreEqualTo, Priority
override func updateConstraints() {
self.growingButton.snp.updateConstraints { (make) -> Void in
make.center.equalTo(self);
make.width.height.equalTo(buttonSize).priority(250)
make.width.height.lessThanOrEqualTo(self)
}
super.updateConstraints()
}
Swift
복사