[UIKit] UITableView 코드베이스 사용법

✅ TableView(테이블뷰)

: 내부에 셀이 존재하고 세로로만 스크롤이 가능한 뷰

그룹을 지을 수도 있음

 

 

델리게이트 패턴과 함께하는 개념

 

 

✅ 테이블뷰의 구조

 

ViewController(객체)

tableView(객체)

tableViewCell(객체)

 

ViewController와 tableView 간에 서로 데이터를 주고 받는 의사소통 필요한데

이것을 델리게이트 패턴으로 구성한다. 

---

UITableVivewController를 사용할 때는 UITableViewDatSource 프로토콜을 채택해줘야 한다.

이 프로토콜은 tableView와 ViewController가 통신할 수 있게 해주는 역할을 한다. 

컨텐츠에 대한 데이터들을 표시할 건지에 대한 소통. 셀은 몇개 필요한지, 셀은 어떻게 표시해야하는지

 

 

✅ UITableView 설정 순서 

1. UITableView 선언 및 생성

2. delegate와 dataSource 프로토콜 채택 

// UITableView 인스턴스 선언
var tableView: UITableView = {

	// UITableView 인스턴스 초기화 및 설정
	let tableView = UITableView()
    
	tableView.delegate = self   //tableView의 여러가지 속성 세팅을 해당 뷰컨에서 대신 세팅
	tableView.dataSource = self //tableView 안에 집어 넣을 데이터들을 해단 뷰컨에서 세팅 
    tableView.register(CustumTableViewCell.self, forCellReuseIdentifier: CustumTableViewCell.id)
	return tableView
}

 

 

3-1. UITableViewDataSource 프로토콜의 필수 메서드 구현

프로토콜을 채택하기 위해서는 클래스 하단에 extension을 사용하는 것이 가독성이 좋다. 

 

tableView(_:numberOfRowsInSection:)와 tableView(_:cellForRowAt:) 

extension ViewController: UITableViewDataSource {  // 책임을 뷰컨에 위임
    // 테이블뷰 섹션 내 행의 개수 반환
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10  // 예시로 10개의 행을 반환
    }

    // 각 행에 표시할 셀 반환
    // indexPath = 테이블뷰의 행과 섹션을 의미
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: CustumTableViewCell.id) as? TableViewCell else { return }
        cell.configureCell()
        return cell
    }
}

 

identifier는 각 Cell의 클래스명과 동일하게 하는 것이 작업할 때 편하다!!

 

 

 

 

3-2. UITableViewDelegate 프로토콜의 메서드는 선택 사항

셀 선택, 셀 높이 설정, 설 편집, 섹션 헤더 및 푸터의 뷰 컨스터마이징 등 주로 테이블뷰 동작을 사용자 정의한다. 

• 셀 높이 설정 메서드

extension ViewController: UITableViewDelegate {  // 책임을 뷰컨에 위임
    // 테이블뷰 섹션 내 행의 개수 반환// 각 행의 높이를 설정
	func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    	return 44.0 // 원하는 높이
    }
}

• 셀 선택 관련메서드

// 셀이 선택되었을 때 호출
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    // 셀 선택 시 실행할 코드를 여기에 작성
}

// 셀 선택이 해제되었을 때 호출
func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
    // 셀 선택 해제 시 실행할 코드를 여기에 작성
}

• 섹션 헤더 및 푸터 뷰 설정 메서드

// 섹션 헤더 뷰를 반환
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = UIView()
    // 헤더 뷰 커스터마이징
    return headerView
}

// 섹션 푸터 뷰를 반환
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let footerView = UIView()
    // 푸터 뷰 커스터마이징
    return footerView
}

// 섹션 헤더의 높이를 설정
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 20.0
}

// 섹션 푸터의 높이를 설정
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return 20.0
}

• 셀 편집 관련 메서드 

// 셀을 편집할 수 있는지 여부를 반환
func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
    return true
}

// 셀이 편집 모드로 들어갔을 때 호출
func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
    if editingStyle == .delete {
        // 셀 삭제 시 실행할 코드
    }
}

 

 

4. TableViewCell 클래스 정의

• 기본 셀 적용 방법

tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")

 

• 커스텀 셀 적용  방법

import UIKit
//테이블뷰 셀 클래스 정의 
class CustomTableViewCell: UITableViewCell {
	static let id  = "cellID"
    
    let customLabel: UILabel = {
        let label = UILabel()
        label.backgroundColor = .black
        label.textColor = .white
        return label
    }()

	//테이블뷰의 Style과 id로 초기화할 때 사용하는 코드 
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
		configureUI()
    }

	//인터페이스 빌더를 통해 셀을 초기화할 때 사용하는 코드
    //fatalError를 통해 명시적으로 인터페이스 빌더로 초기화하지 않음을 명시 
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func configureUI(){
    //UIViewController는 기본적으로 view를, TableViewCell도 contentView를 기본적으로 갖고 있다. 
    contentView.backgroundColor = .black
    contentView.addSubview(customLabel)
    //상세 오토레이아웃 작성 
    }
    
    //셀을 설정해주는 외부에서 사용하는 메서드
    public func configureCell(){
    }
    
}

 

 

 

 

 

 

 

---

 

import UIKit
import SnapKit


//MakeCell 클래스: 테이블뷰셀 클래스
class MakeCell: UITableViewCell {
    let contentLabel = UILabel()
    
    //셀의 초기화 메서드
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        contentView.addSubview(contentLabel)
        contentLabel.snp.makeConstraints {
            $0.edges.equalToSuperview().inset(10)
        }
    }
    
    /*
     UITableViewCell을 상속받는 클래스에서 사용하는 초기화 메서드는
     클래스의 인스턴스를 생성할 때 호출되는 메서드로, 두 가지 형태가 있다.
     
     1. 코드로 초기화하는 경우 (init(style:reuseIdentifier:))
     2. 스토리보드 또는 XIB 파일로 초기화하는 경우 (init(coder:))
     */
    
    //init(coder:)는 스토리보드나 XIB 파일로 셀을 초기화할 때 사용되기 때문에
    //여기서는 사용하지 않아 fatalError를 발생시켜 사용하지 않음을 명시
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    //셀에 들어갈 내용
    func configure(){
        contentLabel.text = "Sample Text"
    }
}




//ViewController 클래스
class ViewController: UIViewController, UITableViewDataSource {
    
    //테이블뷰 인스턴스 생성
    private let tableView = UITableView()
    
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //테이블뷰의 속성에 dataSource가 있음
        //여기서 self는 ViewController의 인스턴스 -> 이 테이블뷰의 대리자가 뷰컨트롤러가 된다는 의미
        tableView.dataSource = self //UITableViewDataSource를 채택했기 때문에 dataSource에 self를 할당(델리게이트와 비슷) -> 테이블뷰 셀을 몇개의 셀 어떻게 구성할건지에 대해 데이터 전달
        tableView.delegate = self  //UITableViewDelegate 프로토콜을 채택 ->테이블뷰에서 사용자가 스크롤/터치 등의 전달 받은 활동들을 뷰컨트롤러에게 전달
        
        tableView.rowHeight = 70 //셀 하나하나의 높이
        
        //cell을 재사용하기 위해 재사용 식별자를 테이블뷰에 등록
        tableView.register(MakeCell.self, forCellReuseIdentifier: "cellID")
        
        //테이블뷰 오토레이아웃 설정 메서드 호출
        setupTableviewConstraints()
    }
    
    //테이블뷰 오토레이아웃 설정
    func setupTableviewConstraints(){
        view.addSubview(tableView)
        tableView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
    }
    
    
    //UITableViewDataSource 프로토콜 메서드 : 테이블뷰가 뷰컨트롤러한테 몇 개의 행의 개수가 필요한지 물어 보는 역할
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        //return cartArray.count  //아직 값을 받아 오지 않았기 때문에 일단 주석 -> 리턴값은 테이블뷰에 전달
        return 5
    }
    
    // UITableViewDataSource 프로토콜 메서드: register시 넘겨 주었던 cellID를 사용해서 특정 행의 cell을 불러 오기(cellForRowAt) 위한 작업
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // 셀을 재사용하기 위해 큐에서 꺼내서 캐스팅
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "cellID", for: indexPath) as? MakeCell else {   //MakeCell을 타입 캐스팅
            return UITableViewCell()
        }
        
        cell.configure() // 셀을 구성하는 메서드 호출
        cell.selectionStyle = .none // 셀 선택 시 색상 변하지 않게 설정
        
        return cell
    }
    
}

 

 

 

 

https://odinios.tistory.com/2