📚 [iOS] UITableView

📌 UITableView ?

여러 아이템을 테이블 형태로 보여주기 위한 뷰

iOS 개발을 하다보면 자주 사용하게 되는 인터페이스인 UITableView ! 리스트 형태로 이루어져 있으면 스크롤이 가능하고 데이터를 동적으로 받아서 표현할 수 있습니다. UIScrollView의 상속을 받은 객체이며, Delegate Pattern을 사용해 구현하는 인터페이스 🕶

✅ UITableView 구성요소 !

하나의 table view -> 여러개의 tableview section -> 여러개의 tableview cell -> tableview cell 마다 하나씩의 content view -> contents

1. 각각의 section에는 header와 footer 가 붙을 수 있다.
2. TableView에도 Header와 Footer가 붙을 수 있으며, 스크롤 영역에 포함됨.

---

자주쓰는 멜론이나 앱스토어에도 요로코롬 테이블 뷰가 적용된 것을 볼 수 있는데용! 😉 자세히 보시면 테이블 뷰의 셀들이 데이터만 바뀌고 모두 동일한 layout 으로 반복되고 있다는 사실을 알 수 있습니다 ! 그런데.. 😅 이걸 하나하나 다 짤 수 없자나요 ! 이럴때 tableview와 tableview cell 이 매우 유용하답니다 ✨

📌 UITableViewCell ?

• 테이블 행의 내용을 관리하기 위해 사용되는 클래스
• 테이블 관련 동작을 지원하기 위해 몇 가지 특정 사용자 지정을 제공합니다 !

🔮 TableView Cell을 구현하는 3가지 방법

1. 스토리보드 내에서 TableviewCell 활용해서 구성 - prototype cell
2. Xib 파일로 따로 분리해서 Cell UI 구성
3. Code base로 Cell 구성

이 중에서 저는 협업에서 많이 사용하는 방법인 2번 방법으로 실습을 해봤습니당 !

---

👩🏻‍💻 Xib를 활용해서 Tableview cell 만들기

먼저 새로운 파일을 추가하기 위해 Cocoa Touch Class 파일 선택 후 UITableVIewCell로 설정, Also create XIB file을 체크 !

그 다음엔 아이콘 추가, autolayout, identifier 설정하기 😉

📌 RankingTableViewCell

class RankingTableViewCell: UITableViewCell {
    static let identifier = "RankingTableViewCell"

    @IBOutlet weak var appIconImageView: UIImageView!
    @IBOutlet weak var rankLabel: UILabel!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var subTitleLabel: UILabel!
    @IBOutlet weak var openButton: UIButton!
    
    override func awakeFromNib() {
        super.awakeFromNib()
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
    
    func setData(rank: Int, appData: AppContentData) {
        rankLabel.text = "\(rank)"
        appIconImageView.image = appData.makeImage()
        titleLabel.text = appData.appName
        subTitleLabel.text = appData.description
    }
    
}

1️⃣ TableViewCell 안에 낯선 함수 등장...? awakeFromNib()
이 친구는 객체가 초기화된후 호출되는 메서드 ! viewDidLoad() 와 비슷한 개념으로 생각하면 된답니당 .. xib로 구성하는 경우에는 init을 따로 해주지 않더라도 자동으로 awakeFromNib()으로 호출이 됩니다 💥

2️⃣ func setData : cell 별로 다른 데이터가 들어와야하므로, AppContentData를 함수 파라미터로 받고 이 매개변수를 통해 outlet 변수들에 데이터를 넣어줌 !

( tableview cell에 실제 구조체 데이터를 넣는 과정은 생략 .. )

---

✅ TableView를 구현하기 위해 채택해야 하는 2개의 Protocol

UITableViewDelegate 와 UITableViewDataSource !!

여기서 ! 알고 넘어가야할 테이블 뷰의 동작원리 ^^...

• 테이블 뷰는 재사용큐를 활용해서 메모리를 효율적으로 사용할 수 있도록 해주는 클래스
• 우선 화면에 보이는 데이터 먼저 생성하고, 스크롤을 하면 보이지 않는 영역은 Reuse Queue의 풀에 들어가고 새롭게 보이는 cell에 해당 풀에서 꺼내와서 새롭게 보여줌
• 이렇게 재사용되기 때문에 각 cell의 identifier가 굉장히 중요 !

📑 뷰/셀의 재사용에 관한 티스토리 포스팅

이제 2가지 프로토콜에 대해 알아보자면 ..

1️⃣ UITableViewDelegate : 테이블 뷰의 동작과 모양을 관리
-> cell의 높이와 cell선택 시 무엇을 할지 ?

2️⃣ UITableViewDataSource : 데이터를 받아서 뷰를 그려주는 역할
-> 총 섹션과 그 섹션 안에 들어가는 cell의 개수, 각 row에 어떤 cell을 보여줄건지 ?

extension RankingVC: UITableViewDelegate {
// heightForRowAt해서 indexPath별의 높이만 지정하는 함수
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 80
    }
    
}

extension RankingVC: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return appContentList.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: RankingTableViewCell.identifier) as? RankingTableViewCell else {return UITableViewCell()}
        
        cell.setData(rank: indexPath.row + 1, appData: appContentList[indexPath.row])
        return cell
    }
}

tableview에게 해당 identifier를 가진 cell이 재사용 큐에 있는지 물어보고 있으면, UITableViewCell 객체가 넘어오고 아니면 nil ! 그리고 넘어온 객체를 as?를 통해 원하는 하위클래스로 타입변환. 이렇게 되면, cell은 RankingTableViewCell 객체이기 때문에 이전에 정의한 데이터를 전달받는 함수 사용 가능 !!

✅ 이번 실습하면서 추가적으로 배운 것

1️⃣ 바로바로 데이터 전달을 위해서 구조체로 새로운 데이터형을 만드는 것임니다 ! AppContentDataModel.swift 라는 새로운 스위프트 파일을 만들어서 앱 이름, 설명, 아이콘 이미지 이름을 넣는 AppContentData 모델을 추가해줍니다 !

import UIKit

struct AppContentData{
    let appName: String
    let description: String
    let appIconName: String
    
    func makeImage() -> UIImage? {
        return UIImage(named: appIconName)
    }
}

2️⃣ Cell을 구분하기 위한 idenntifier을 static을 활용해 타입 프로퍼티로 선언 !! 이건 오타로 인한 오류를 줄이는데 좋다고 합뉘다 💡

class RankCollectionViewCell: UICollectionViewCell {
    static let identifier = "RankCollectionViewCell"
    ...
    }

3️⃣ xib 파일로 Cell UI 구성시, 테이블 뷰마다 cell로서 사용할 nib 객체를 등록해 주어야함.

func registerXib(){
        let xibName = UINib(nibName: RankingTableViewCell.identifier, bundle: nil)
        rankTableView.register(xibName, forCellReuseIdentifier: RankingTableViewCell.identifier)
    }

쉽..지 않았던 테이블 뷰.. ㄴㅕ석.. ^^ .. 다음에 더 알아보도록하고 .. 여기서 이만.. 💥