[TIL] 09.02

1. SnapKit

이번 프로젝트에서 코드로 UI를 짜게되면서, 가장 복잡하다고 느꼈던 부분이 AutoLayout를 주는 부분이었다. 스토리보드에서는 간단하게 주었는데, 코드에서는 계속 길어지는 것이다. 그러다가 SnapKit이라는 라이브러리를 알게되어 좀 더 간결하게 표현할 수 있었다.

1-1. SnapKit에 대하여

SnapKit은 Swift 언어를 위한 Auto Layout 라이브러리 중 하나로, iOS 및 macOS 애플리케이션 개발에 사용된다. SnapKit을 사용하면 코드를 통해 간편하게 Auto Layout 제약 조건을 정의할 수 있어서 인터페이스 구성을 더 쉽게 할 수 있다. 이 라이브러리는 코드 기반의 UI 개발을 더 직관적이고 유지보수가 쉬운 방식으로 제공한다.

SnapKit의 주요 특징과 동작 방식이다.

1. 선언적 문법: SnapKit은 제약 조건을 선언적인 방식으로 정의할 수 있도록 도와준다. Swift의 연산자 오버로딩을 활용하여 가독성이 좋은 코드를 작성할 수 있다.
2. 체인 형식: SnapKit은 체인 형식 (fluent interface)을 채택하고 있어, 여러 제약 조건을 연결하여 한 줄로 표현할 수 있다. 이로 인해 코드의 가독성이 향상되며 복잡한 레이아웃도 보다 간편하게 정의할 수 있다.
3. UIKit과 호환: SnapKit은 UIKit과 macOS의 AppKit과 완벽하게 호환된다. 따라서 iOS 및 macOS 애플리케이션의 UI 레이아웃을 구성하는 데 사용할 수 있다.
4. 오토 레이아웃 앵커: SnapKit은 snp 속성을 통해 레이아웃 제약 조건을 정의한다. snp를 통해 makeConstraints 또는 updateConstraints 등을 사용하여 제약 조건을 설정할 수 있다.
5. 가독성과 유지보수성: SnapKit을 사용하면 제약 조건을 간결하게 표현할 수 있으므로 코드의 가독성이 향상되고, UI 변경 시 유지보수가 쉬워진다.
6. Swift에 최적화: SnapKit은 Swift 언어와 잘 통합되어 있으며, Swift의 문법과 기능을 활용하여 레이아웃을 정의할 수 있다.

1-2. SnapKit 추가하기

보통의 라이브러리들은 General에서 추가할 수 있다.

라이브러리의 GitHub 주소로 추가하는 것이 일반적이다.

연결시키고 싶은 라이브러리의 URL을 입력하자.

SnapKit 라이브러리의 GitHub이다.

복사한 주소를 입력하면, 해당 라이브러리가 뜬다.

Add Package를 클릭하면 추가가 된다.

이제 자신이 사용하고 싶은 파일에 import 시켜주면 된다.

import SnapKit

1-3. ViewController에서 사용하기

NSLayoutConstraint을 사용한 경우에 TableView의 AutoLayout을 설정한 형태다.

private func autoLayout() {
        
    // NSLayoutConstraint을 사용한 경우
    NSLayoutConstraint.activate([
        mainTableView.topAnchor.constraint(equalTo: self.view.topAnchor),
        mainTableView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
        mainTableView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
        mainTableView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
        mainTableView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
        mainTableView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
    ])
}

이제 SnapKit을 이용한 경우다.

private func autoLayout() {
        
    // Snapkit을 사용한 경우
    mainTableView.snp.makeConstraints { make in
        make.top.equalToSuperview()
        make.leading.equalTo(view.snp.leading)
        make.trailing.equalTo(view.snp.trailing)
        make.bottom.equalTo(view.snp.bottom)
        make.centerX.equalTo(view.snp.centerX)
        make.centerY.equalTo(view.snp.centerY)
    }
}

• mainTableView의 상단을 Superview의 상단에 맞추면 mainTableView가 화면의 맨 위에 위치하게 된다. 이렇게 하면 테이블 뷰가 화면의 최상단에서 시작하고 다른 뷰나 요소 위에 겹치지 않는다.

1-4. Cell에서 사용하기

NSLayoutConstraint을 사용한 경우에 TableViewCell의 AutoLayout을 설정한 형태다.

private func autoLayout() {
        
    // NSLayoutConstraint을 이용한 경우
    let margin: CGFloat = 8
    NSLayoutConstraint.activate([
        checkButton.centerYAnchor.constraint(equalTo: self.centerYAnchor),
        checkButton.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 16),
        checkButton.widthAnchor.constraint(equalToConstant: 20),
        checkButton.heightAnchor.constraint(equalToConstant: 20),
            
        memoLabel.centerYAnchor.constraint(equalTo: self.centerYAnchor),
        memoLabel.leadingAnchor.constraint(equalTo: checkButton.trailingAnchor, constant: margin),
        memoLabel.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -16)
    ])
}

이제 SnapKit을 이용한 경우다.

private func autoLayout() {
        
    // Snapkit을 이용한 경우
    checkButton.snp.makeConstraints { make in
        make.centerY.equalToSuperview()
        make.leading.equalToSuperview().offset(16)
        make.width.height.equalTo(20)
    }
        
    memoLabel.snp.makeConstraints { make in
        make.centerY.equalToSuperview()
        make.leading.equalTo(checkButton.snp.trailing).offset(8)
        make.trailing.equalToSuperview().offset(-16)
    }
}