[swift] SnapKit으로 커스텀 UI 컴포넌트 만들기

15 Nov 2023

swift

SnapKit은 iOS 앱에서 Auto Layout을 쉽게 다룰 수 있도록 도와주는 오픈 소스 라이브러리입니다.

이번에는 SnapKit을 사용하여 커스텀 UI 컴포넌트를 만들어보겠습니다.

SnapKit 이란?

SnapKit은 Masonry라는 라이브러리를 기반으로 만들어져 있으며, 아주 쉽고 직관적인 문법을 제공하여 Auto Layout 코드를 작성할 수 있게 합니다.

SnapKit은 Swift 언어로 작성되었으며, iOS 9.0 이상에서 동작합니다.

커스텀 UI 컴포넌트 만들기

가장 먼저 SnapKit을 프로젝트에 추가해야 합니다. Podfile에 다음과 같은 라인을 추가합니다.

pod 'SnapKit'

그리고 터미널에서 pod install 명령어를 실행하여 SnapKit을 설치합니다.

이제 커스텀 UI 컴포넌트를 만들어보겠습니다. 예를 들어, 커스텀 버튼을 만들어보겠습니다.

import UIKit
import SnapKit

class CustomButton: UIButton {

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupUI()
    }

    private func setupUI() {
        self.backgroundColor = .blue
        self.setTitleColor(.white, for: .normal)
        self.layer.cornerRadius = 8.0

        self.snp.makeConstraints { make in
            make.height.equalTo(40)
        }
    }
}

위의 예제에서는 CustomButton이라는 커스텀 버튼 클래스를 만들었습니다. setupUI 메서드에서 버튼의 모양과 크기를 설정하고, snp.makeConstraints를 사용하여 버튼의 높이를 40으로 고정했습니다.

이제 해당 커스텀 버튼을 사용하기 위해서는 다음과 같이 코드를 작성할 수 있습니다.

let customButton = CustomButton()
self.view.addSubview(customButton)

customButton.snp.makeConstraints { make in
    make.centerX.equalToSuperview()
    make.top.equalToSuperview().offset(100)
}

위의 코드에서는 CustomButton 인스턴스를 만들고, 이를 뷰에 추가한 후에 snp.makeConstraints를 통해 버튼의 위치를 설정하였습니다.

SnapKit을 사용하여 커스텀 UI 컴포넌트를 만들면 Auto Layout 코드를 간결하게 작성할 수 있어 개발이 훨씬 편리해집니다.

참고 자료

SnapKit GitHub 페이지: https://github.com/SnapKit/SnapKit
SnapKit 문서: http://snapkit.io/docs/