2021 iThome 鐵人賽

DAY 6

自我挑戰組

一個令我自豪的App完成之路系列第 6 篇

讓UITableView來表演 Day6

13th鐵人賽

wei

2021-09-10 20:38:59

780 瀏覽

前幾天都跑去快樂學潛水，每天回家還要生出內容，不免的前幾篇有些偷懶，當然之後會把前面的一些內容多給補齊，結果讓我偷懶了但是我的潛水證照還是沒考過嗚嗚

明天還要打疫苗，感覺會邊發燒又邊手痛的瘋狂學習。

啊啊啊快樂缺氧

回到正題

UITableView

說到UITableView就是一個很好用的工具

用來作為很多App的呈現

今天要實作的書本圖片跟資訊是根據之前自己畫的App架構圖去實作

這次要用的一樣會用到Xib來實作設計

這是典型UITableView呈現

這是我希望呈現的

進入操作步驟：

1. 創建一個UITableViewController 跟一個 UITableViewCell

創建TableViewController的同時，就會一併將UITableViewDelegate & UITableViewDataSource一起建立

那麼什麼是UITableViewDelegate & UITableViewDataSource?

UITableViewDelegate

要委託UITableViewController來執行的事情

UITableViewDataSource

UITableView的要呈現的資料有什麼

記得在創立UITableViewCell後要記得也創立一個Xib檔，用來讓Cell做載入

我把我的TableViewCell命名為TableUIView

2. 設計一個喜歡Xib

我的Xib裡面有幾樣要件

UILabel x4
UIImageView x1
UIView x2

下面整體的框框也是一個UIView包裹Label

願借閱時長下面的框框是由一個UIView裡面套著一個Label

並且記得在相同名字的.swift檔案裡面加上連結

3. 註冊使用Nib使其有IdentifierName

像之前說的使用UINib，回傳一個Nib object

讓tableView去使用nib去註冊，並給予其IdentifierName

IdentifierName很重要下面會解釋

4. UITableViewController內的各種函數

先做資料賦予

有了這些資料我們就知道要顯示哪些東西

// 回傳有多少Section會在這個TableView內
override func numberOfSections(in tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 1
    }
// 回傳會有多少Row在Section裡面
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return imagedata.count
    }

// TableView的核心，每個TableView呈現的Cell資料
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        

				let cell:TableUIView = tableView.dequeueReusableCell(withIdentifier: "TTTableUIView", for: indexPath) as! TableUIView
        
        cell.image_1.image = UIImage(named: imagedata[indexPath.row])
        cell.bookname.text = booknamedata[indexPath.row]
        cell.author.text = authordata[indexPath.row]
        cell.owner.text = owners[indexPath.row]
        cell.count_day.text = lastdaydata[indexPath.row]
        cell.backgroundColor = .init(red: 201, green: 148, blue: 115, alpha: 0)

        // Configure the cell...

        return cell
    }

4. 特別說明cellForRowAt:函數

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // Configure the cell...
        return cell
    }

想當初看到這個東西就一臉矇，完全搞不清楚在幹嘛

現在稍微清楚了一點到底是在幹嘛

主要就像上面說的"TableView的核心，每個TableView呈現的Cell資料"

還可以透過不同的函數對他做一些動作上的變化

問題來了，有那麼多cell我難道會一個一個做嗎，並不會！

會使用像是我上面用的dequeueReusableCell(withIdentifier: "TTTableUIView", for: indexPath)

他的原本的Function長這樣

func dequeueReusableCell(withIdentifier identifier: String, 
                     for indexPath: IndexPath) -> UITableViewCell

這是幹嘛用的？

ReuseCell(重複使用Cell)

該如何使用?

根據我上面打的，我使用了Register這個方法，讓我的cell能夠擁有一個IdentifierName

名叫TTTableUIView

所以我要使用我的Cell當作我要重複的Cell

而for indexPath:代表的是說有沒有特別指定的位置

回傳一個UITableViewCell

// 宣告一個cell 
let cell:TableUIView = tableView.dequeueReusableCell(withIdentifier: "TTTableUIView", for: indexPath) as! TableUIView

那麼為什麼後面又要as! TableUIView?

因為我原本回傳的是一個UITableViewcell，但是我有自訂的TableViewCell要使用

我使用as! 作為轉型，使其變成我自訂的TableUIView

因為我的TableUIView是繼承UITableViewCell的子類，所以可以向下轉型

// 自訂我的cell內容是哪些
cell.image_1.image = UIImage(named: imagedata[indexPath.row])
cell.bookname.text = booknamedata[indexPath.row]
cell.author.text = authordata[indexPath.row]
cell.owner.text = owners[indexPath.row]
cell.count_day.text = lastdaydata[indexPath.row]
cell.backgroundColor = .init(red: 201, green: 148, blue: 115, alpha: 0)

結論：

使用DequeueReusable可以讓你重複使用這些View

回傳重複的Cell時，記得轉型成自己訂的Cell

結果：