Swift) 코드로 UITableView 구현하기

Swift) 코드로 UITableView 구현하기

코드로 UITableView를 구현해 봅시다.

TableView란??

A view that presents data using rows in a single column.

-> "단일 열의 행을 사용하여 데이터를 표시하는 보기 입니다" 라고 공식문서에서 소개해주네요

구현된 TableView를 보자면 아래처럼 각각의 표처럼 View가 되어 있고 하나의 칸마다 데이터가 들어간 것을 볼 수 있네요. 또한 관련 행을 섹션으로 그룹화하여 콘텐츠를 관리하거나 탐색할 수 있습니다.

구성

UITableView는 테이블의 기본 모양을 관리합니다. 하지만 앱은 실제 컨텐츠를 표시하는 각각의 Cell(UITableViewCell)을 제공합니다.

아래의 셀 구성은 아래 처럼 되어 있지 않을까 생각됩니다.

직접해보기

필요한 것: UITableView, UITableViewCell

ViewController

준비물

• TableView
  • dataSource (필수)
  • delegate (필요에 따라 생성)
  • cell 연결(등록)

일단 뷰 등록과 AutoLayout 등록해보겠습니다.

final class ViewController: UIViewController {

    private let testArray = ["1", "2", "3"]

    private let tableView: UITableView = {
        let tableView = UITableView()
        tableView.translatesAutoresizingMaskIntoConstraints = false

        return tableView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        addViews()
        setLayouts()
    }

}

extension ViewController {

    private func addViews() {
        view.addSubview(tableView)
    }

    private func setLayouts() {

        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: self.view.topAnchor),
            tableView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
        ])
    }
}

이후 dataSource를 연결하고 cell등록하면 됩니다.

해당 함수는 viewDidLoad함수에 넣어주시면 됩니다.
-> 최초 실행한번만 하면 되기 떄문이죠!

private func tableViewSetting() {
    tableView.dataSource = self
    tableView.register(TableViewCell.self, forCellReuseIdentifier: TableViewCell.id)
    }

그리고 TableViewDataSource 메소드 구현해보겠습니다.

extension ViewController: UITableViewDataSource {

    public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return testArray.count
    }

    public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: TableViewCell.id, for: indexPath) as? TableViewCell else {
            return UITableViewCell()
        }
        cell.configure(data: testArray[indexPath.row])

        return cell
    }

}

TableViewCell

준비물

• UITableViewCell
  • Cell 구성할 item 구현

UITableView은 특별히 dataSource나 delegate를 채택하지 않고 Cell을 구성할 View item과 Layout들을 잡아주면 됩니다. 중요한 건 이 앞 서 ViewController에서 Cell 객체를 등록하는 것 입니다.
-> 앞서 tableViewSetting 메소드에서 register 메소드를 썻죠? 거기에 원하는 Cell을 등록하는 것입니다.

final class TableViewCell: UITableViewCell {

    static let id = "TableViewCell"

    var numberLable: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false

        return label
    }()

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        addViews()
        setLayouts()
    }

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

    func configure(data: String) {
        numberLable.text = data
    }

}

extension TableViewCell {

    private func addViews() {
        self.contentView.addSubview(numberLable)
    }

    private func setLayouts() {

        NSLayoutConstraint.activate([
            numberLable.topAnchor.constraint(equalTo: self.contentView.topAnchor),
            numberLable.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor),
            numberLable.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor),
            numberLable.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor)
        ])
    }

}

구현화면

막상 구현해보니 데이터가 없어서 그런지.. 이쁘진 않네요 ㅎㅎ;;

하나하나 생각하면서 처음부터 구현해보고 정리하니 제대로 알게된 경험이였습니다.