[iOS] Xib 파일을 이용한 TableViewCell

TableView에 들어갈 TableViewCell을 만들던 중, Xib 파일을 생성하여 Cell Custom을 해보기로 했다.

(뭐 그냥 Xib파일은 어떻게 설정하는건지 공부할겸? 하나의 셀을 세부적으로 확인할 수 있어서 좋았던 듯 하다.)

"TableView에 TableViewCell을 어떻게 넣고 화면에 보여주는지"는 따로 정리할 예정이다.

이번 포스팅은 그냥 Xib파일의 등록?

 

 

처음에는 그냥 ViewController에서 TableView를 만들고, 아래 캡처 화면을 따라하자.

Cocoa Touch Class 선택

Class, Subclass of, XIB 파일 체크까지!

생성!

 

 

 

아래의 설명과 코드들은 ViewController에 속한다 !

 

1. "packingTV" 라는 이름의 TableView를 만들기 ( + 코드 설정까지 )

    @IBOutlet weak var packingTV: UITableView!

 

2. Xib 파일을 만들었기 때문에 아래와 같은 설정이 꼭 필요

override func viewDidLoad() {
        super.viewDidLoad()
        registerXib()
    }
    
    func registerXib() {
        let cateTVC = UINib(nibName: "CateTVC", bundle: nil)
        packingTV.register(cateTVC, forCellReuseIdentifier: "cateTVC")
        packingTV.delegate = self
        packingTV.dataSource = self
        }
}

- nibName 프로퍼티 : TableViewCell 파일의 이름을 써주면 된다.

- packingTV.register(cateTVC, forCellReuseIdentifier: "cateTVC") : packingTV에 만들어 둔 Xib를 등록!

- forCellReuseIdentifier 프로퍼티 : TableViewCell 파일에 지정했던 식별자 "cateTVC" 적어주기

TableViewCell에서 identifier에 원하는 이름을 적어줬어야 함

🚫 대리자 위임 : delegate, dataSource 꼭 확인해주기!! 이것 때문에 화면에 안뜰 수 있음

 

3. 테이블 뷰 cell의 object 설정 (extension 안에 적을 코드)

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cate = tableView.dequeueReusableCell(withIdentifier: "cateTVC") as? CateTVC else {return UITableViewCell()}
    return cate
}

 

 

 

💡전체 코드

ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var packingTV: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        registerXib()
    }
    
    func registerXib() {
        let cateTVC = UINib(nibName: "CateTVC", bundle: nil)
        packingTV.register(cateTVC, forCellReuseIdentifier: "cateTVC")
        packingTV.delegate = self
        packingTV.dataSource = self
        }
}

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    
    // 테이블 뷰 아이템 개수
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 2
    }
    
    // 테이블 뷰 height 설정
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        if indexPath.section == 0 {
            return 400
        } else if indexPath.section == 1 {
            return 100
        } else {
            return 10
        }
    }
    
    // 테이블 뷰 cell의 오브젝트
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {  
        guard let cate = tableView.dequeueReusableCell(withIdentifier: "cateTVC") as? CateTVC else {return UITableViewCell()}
        return cate
    }
    
}

 

고럼 이제 CateTVC에 만들어둔 (만들어뒀다 가정하고..) TableViewCell이 보일 것이당

 

 

 

➰만약 TableViewCell에 label(이름도 "label") 하나를 지정해뒀고 그것을 ViewController에서 수정하고 싶다면 아래의 코드 처럼 cell의 오브젝트를 불러오는 코드에 cate.label.text = "수정할 내용" 을 추가하고 return cate 해주면 된다!

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cate = tableView.dequeueReusableCell(withIdentifier: "cateTVC") as? CateTVC else {return UITableViewCell()}
        cate.label.text = "수정할 내용" // 이것만 추가됨
        return cate
    }