[iOS / Swift] 라이브러리 SnapKit이란?

 

 

SnapKit이란?

Swift로 작성된 오토레이아웃을 간단하고 직관적으로 설정할 수 있도록 도와주는 라이브러리이다.

Apple의 NSLayoutConstraint를 사용한 코드보다 훨씬 간결하고 읽기 쉬운 문법을 제공하고 있다.

코드베이스로 UI를 작성할때 매우 유용하며 주로 사용되는 라이브러리이다.

 

 

SnapKit의 설치방법

이건 SPM(Swift Package Manager)를 이용한 설치 방법이다.

다른 라이브러리를 추가할 때도 같은 방법으로 추가하면 된다.

프로젝트를 클릭해주고,

 

 

 

좀 내리다보면, "Frameworks, Libraries, and Embedded Content"라는 탭이 있다.

여기서 +를 눌러주고,

 

하단의 Add Other를 누른 후, Add Package Dependency 클릭.

 

 

그리고 나오는 창에서, 아래의 링크를 검색창에 복사해서 붙여넣기 해준다.

 

https://github.com/SnapKit/SnapKit

GitHub - SnapKit/SnapKit: A Swift Autolayout DSL for iOS & OS X

 

 

 

 

Add Package 클릭

 

한번 더 Add Package 클릭

 

그럼 이제 하단 Pacage Dependencies에 SnapKit이 설치된 것을 볼 수 있다.

 

 

그리고 이후 SnapKit을 사용할 때 import 해주면 스냅킷을 사용할 준비는 끝났다.

 

SnapKit의 기본 문법

EqualTo	특정 값이나 다른 뷰에 대한 제약 설정
lessThanOrEqualTo	최대 값 제한 설정
greaterThanOrEqualTo	최소 값 제한 설정
.inset	내부 여백 설정
.offset	상수 값을 더하거나 뺀다. // make.top.equalTo(10).offset(5)
.multipliedBy	곱하기 값을 지정한다. (지정한 뷰의 몇배수)
.devidedBy	나누기 값을 지정한다. (지정한 뷰의 반값)

 

 

make.edges	모든 가장자리를 다른 뷰의 가장자리에 맞춘다.
make.top	상단 위치
make.bottom	하단 위치
make.leading	좌측 위치
make.trailing	우측 위치
make.centerX	X축 중심
make.centerY	Y축 중심
make.center	X축과 Y축의 중심 (위의 두개를 합친것과 같음)
make.width	너비
make.height	높이
make.size	너비 & 높이 동시 설정 // make.size.equalTo(CGSize(width: 100, height: 50))

 

 

사용 방법

사용 방법은 굉장히 간단하다.

바로 예시를 보자.

 

뷰의 제약 조건 설정

makeConstraints

SnapKit을 사용하지 않은 코드와, SnapKit을 사용한 코드를 한번 보자.

 

먼저 스냅킷을 사용하지 않은 코드

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        // UILabel 생성
        let label = UILabel()
        label.text = "Hello, World!"
        label.textColor = .black
        label.textAlignment = .center
        label.font = UIFont.systemFont(ofSize: 16)
        view.addSubview(label)
        
        // 오토레이아웃 설정
        label.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            label.widthAnchor.constraint(equalToConstant: 200),
            label.heightAnchor.constraint(equalToConstant: 50)
        ])
    }
}

흔히 사용하던 NSLayoutConstraint를 사용한 방법이다.

 

import UIKit
import SnapKit
import Then

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
       // UILabel 생성
        let label = UILabel()
        label.text = "Hello, World!"
        label.textColor = .black
        label.textAlignment = .center
        label.font = UIFont.systemFont(ofSize: 16)
        view.addSubview(label)
        
        // SnapKit을 사용한 제약 조건 설정
        label.snp.makeConstraints { make in
            make.center.equalToSuperview()
            make.width.equalTo(200)
            make.height.equalTo(50)
        }
    }
}

예를 들어 스냅킷을 사용하지 않았을때는 label을 가운데로 맞추기 위해 두줄의 코드를 사용했지만,

스냅킷을 사용하면 한줄로 가능하다. // make.center.equalToSuperView()

 

 

스냅킷또한 일종의 클로저이기 때문에 좀 더 단순하게 작성할 수도 있다.

label.snp.makeConstraints { make in
    make.center.equalToSuperview()
    make.width.equalTo(200)
    make.height.equalTo(50)
}

label.snp.makeConstraints {
    $0.center.equalToSuperview()
    $0.width.equalTo(200)
    $0.height.equalTo(50)
}

make를 생략하고 이런식으로도 가능하다.

 

 

뷰의 제약 조건 업데이트

updateConstraints

box.snp.updateConstraints { make in
    make.width.equalTo(150) // 기존 제약 조건 중 너비를 업데이트
}

 

 

뷰의 제약 조건 재설정

remakeConstraints

box.snp.remakeConstraints { make in
    make.width.equalToSuperview().inset(20) // 새로운 제약 조건을 설정
}

 

 

우선순위 설정

box.snp.makeConstraints { make in
    make.width.height.equalTo(100).priority(.required)    // 필수 우선순위
    make.width.height.equalTo(100).priority(.high)    // 높은 우선순위
    make.width.lessThanOrEqualTo(200).priority(.low)  // 낮은 우선순위
}