iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
0

APP中一定不可或缺的元件就是列表,幾乎所有APP都會用到,像是顯示資料,在iOS中這個元件就叫做Tableview。

使用方法

要使用Tableview,首先先在Storyboard中將Tableview元件拉至畫面中,先簡單設個約束對齊全螢幕。
https://ithelp.ithome.com.tw/upload/images/20181024/20107549tLMRQ5vRdd.png
接著再拉一個TableviewCell元件到Tableview中並在右邊工具列的地方設定Cell的identifier。
https://ithelp.ithome.com.tw/upload/images/20181025/20107549ZuFzmyB4qk.png

接著切出兩個畫面,按住control鍵再用滑鼠將元件拖曳至程式碼中做關聯,之後就能在程式碼中呼叫此元件了!
https://ithelp.ithome.com.tw/upload/images/20181024/20107549164FYxv5B1.png

接下來在Viewcontroller中加上UITableViewDelegateUITableViewDataSource必須要遵照這兩個協定。

  • UITableViewDataSource是用來管理TableView中Cell的數量,有多少sction、多少列,及他們所要顯示的內容。
  • UITableViewDelegate則是用來處理TableView的外觀及一些觸發事件。

接著必須指派DataSource及Delegate的委任對象,因此在該ViewController中的viewDidLoad方法中加入

self.tableview.dataSource = self
self.tableview.delegate = self

但到這邊會發生一個Error,如下圖
https://ithelp.ithome.com.tw/upload/images/20181025/20107549OmviMLJyTu.png
這是因為我們有為Viewcontroller中加上UITableViewDelegateUITableViewDataSource這兩個協定了,但尚未實作他們所制定的Method,這時候只要按下fix後便會自動出現以下這兩個必要實作的Method。
https://ithelp.ithome.com.tw/upload/images/20181025/20107549DeAwSMsKji.png

  • numberOfRowsInSection這個method必須要return一個Int,告訴TableView我需要幾個Cell
  • cellForRow這個Cell用來設定Cell的樣式,待會要說的客製化Cell就是必須實作在這個Method

客製化Cell

https://ithelp.ithome.com.tw/upload/images/20181026/201075494Atx6gKnk6.png
1.先在Storyboard中將TableviewCell元件拉至Tableview,接著在TableViewCell中放入自己想要的元件。
2.接著創建一個新的TableViewCell檔案,並將其與Storyboard中的元件做連結。
3.接著將TableViewCell中的元件拉進TableViewCell程式碼中。
https://ithelp.ithome.com.tw/upload/images/20181026/20107549LXDNhocbcz.png
4.最後在cellForRow這個method中加入以下程式碼就完成了!

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell:TableViewCell = tableView.dequeueReusableCell(withIdentifier: "TableviewCell", for: indexPath) as! TableViewCell
        cell.label.text = "\(indexPath.row)"
        return cell
    }

今天就先介紹到這邊,明天再繼續介紹另一種客製化Cell的方式,利用xib。


上一篇
DAY10 NavigationController
下一篇
DAY12 利用xib客製化TableViewCell
系列文
iOS APP開發學習筆記 30

尚未有邦友留言

立即登入留言