[UIKit] Snapkit (스냅킷) 사용해보기

🧸  시작

코드베이스를 도와주는 snapkit 라이브러리를 사용해서 화면을 생성해보자~

 

 

🧸  스냅킷 설치

2023.02.28 - [PROJECT/iOS] - [iOS/Swift] pod 설치방법

[iOS/Swift] pod 설치방법

 

이제 준비는 끝

viewController 에서 화면을 만들어준다.

 

 

🧸  화면에 보여줄 버튼을 생성하고 뷰에 추가한다.

import UIKit

class ViewController: UIViewController {
    
    lazy var redBtn: UIButton = {
        let btn = UIButton()
        return btn
    }()
    
    lazy var yellowBtn: UIButton = {
        let btn = UIButton()
        return btn
    }()
    
    lazy var blueBtn: UIButton = {
        let btn = UIButton()
        return btn
    }()
    
    lazy var greenBtn: UIButton = {
        let btn = UIButton()
        return btn
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        setAddSubViews()
    }

    func setAddSubViews() {
        view.addSubview(redBtn)
        view.addSubview(yellowBtn)
        view.addSubview(blueBtn)
        view.addSubview(greenBtn)
    }
}

• lazy var redBtn: UIButton = { let btn = UIButton() return btn }() : 버튼을 추가해준다.
  나중에 속성을 추가해주기 위해서 클로저로 생성한다.
  lazy var로 설정한 이유는 호출이 있을 때만 초기화하기 때문.
• setAddSubViews() : 뷰에 추가하는 메소드를 호출한다.
  나중에 보기 편하게 하기위해서 따로 빼준다.
  
• view.addSubview(redBtn) : 뷰에 추가한다.

 

여기까지 진행하면 이제 버튼이 어디있는 지 확인이 안되기 떄문에 화면을 실행해도 나오지 않는다.
제약조건을 걸어주고 크기를 설정해줘야 화면에 보여진다.

 

 

🧸  스냅킷을 이용하여 제약조건을 걸어준다.

import UIKit
import SnapKit

class ViewController: UIViewController {

    lazy var redBtn: UIButton = {
        let btn = UIButton()
        btn.backgroundColor = .systemRed
        btn.setTitle("빨간색 버튼", for: .normal)
        return btn
    }()
    
    lazy var yellowBtn: UIButton = {
        let btn = UIButton()
        btn.backgroundColor = .systemYellow
        btn.setTitle("노란색 버튼", for: .normal)
        return btn
    }()
    
    lazy var blueBtn: UIButton = {
        let btn = UIButton()
        btn.backgroundColor = .systemBlue
        btn.setTitle("파란색 버튼", for: .normal)
        return btn
    }()
    
    lazy var greenBtn: UIButton = {
        let btn = UIButton()
        btn.backgroundColor = .systemGreen
        btn.setTitle("초록색 버튼", for: .normal)
        return btn
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        setAddSubViews()
        makeConstraints()
    }
    
    func setAddSubViews() {
        view.addSubview(redBtn)
        view.addSubview(yellowBtn)
        view.addSubview(blueBtn)
        view.addSubview(greenBtn)
    }
    
    func makeConstraints() {
        redBtn.snp.makeConstraints { make in
            make.top.equalTo(view.safeAreaLayoutGuide.snp.top)
            make.leading.equalToSuperview().offset(30)
            make.trailing.equalToSuperview().offset(-30)
            make.height.equalTo(50)
        }
        yellowBtn.snp.makeConstraints { make in
            make.top.equalTo(redBtn.snp.bottom).offset(10)
            make.leading.equalToSuperview().offset(30)
            make.trailing.equalToSuperview().offset(-30)
            make.height.equalTo(50)
        }
        blueBtn.snp.makeConstraints { make in
            make.top.equalTo(yellowBtn.snp.bottom).offset(10)
            make.leading.equalToSuperview().offset(30)
            make.trailing.equalToSuperview().offset(-30)
            make.height.equalTo(50)
        }
        greenBtn.snp.makeConstraints { make in
            make.top.equalTo(blueBtn.snp.bottom).offset(10)
            make.leading.equalToSuperview().offset(30)
            make.trailing.equalToSuperview().offset(-30)
            make.height.equalTo(50)
        }
    }
}

• 버튼 클로저에 버튼색상과 버튼제목을 설정해준다.
• makeConstraints() : 제약조건을 만들어주는 메소드
• 제약조건을 걸어줄 때는 프로퍼티.snp.makeConstraints { } 를 사용하면 된다.
• 스토리보드에서 설정하듯이 x축과 y축의 제약조건을 제대로 설정해주면 된다.
• 위, 왼쪽, 오른쪽의 제약조건을 설정한 후 높이를 주어서 bottom의 제약조건은 생략하였다.

 

 

 

 

 

 

 

[참고자료]

https://github.com/SnapKit/SnapKit

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