UIKit - UITableView 셀 크기가 자동으로 세팅되도록 구현하기

Intro

UITableView 를 사용하면서 그동안은 항상 RowHeight 값을 설정하여 높이를 지정해주었었는데요. 이번 프로젝트 진행하면서 셀 크기가 상황에 따라 유동적으로 변하는 케이스가 있어 자동으로 세팅하는 방법에 대해 공부를 해봅니다 ㅎㅎ

Setup

실습을 위해 UITableViewCell 을 상속받은 CustomTableViewCell 을 생성하고 ViewController 위에 TableView 를 올려놓았습니다.

Simulator Setup

기본 세팅은 아래 코드를 참고하세요.

ViewController.swift

import UIKit

class ViewController: UIViewController {

    // MARK: - Properties
    private let tableView = UITableView()

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

    // MARK: - UI
    private func configureUI() {
        view.backgroundColor = .blue
        setContraints()
        setAttributes()
    }

    private func setAttributes() {
        tableView.register(CustomTableViewCell.self, forCellReuseIdentifier: CustomTableViewCell.identifier)
        tableView.dataSource = self
        tableView.delegate = self
    }

    private func setContraints() {
        view.addSubview(tableView)
        tableView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.topAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        ])
    }

}

extension ViewController: UITableViewDataSource {

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

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: CustomTableViewCell.identifier, for: indexPath) as? CustomTableViewCell else { fatalError() }
        return cell
    }
}

extension ViewController: UITableViewDelegate {

}

CustomTableViewCell.swift

import UIKit

class CustomTableViewCell: UITableViewCell {

    // MARK: - Properties
    static let identifier = "CustomTableViewCell"

    // MARK: - Lifecycle
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        configureUI()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    // MARK: - UI
    private func configureUI() {
        setContraints()
    }

    private func setContraints() {

    }

}

Cell AutoLayout 구현하기

TableView 는 ScrollView 를 상속받아서 만들어졌기 때문인지 ScrollView 와 비슷한 속성을 지니고 있는데요. Constraints 를 확실하게 잡아주면 스크롤이 가능하도록 스스로 크기를 조절하고, Cell 역시도 topAnchor 와 bottomAnchor 를 잡고 내부 컨텐츠의 heightAnchor 가 잡혀있다면 스스로 크기를 조절하게 됩니다.

그럼 우리가 생성해놓은 CustomTableViewCell 에 색을 입힌 UIView 를 2 개 배치하고, 이 View 들의 크기에 따라 Cell 의 크기가 자동적으로 변할 수 있도록 구현해보겠습니다.

CustomTableViewCell.swift

import UIKit

class CustomTableViewCell: UITableViewCell {

    // MARK: - Properties
    static let identifier = "CustomTableViewCell"

    private let upperView = UIView()
    private let lowerView = UIView()

    // MARK: - Lifecycle
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        configureUI()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    // MARK: - UI
    private func configureUI() {
        setContraints()
        setAttributes()
    }

    private func setAttributes() {
        upperView.backgroundColor = .red
        lowerView.backgroundColor = .blue
    }

    private func setContraints() {
        [upperView, lowerView].forEach {
            self.addSubview($0)
            $0.translatesAutoresizingMaskIntoConstraints = false
        }

        NSLayoutConstraint.activate([
            upperView.topAnchor.constraint(equalTo: self.topAnchor, constant: 20),
            upperView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 20),
            upperView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -20),
            upperView.heightAnchor.constraint(equalToConstant: 100),

            lowerView.topAnchor.constraint(equalTo: upperView.bottomAnchor, constant: 10),
            lowerView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 20),
            lowerView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -20),
            lowerView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -20),
            lowerView.heightAnchor.constraint(equalToConstant: 150),
        ])
    }
}

이렇게 코드를 입력하고 Simulator 를 실행시켜보면 우리가 별도의 설정이나 작업을 하지 않았는데도, 스스로 내부에 위치한 View 들의 높이를 계산하여 Cell 의 높이를 조절한 것을 알 수 있습니다.

Simulator 실행화면

잘 늘어난게 보이네요 ㅎㅎㅎ 생각보다 너무 쉽지 않았나요? 그동안은 RowHeight 를 직접 설정하는 방법으로 TableView 를 구현했었지만 이제부터는 Cell 이 스스로 높이를 조절하는 방향으로 View 를 짜게될 것 같습니다. 이 방법이 훨씬 편하고 유연성이 있는 것 같아요 ㅎㅎ

Wrap Up

이렇게 TableView 를 사용할 때 Cell 의 크기를 자동으로 설정할 수 있게하는 방법을 알아보았는데요.

핵심 내용을 정리해보면

TableView 에는 별도의 설정이 필요없다.
Cell 내부에 위치한 View 의 topAnchor 와 bottomAnchor 를 확실하게 잡아준다.
View 의 heightAnchor 또한 확실하게 잡는다.

이 정도로 요약해볼 수 있을 것 같네요. 무언가 정상적으로 작동하지 않을 때는 위 3 가지를 먼저 확인해보면 좋을 것 같습니다.

Intro#

Setup#

Cell AutoLayout 구현하기#

Wrap Up#

Intro

Setup

Cell AutoLayout 구현하기

Wrap Up