[iOS] SnapKit 사용해보기

이번편도 전편 - 코드로 UI 구성해보기와 이어집니다.

전편에서 구현한 간단한 UI 화면인데요.
이번 편에서는 코드로 UI를 작성할때 조금 더 편하게 제약조건을 작성할 수 있게 도와주는 SnapKit에 대해 설명을 해보고자 합니다.

SnapKit 공식문서 를 참고하여 작성합니다.

1. 설치

외부 라이브러리를 사용하기 위해서는 설치를 먼저 해주어야 하는데요.
설치하는 방법은 CocoaPod, Carthage, SPM이 있습니다.
저는 간단하게 CocoaPod을 통해 설치를 했습니다.

설치 방법은 잘 정리되어 있는 블로그들이 많으니 넘어가겠습니다~ :)

2. import 해주기

잘 설치가 되었다면 이렇게 SnapKit이 뜨게 됩니다.
저희는 ViewController에서만 제약조건을 잡을 때 사용하니 ViewController에서 import 해줍시다

3. SnapKit 사용 전에 살펴보기

먼저 공식 문서에서 사용법을 확인해 봅시다!

import SnapKit

class MyViewController: UIViewController {

    lazy var box = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.addSubview(box)
        box.backgroundColor = .green
        box.snp.makeConstraints { (make) -> Void in
           make.width.height.equalTo(50)
           make.center.equalTo(self.view)
        }
    }
}

간단하게 UI요소의 .snp.makeConstraints를 사용하여 제약조건을 잡을 수 있네요.

또한 translatesAutoresizingMaskIntoConstraints 옵션 또한 false로 해주지 않고 있는데요.

왜 why?
SnapKit 내부에서 자동으로 false를 해주고 있기 때문에 저희는 따로 해주지 않아도 됩니다.

// LayoutConstraintItem.swift

extension LayoutConstraintItem {
    
    internal func prepare() {
        if let view = self as? ConstraintView {
            view.translatesAutoresizingMaskIntoConstraints = false
        }
    }
...

4. 기존 코드 수정하기

• 기존 작성 코드

    func setupViews() {
        let safeArea = view.safeAreaLayoutGuide
        
        view.backgroundColor = .white
        [imageView, button].forEach(view.addSubview(_:))
        
        NSLayoutConstraint.activate([
            imageView.widthAnchor.constraint(equalToConstant: 200),
            imageView.heightAnchor.constraint(equalToConstant: 200),
            imageView.centerXAnchor.constraint(equalTo: safeArea.centerXAnchor),
            imageView.centerYAnchor.constraint(equalTo: safeArea.centerYAnchor),
            
            button.centerXAnchor.constraint(equalTo: imageView.centerXAnchor),
            button.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 20)
        ])
    }

저희가 수정할 부분은 NSLayoutConstraint를 사용하는 부분입니다.

• 수정 후 코드

    func setupViews() {
        let safeArea = view.safeAreaLayoutGuide
        
        view.backgroundColor = .white
        [imageView, button].forEach(view.addSubview(_:))
        
        imageView.snp.makeConstraints { make in
            make.width.height.equalTo(200)
            make.centerX.centerY.equalTo(safeArea)
        }
        
        button.snp.makeConstraints { make in
            make.centerX.equalTo(imageView)
            make.top.equalTo(imageView.snp.bottom).offset(20)
        }
    }

조금 더 직관적이고 깔끔하게 제약조건 코드를 작성해 줄 수 있습니다.
상세한 SnapKit 사용법은 SnapKit - Docs를 참고하시면 좋을 것 같습니다!

5. 마무리

ViewController 전체 코드 보기

import UIKit
import SnapKit

class ViewController: UIViewController {
  
  let imageView: UIImageView = {
      let imageView = UIImageView()
      imageView.image = UIImage(systemName: "folder.fill")
      return imageView
  }()
  
  let button: UIButton = {
      let button = UIButton()
      button.setTitle("버튼입니다.", for: .normal)
      button.setTitleColor(.tintColor, for: .normal)
      return button
  }()

  override func viewDidLoad() {
      super.viewDidLoad()

      setupViews()
  }

  func setupViews() {
      let safeArea = view.safeAreaLayoutGuide
      
      view.backgroundColor = .white
      [imageView, button].forEach(view.addSubview(_:))
      
      imageView.snp.makeConstraints { make in
          make.width.height.equalTo(200)
          make.centerX.centerY.equalTo(safeArea)
      }
      
      button.snp.makeConstraints { make in
          make.centerX.equalTo(imageView)
          make.top.equalTo(imageView.snp.bottom).offset(20)
      }
  }
}