#06 以客製化 Table View Cell實作YouTube觀看紀錄項目

日常生活的現在，我們應該經常在用YouTube來觀看很多資訊跟影片，於是就想用TableView的架構，來實作模擬YouTube的『觀看紀錄』項目，應該會有機會來達到類似的效果。

主要的區域分為：

• 觀看紀錄的功能區
• 搜尋觀看紀錄區
• 觀看紀錄影片區

其中觀看紀錄影片區，又有分為多個 Section區域，今日、昨日、前日（星期六），而其中的每一個 Row的內容即代表一個觀看過的影片資訊，包含：

• 影片的縮圖
• 影片的標題
• 影片的出處跟觀看次數

製作完成的 gif 檔案如下：

此App中的任何一個 row(影片)如果被點選的話，便會連結影片的網址，直接播放影片，然後可以按任意地方，去做更進一步的操作，像是暫停或停止的動作。

< 程式製作與說明 >：

1. Storyboard的 layout 圖：

中間的部分是 table view controller的架構，最右邊的 view controller 是放了滿版的 WebView 元件。其中要注意：

table view cell的 identifier要設定正確，以確保在func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath){ }中要抓取 cell資料的時候是能抓到的。

2. 程式設計：

程式中，自訂 table view cell 類別並連結 outlet 到 cell 類別，再以 cell 搭配 as? 轉型取得 cell 物件以指定資料內容。

// in UTViewRecTableViewCell.swift file：
class UTViewRecTableViewCell: UITableViewCell {
@IBOutlet weak var utVRImageView: UIImageView!
    @IBOutlet weak var utVRTitle: UILabel!
    @IBOutlet weak var utVRSubTitle: UILabel!
    @IBOutlet weak var utVRDotMore: UITextView!
    
    var utViewRecord: UTViewRec! = nil
    
    override func awakeFromNib() {
        super.awakeFromNib()
    }
override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
    
    func update() {
        utVRTitle.text = utViewRecord.title
        utVRSubTitle.text = utViewRecord.subTitle
        utVRImageView.image = UIImage(named: utViewRecord.imageName)
    }
}

& 呼叫 update()則可將細項設定放到 cell class中去做：

// in UTViewRecTableViewController.swift file :
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "\(UTViewRecTableViewCell.self)", for: indexPath) as? UTViewRecTableViewCell else {
            return UITableViewCell()
        }
        //update the cell contents
        cell.utViewRecord = utViewRecords[indexPath.section][indexPath.row]
        cell.update()
        return cell
    }

由於是做 multi sections的架構，相關部分程式如下：

// in UTViewRecTableViewController.swift file :
override func numberOfSections(in tableView: UITableView) -> Int {
        return utViewRecords.count
    }
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return utViewRecords[section].count
    }

由上可知，App會依不同的 section 去抓相對應的 row資料。

而在觀看紀錄中，按下任何一個 row之後，便會透過 @IBSegueAction func showDetail()將資料傳給下一頁的程式碼如下：

// in UTViewRecTableViewController.swift file :
@IBSegueAction func showDetail(_ coder: NSCoder) -> UIViewController? {
        guard let section = tableView.indexPathForSelectedRow?.section else { return nil }
        guard let row = tableView.indexPathForSelectedRow?.row else { return nil }
        return UTViewRecDetailViewController(coder: coder, utViewRecords: utViewRecords[section][row])
    }

以及下一頁 view controller的接收資料跟播放影片程式碼：

// in UTViewRecDetailViewController.swift file :
import WebKit
class UTViewRecDetailViewController: UIViewController {
    
    let utViewRecords: UTViewRec
    
    @IBOutlet weak var videoWebView: WKWebView!
    init?(coder: NSCoder, utViewRecords: UTViewRec) {
        self.utViewRecords = utViewRecords
        super.init(coder: coder)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let urlReq = URLRequest(url: URL(string: self.utViewRecords.url)!)
        videoWebView.load(urlReq)
    }
}

由此二程式碼可知，table view中會取出所按下（選擇的）section跟 row，並將對應的 data struct information傳給下一頁（view controller），view controller接到 data之後，便在 viewDidLoad()中，去播放 url連結的影片。

作業的 Github連結如下，有想要的同學可以參考一下：

ParkerChen001/No.51.TableViewBasicFunc

彼得潘安老師的 table view 相關參考如下：

#51 實作 Table View 的基本功能

謝謝觀看。