[Swift] SnapKit을 사용해보자!

이번 글에서는 SnapKit이라는 라이브러리에 대해서 알아보겠습니다. SnapKit은 뷰의 레이아웃 Constraints를 쉽고 간략하게 설정해줄 수 있는 기능을 가진 라이브러리입니다. 

(저도 프로젝트에서 몇 번 사용해보면서 많이 편리하다는 것을 느꼈습니다. )

기존의 isActive설정보다 작성법이 간단하고 응용 또한 쉬워서 적응하는데도 오랜 시간이 걸리지 않습니다. 

간단하게 예제를 만들어보면서 어떻게 사용하면 되는지 한 번 알아보겠습니다. 

---

1. 프로젝트 생성

이번 프로젝트에서는 간단히 뷰와 버튼 두 가지만을 생성해서 버튼을 클릭시 뷰의 크기를 조정하는 정도의 앱으로 테스트해보겠습니다.

프로젝트의 도입은 역시나 Carthage로 진행하였습니다. 

(도입법에 대해서 잘 이해가 되지 않으신 분은 아래 글을 참고해 주세요)

https://unclean.tistory.com/3

(1) Carthage로 라이브러리 도입하기

이번 글에서는 SnapKit 라이브러리를 사용해서 구현할 것이기 때문에 딱히 스토리보드의 조작은 없습니다.

2. 코드 작성

간단한 기능이기 때문에 단계에 따라 진행할 필요 없이 한 번에 작성해 보겠습니다.

import UIKit
import SnapKit // 사용하기 위해서는 import!!

class ViewController: UIViewController {

    let changeView = UIView()
    let fullSizeBtn = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.initView()
    }
    
    private func initView() {
        self.makeChangeView()
        self.makeFullSizeBtn()
    }
}

// MARK:- 기능 설정

extension ViewController {
    
    /// 뷰 설정
    ///
    private func makeChangeView() {
        self.view.addSubview(self.changeView)
        
        self.changeView.backgroundColor = .blue
        
        self.changeView.snp.makeConstraints { (make) -> Void in
           make.width.height.equalTo(100) // 임의의 사이즈를 지정한다.
           make.center.equalTo(self.view) // Constraints의 중앙을 view에 맞춘다.
        }
    }
    
    /// 버튼 설정
    ///
    private func makeFullSizeBtn() {
        self.view.addSubview(self.fullSizeBtn)
        
        self.setButtonStyle()
        // 버튼 이벤트 생성
        self.fullSizeBtn.addTarget(self, action: #selector(didTappedFullSizeBtn(_:)), for: .touchUpInside)
        
        self.fullSizeBtn.snp.makeConstraints { (make) -> Void in
            make.centerX.equalTo(self.changeView) // X축 중앙을 changeView와 맞춘다.
            make.top.equalTo(self.changeView.snp.bottom).offset(10) // top의 간격을 changeView의 bottom에 10으로 맞춘다.
        }
    }
    
    
    /// 버튼을 눌렀을 시
    ///
    ///  - parameter sender: 버튼
    @objc
    private func didTappedFullSizeBtn(_ sender: UIButton) {
        self.fullSizeBtn.isEnabled = false
        
        self.changeView.snp.remakeConstraints { (remake) in
            remake.top.bottom.left.right.equalTo(self.view) // 모든 간격을 view에 맞추어 재설정한다.
        }
        
        self.fullSizeBtn.snp.remakeConstraints { (remake) in
            remake.center.equalTo(self.changeView) // chageView의 중앙에 맞추어 재설정한다.
        }
        
        UIView.animate(withDuration: 1.0, animations: {
            self.view.layoutIfNeeded()
        }, completion: nil)
    }
    
    /// 버튼 스타일 설정
    ///
    private func setButtonStyle() {
        self.fullSizeBtn.setTitle("Full Mode", for: .normal)
        self.fullSizeBtn.setTitleColor(.black, for: .normal)
    
        self.fullSizeBtn.setTitle("Full Mode", for: .highlighted)
        self.fullSizeBtn.setTitleColor(.systemGray, for: .highlighted)
    
        self.fullSizeBtn.setTitle("Completed!", for: .disabled)
        self.fullSizeBtn.setTitleColor(.white, for: .disabled)
    }
}

3. 실행 및 확인 

생각한 대로 잘 움직이는지 확인해봅시다.

4. 마무리

이번 글에서는 SnapKit의 라이브러리에 대하여 알아보았습니다. 

이전부터 알고 사용하시던 분도 있으실 것이고 이번에 새로 알게 된 분도 있으실 것이라고 생각합니다. 

유용하다고 생각되시면 자신의 프로젝트에 한 번 도입시켜보는 것을 추천드립니다.

궁금하신 점이나 지적사항은 댓글에 부탁드립니다.

많은 도움이 되었으면 좋겠습니다.

감사합니다.

https://github.com/SnapKit/SnapKit

SnapKit/SnapKit

---

환경 

Xcode 11.3.1

Swift 5