[swift] SnapKit으로 테이블뷰 셀 커스터마이징하기

14 Nov 2023

swift

이번에는 SnapKit을 사용하여 Swift로 UITableView 셀을 커스터마이징하는 방법에 대해 알아보겠습니다.

SnapKit이란?

SnapKit은 인터페이스 구축을 위한 Swift DSL(Domain Specific Language)입니다. Auto Layout을 사용하여 UI를 구성하는 데 도움이 되는 많은 기능을 제공합니다.

SnapKit을 사용하기 위해 먼저 프로젝트에 SnapKit 라이브러리를 추가해야 합니다. CocoaPods를 사용한다면 Podfile에 다음과 같이 추가합니다.

pod 'SnapKit'

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

UITableView 셀 커스터마이징

먼저, UITableViewController를 상속받는 클래스를 만듭니다. 이 클래스는 테이블뷰를 생성하고 데이터를 관리하는 역할을 합니다.

import UIKit
import SnapKit

class CustomTableViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 테이블뷰 셀 등록
        tableView.register(CustomTableViewCell.self, forCellReuseIdentifier: "CustomCell")
        tableView.rowHeight = 100
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomTableViewCell
        
        cell.titleLabel.text = "Title"
        cell.descriptionLabel.text = "Description"
        
        return cell
    }
}

위의 예제 코드에서는 CustomTableViewCell라는 커스텀 셀을 만들어서 사용합니다. SnapKit을 사용하여 셀 내부의 UI 요소들을 정렬하는 방법을 알아보겠습니다.

import UIKit
import SnapKit

class CustomTableViewCell: UITableViewCell {
    
    let titleLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.boldSystemFont(ofSize: 16)
        return label
    }()
    
    let descriptionLabel: UILabel = {
        let label = UILabel()
        label.textColor = .gray
        label.numberOfLines = 0
        return label
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        // 타이틀 레이블 제약조건 설정
        contentView.addSubview(titleLabel)
        titleLabel.snp.makeConstraints { make in
            make.top.equalToSuperview().offset(10)
            make.leading.equalToSuperview().offset(10)
            make.trailing.equalToSuperview().offset(-10)
        }
        
        // 설명 레이블 제약조건 설정
        contentView.addSubview(descriptionLabel)
        descriptionLabel.snp.makeConstraints { make in
            make.top.equalTo(titleLabel.snp.bottom).offset(10)
            make.leading.equalToSuperview().offset(10)
            make.trailing.equalToSuperview().offset(-10)
            make.bottom.equalToSuperview().offset(-10)
        }
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

위의 예제 코드에서는 CustomTableViewCell 클래스를 정의하고 titleLabel 및 descriptionLabel을 추가합니다. 그런 다음, titleLable은 상위 뷰의 상단에, descriptionLabel은 titleLabel 아래에 배치되도록 제약조건을 설정합니다.

이제 CustomTableViewController 클래스에서 CustomTableViewCell을 등록하고 데이터를 표시하는 방법을 확인할 수 있습니다.

SnapKit을 사용하여 UITableView 셀을 커스터마이징하는 방법에 대해 알아보았습니다. 이제 프로젝트에서 필요한 커스텀 셀을 만들어 사용할 수 있을 것입니다.

더 많은 SnapKit 사용 예제와 더 자세한 정보는 SnapKit GitHub 저장소에서 확인할 수 있습니다.