오토레이아웃을 쉽게 할 수 있다고 많이 들어본 SnapKit을 이번에 개인 플젝을 하면서 사용해보려고 한다.
그전에 기초 개념 정리🐷
📝 SnapKit?
SnapKit github의 README를 보면
SnapKit is a DSL to make Auto Layout easy on both iOS and OS X.
SnapKit은 iOS와 OS X에서 오토레이아웃을 쉽게하기 위한 DSL이다.
이라고 나와있다.
DSL(Domain-Specific Languages)은 도메인 특화 언어를 뜻하는데,
특정 분야 (SnapKit으로 치면 오토레이아웃?!)에 최적화된 프로그래밍 언어를 말한다.
그러니까 SnapKit은 오토레이아웃을 간단한 코드로 구현할 수 있도록 최적화된 DSL이라는 것 같다.
🛠 SnapKit 사용해보기
기본 뷰에 TitleLabel과 MapView를 올리는 코드를 먼저 SnapKit을 쓰지 않고 작성해보았다.
titleLabel.translatesAutoresizingMaskIntoConstraints = false
mapView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
titleLabel.topAnchor.constraint(equalTo: safeAreaLayoutGuide.topAnchor, constant: 20),
titleLabel.leadingAnchor.constraint(equalTo: safeAreaLayoutGuide.leadingAnchor, constant: 20),
mapView.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 20),
mapView.widthAnchor.constraint(equalTo: self.widthAnchor),
mapView.heightAnchor.constraint(equalTo: mapView.widthAnchor),
mapView.leadingAnchor.constraint(equalTo: safeAreaLayoutGuide.leadingAnchor)
])길고 긴 코드 완성.. 😵💫
SnapKit은 시스템의 모든 UIView에 snp라는 네임스페이스를 도입하는데, 이 snp는 makeConstraints(_:) 메서드와 함께 SnapKit의 핵심이다.
위 코드를 SnapKit을 통해 작성하면 아래와 같이 된다.
titleLabel.snp.makeConstraints { make in
make.top.equalToSuperview().offset(20)
make.leading.equalToSuperview().offset(20)
}
mapView.snp.makeConstraints { make in
make.top.equalTo(titleLabel.snp.bottom).offset(20)
make.width.equalToSuperview()
make.height.equalTo(self.snp.width)
make.leading.equalToSuperview()
}위 코드는 SnapKit을 사용하지 않을 때와 몇가지 차이점이 있다.
1. translatesAutoresizingMasksIntoConstraints = false를 설정할 필요가 없다.
코드로 오토레이아웃을 구현할 때는 translatesAutoresizingMAsksIntoConstraints = false를 설정해주어야 했는데, SnapKit을 사용할 때는 SnapKit이 알아서 해주기 때문에 따로 설정해주지 않아도 된다.
2. Superview를 참조할 필요가 없다.
SubView에서 Superview의 Anchor와 관계를 만들 때,
subView.topAnchor.constraint(equalTo: parentView.topAnchor)이런 식으로 Superview를 직접 참조해야 했는데, SnapKit의 equalToSuperview()메서드를 사용하면 Superview를 직접 참조할 필요가 없다.
subView.snp.makeConstraints { make in
make.top.equalToSuperview()
}그래서 만약 SubView가 다른 Superview의 하위로 이동되더라도 위 코드를 수정할 필요가 없다.
3. 영어 문법의 어순과 비슷하다.
make 를 사용하는 문법은 영어의 어순과 거의 비슷하게 읽혀서 가독성이 더 높아진다.
=> make top equal to Superview (top을 슈퍼뷰와 동일하게 만들어라)
4. Anchor를 chain해서 사용할 수 있다.
Superview와 관계를 설정할 때, 아래와 같이 Subview의 anchor를 chain해서 사용할 수 있다.
// 1️⃣
subView.snp.makeConstraints { make in
make.leading.top.trailing.bottom.equalToSuperview()
}
// 2️⃣
subView.snp.makeConstraints { make in
make.edges.equalToSuperview()
}참고 자료
