카테고리 없음

UIKit_유투브_신동규 - #9 Pro 처럼 UITableViewController 사용하기

이드entity 2022. 7. 18. 19:59
반응형

 

 

UITableView 잘 사용하기!



새로운 TableViewController.swift 생성!

import UIKit

class TableViewController: UITableViewController {

    // MARK: Properties
    let items = ["1", "2", "3", "4", "5"]


    // MARK: Init
    override func viewDidLoad() {
        super.viewDidLoad()
        print("dd")
        configure()
    }


    // MARK: Configure
    func configure() {

    }
}


·

·

·

 

TableView 안에 들어갈 TableCell.swift 파일도 따로 생성!

import UIKit

class TableCell: UITableViewCell {

    // MARK: Init
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        configure()
    }

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


    // MARK: Configures
    func configure() {

    }
}


·

·

·

 

Cell 안에 들어갈 내용들을 전달하기 (TableCell.swift 파일 내부)

var item: String? {
    didSet {
        self.label.text = item
    }
}

lazy var label: UILabel = {
   let label = UILabel()

    return label
}()

item에 어떤 값이 전달된다면, 해당 String 값은 label의 text로 지정됨


·

·

·

 

Cell의 위치 지정

func configure() {

    addSubview(label)
    label.translatesAutoresizingMaskIntoConstraints = false
    label.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
    label.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
}


·

·

·

 

만들어 둔 Cell을 TableView에서 쓰려면 TableViewController에 지정해두어야 함

import UIKit

class TableViewController: UITableViewController {
    private let reuseableIdentifier = "cell"

        ...

    // MARK: Configure
    func configure() {
        tableView.register(TableCell.self, forCellReuseIdentifier: reuseableIdentifier)
    }
}

reuseableIdentifier를 사용하여 cell을 등록할 수 있게 함

이때, 이 reuseableIdentifier은 ‘고유’해야 함

reuseableIdentifier로 등록한 cell을 다시 가져오고 싶을 때마다 reuseableIdentifier를 사용하여 불러올 수 있음


·

·

·

 

Cell을 몇 개 불러올지 지정해두어야 함 → extension으로 일단 빼서 보자

// MARK: TableViewController Delegate and Datasource functions
extension TableViewController {
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: reuseableIdentifier, for: indexPath) as! TableCell
        let item = self.items[indexPath.row]
        cell.item = item
        return cell
    }

        override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 100
    }
}

TableViewController는 Delegate와 Data source를 활용하여 어떻게 데이터들을 화면에 보여줄 것인지 설정 가능함!

XCode에 numberofrowsinsection을 치면 나오는 함수 입력

이 함수는 TableView에 몇개의 Cell을 보여줄지 결정

이 함수에서 items에 있는 데이터를 모두 보여주려면 .count를 return 하기

 

XCode에 cellforrowat을 치면 나오는 함수 입력

어떤 Cell을 반환해줄지 결정하고

이전에 등록한 reuseableIdentifier로 등록한 Cell을 가져와 쓰기 위해 dequeueReusableCell에서 identifier로는 reuseableIdentifier, indexPath로는 for에는 indexPath 전달

선언한 cell 을 만들어 둔 TableCell로 변환시켜주기 위해 as! TableCell 사용

단, 여기에선 force unwrapping 보다는 예외처리 해주는게 낫다!

그 후 TableCell의 item에 이전에 선언해 둔 데이터를 넣어서 return

 

XCode에 heightforrowat을 치면 나오는 함수 입력

Cell의 크기를 결정할 수 있다!


·

·

·

 

만약 Cell의 크기가 일정하지 않다면?

override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    if indexPath.row == 3 {
        return 300
    } else {
        return 100
    }
}

indexPath 사용하여 특정 index 일 때에만 다른 크기로 지정하기

 

·

·

·

 

일단 지금 진행중인 프로젝트에서 UITableView가 더 우선으로 필요하기 때문에...

강의 #6, #7, #8 은 건너뛰고 #9부터 공부!!

반응형