[iOS] SnapKit과 Then 사용하기

iOS에서 코드로 뷰 짤 때 생산성을 크게 높여 주어 많이 쓰이고 있는 SnapKit과 Then 라이브러리를 알아보도록 하겠습니다.

📕 SnapKit

SnapKit는 iOS와 OS X 모두에서 오토 레이아웃을 쉽게 하기 위한 DSL입니다.

DSL: 특정한 도메인에 특화된 언어.

Requirements

• iOS 10.0+ / Mac OS X 10.12+ / tvOS 10.0+
• Xcode 10.0+
• Swift 4.0+

SnapKit 사용법

SnapKit 사용하기 전

labelTimer.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
  lblTimer.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.45),
  lblTimer.heightAnchor.constraint(equalToConstant: 45),
  lblTimer.topAnchor.constraint(equalTo: viewProgress.bottomAnchor, constant: 32),
  lblTimer.centerXAnchor.constraint(equalTo: view.centerXAnchor)
])

사용하기 전 코드는 translatesAutoresizingMaskIntoConstraints 를 false로 바꿔주고 추가할 Anchor들을 일일이 다 activate 해주는 구조입니다.

SnapKit 사용 후

labelTimer.snp.makeConstraints {
  $0.width.equalToSuperview().multipliedBy(0.45) // 1
  $0.height.equalTo(45) // 2
  $0.top.equalTo(viewProgress.snp.bottom).offset(32) // 3
  $0.centerX.equalToSuperview() // 4
}

snapkit을 쓰면 내부적으로 translatesAutoresizingMaskIntoConstraints 를 false로 바꿔주고 activate를 해줍니다.

클로저를 사용하여 좀 더 직관적이고 프로퍼티나 메소드들 이름이나 사용 방법들이 기존보다 더 간단해진 것을 확인 할 수 있습니다

체인 형태로 더욱 간편하게 오토레이아웃 잡기

아래와 같이 같은 메소드를 여러 번 사용할 경우에는

child.snp.makeConstraints { 
  $0.leading.equalToSuperview()
  $0.top.equalToSuperview()
  $0.trailing.equalToSuperview()
  $0.bottom.equalToSuperview()
}

아래와 같이 프로퍼티들을 체인형태로 연달아 작성한 후 메소드를 호출하여 코드 양을 훨씬 줄일 수 있습니다.

child.snp.makeConstraints { make in
  make.leading.top.trailing.bottom.equalToSuperview()
}

더 추가적인 내용은 아래 SnapKit github와 Kodeco 강의에서 확인 할 수 있습니다.

https://github.com/SnapKit/SnapKit

SnapKit for iOS: Constraints in a Snap

📘 Then

Then은 스타일쉐어의 iOS 개발자 전수열님이 만든 라이브러리 입니다.

앞선 Snapkit은 생성된 ui의 오토레이아웃을 간결하게 할 때 쓰인다면 Then은 ui 인스턴스를 처음 생성할 때 쓰입니다. 클로저를 사용해서 생성하기 때문에 좀 더 직관적이고 깔끔하게 생성할 수 있어서 많이 쓰입니다.

Then 사용하기 전 코드

let label: UILabel = {
  let label = UILabel()
  label.textAlignment = .center
  label.textColor = .black
  label.text = "Hello, World!"
  return label
}()

Then을 사용한 코드

let label = UILabel().then {
  $0.textAlignment = .center
  $0.textColor = .black
  $0.text = "Hello, World!"
}

화면에 올릴 UI인스턴스를 생성하고 프로퍼티들을 설정할 때 코드 양이 줄어들고 직관적이고 깔끔한 것을 볼 수 있습니다.

더 상세한 내용은 하단의 레포지터리에서 확인 할 수 있습니다.

https://github.com/devxoul/Then

CocoaPod 을 이용하여 라이브러리 설치하기

그럼 이제 이 라이브러리들을 사용하기 위해 프로젝트에 추가해 보도록 하겠습니다.

 

1. CocoaPod이 없다면 먼저 터미널에서 아래의 명령어로 CocoaPod을 설치해줍니다.

gem install cocoapods

CocoaPods : Swift 및 Objective-C 코코아 프로젝트의 종속성 관리자. 96,000개 이상의 라이브러리를 보유하고 있으며 3백만 개 이상의 앱에서 사용.

 

2. Snapkit을 사용 할 프로젝트 .xcodeproj가 있는 경로로 이동하여 아래 명령어를 순차적으로 입력합니다.

pod init //Podfile 생성 vim Podfile. //Podfile 편집

 

3. Podfile에 하단의 코드 대로 snapkit과 then을 추가합니다. ( i 눌러서 편집 모드로 전환 후 텍스트 추가)

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'WorldHunter' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for WorldHunter
  pod 'SnapKit', '~> 5.6.0'
  pod 'Then'
end

4. Podfile 저장 한 후 pod install (저장 : esc 눌러서 편집모드 종료 후 :wq 입력)

기존 프로젝트를 닫고 나가면 새로 생긴 xcworkspace파일이 있는데 앞으로는 이 파일을 열어서 작업을 하면 됩니다.

 

xcworkspace란?

• workspace는 프로젝트 및 기타 문서를 그룹화하여 함께 작업할 수 있는 Xcode document입니다
• workspace 에 원하는 수의 Xcode 프로젝트 및 다른 파일들을 포함할 수 있습니다
• 각 Xcode 프로젝트의 파일을 구성하는 것 외에도 workspace는 포함된 프로젝트와 target 간의 암시적(implicit) 및 명시적(explicit) 관계를 제공합니다.

외부라이브러리 사용 없이 프로젝트를 생성하고 사용할 경우에는 xcodeproj로 실행해도 되지만, 외부라이브러리를 사용했을 경우에는 둘 이상의 프로젝트를 모아 한 군데서 작업하는 상황이 되니 workspace 에서 작업을 해야합니다.

xcworkspace를 열면 아래와 같이 SnapKit과 Then이 추가 된 것을 확인 할 수 있습니다.

 

원하는 파일에서 import를 해준 뒤 사용하면 됩니다.

Example

import UIKit
import SnapKit
import Then

class ViewController: UIViewController {
    //MARK: Components
    
    private let titleView = UIView()
		//Then 사용해서 인스턴스 생성
    private let titleLabel = UILabel().then{
        $0.text = "약속 신청"
        $0.font = UIFont.hanSansBoldFont(ofSize: 18)
    }
    private let closeButton = UIButton().then{
        $0.setBackgroundImage(UIImage(named: "btn_close"), for: .normal)
        $0.addTarget(self, action: #selector(touchUpCloseButton(_:)), for: .touchUpInside)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        setLayout()
    }

   //MARK: Layout
    func setLayout() {
        self.navigationController?.isNavigationBarHidden = true
        view.addSubview(titleView)
        titleView.addSubviews([titleLabel,closeButton])
        
        titleView.snp.makeConstraints{
            $0.top.leading.trailing.equalTo(view.safeAreaLayoutGuide)
            $0.height.equalTo(58)
        }
        titleLabel.snp.makeConstraints{
            $0.centerX.equalToSuperview()
            $0.centerY.equalToSuperview()
        }
        closeButton.snp.makeConstraints{
            $0.trailing.equalToSuperview().offset(-4)
            $0.centerY.equalToSuperview()
            $0.width.height.equalTo(48)
        }
    }

    @objc func touchUpCloseButton(_ sender: UIButton) {

    }
}

Reference

SnapKit for iOS: Constraints in a Snap

SnapKit for iOS: Constraints in a Snap

Xcode Workspace

Xcode Workspace