SnapKit

라이브러리의 정식 깃허브 주소는 여기이다.

 

왜 사용할까?

Autolayout을 코드로 작성하려면 NSLayoutConstraint를 직접 지정해주며 하나하나 제약을 적용해 주어야한다. 

이렇게 코드를 구성하면 복잡도는 올라가고 가독성은 떨어진다. 그렇기 때문에 SnapKit을 사용한다. 

 

 

 

어떻게 사용할까?

1. SnapKit을 import 해주고 View를 만들어준다. 

import UIKit
import SnapKit

class ViewController: UIViewController {

    let box = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

 

NSLayoutConstraint로 Autolayout을 작성하면 translatesAutoresizingMaskIntoConstraints을 선행코드로 작성해야하지만 SnapKit에서는 내부에서 해주기 때문에 따로 할 필요가 없다.

 

 

 

2. SnapKit을 사용하려면 아래의 코드처럼 작성해야한다.

적용할 UI요소.snp.makeConstraints { make in
	make.제약사항
}

 

 

 

3. 이제 다양한 Constraint​를 걸어보자. 

 

a. width와 height 제약 적용하기

import UIKit
import SnapKit

class ViewController: UIViewController {

    let box = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setUpView()
        setConstraints()
    }
    
    func setUpView() {
        box.backgroundColor = .red
        view.addSubview(box)
    }
    
    func setConstraints() {
        box.snp.makeConstraints { make in
            make.width.height.equalTo(100) // 높이와 너비를 100으로 설정
            make.center.equalToSuperview() // 상위View의 중앙에 정렬
        }
        
    }


}

 

[결과]

 

 

2. top, bottom, leading, trailing 제약 적용하기

 

여러 값이 중복일 경우 사용가능하다.

 

import UIKit
import SnapKit

class ViewController: UIViewController {

    let box = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setUpView()
        setConstraints()
    }
    
    func setUpView() {
        box.backgroundColor = .red
        view.addSubview(box)
    }
    
    func setConstraints() {
        box.snp.makeConstraints { make in
            make.top.bottom.leading.trailing.equalToSuperview()
        }
        
    }


}

 

[결과]

 

 

3. offset() 사용하기

 

offset()은 해당 위치에서 추가적인 값을 넣고 싶을 때 사용. (top, leading 은  + 값, trailing, bottom은 - 값)

 

import UIKit
import SnapKit

class ViewController: UIViewController {

    let box = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setUpView()
        setConstraints()
    }
    
    func setUpView() {
        box.backgroundColor = .red
        view.addSubview(box)
    }
    
    func setConstraints() {
        box.snp.makeConstraints { make in
            make.top.leading.equalToSuperview().offset(10) //box를 상위View보다 + 10 좌표에서 시작
            make.trailing.bottom.equalToSuperview().offset(-10) //box를 상위View보다 - 10 좌표에서 시작
        }
        
    }


}

 

[결과]

 

 

4. equlTo() 사용하기

 

equalTo()는 다른 요소의 특정 값(nameLabel의 bottom 값)을 지정할 수 도 있고,  간단하게 숫자로 지정해줄 수 있

 

import UIKit
import SnapKit

class ViewController: UIViewController {

    let box = UIView()
    let box2 = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setUpView()
        setConstraints()
    }
    
    func setUpView() {
        box.backgroundColor = .red
        view.addSubview(box)
        box2.backgroundColor = .blue
        view.addSubview(box2)
    }
    
    func setConstraints() {
        box.snp.makeConstraints { make in
            make.width.height.equalTo(100) // 높이와 너비를 100으로 설정
            make.center.equalToSuperview() // 상위View의 중앙에 정렬
        }
        
        box2.snp.makeConstraints{make in
            make.top.leading.equalTo(box).offset(10) // box2의 top, leading 제약을 box와 같게 하는 동시에 좌표는 + 10에서 시작
            make.trailing.bottom.equalTo(box).offset(-10) // box2의 trailing, bottom 제약을 box와 같게 하는 동시에 좌표는 - 10에서 시작
        }
        
    }


}

 

[결과]

 

 

5. multipliedBy, dividedBy 사용하기

 

multipliedBy: 곱하기 / dividedBy: 나누기

 

import UIKit
import SnapKit

class ViewController: UIViewController {

    let box = UIView()
    let box2 = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setUpView()
        setConstraints()
    }
    
    func setUpView() {
        box.backgroundColor = .red
        view.addSubview(box)
        box2.backgroundColor = .blue
        view.addSubview(box2)
    }
    
    func setConstraints() {
        box.snp.makeConstraints { make in
            make.width.height.equalTo(100) // 높이와 너비를 100으로 설정
            make.center.equalToSuperview() // 상위View의 중앙에 정렬
        }
        
        box2.snp.makeConstraints{make in
            make.width.equalTo(box.snp.width).dividedBy(2) //box2의 너비를 box 너비의 1/2배로 제약
            make.height.equalTo(box.snp.height).multipliedBy(2)//box2의 높이를 box 높이의 2배로 제약
            make.top.leading.equalTo(100)
        }
        
    }


}

 

[결과]

 

정 모르겠으면 여기 참고