iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
1
Mobile Development

IOS App開發學習日誌系列 第 11

Day11 TableView

  • 分享至 

  • xImage
  •  

許多App當中都會用到列表的功能來顯示清單資訊,在IOS系統當中可以使用TableView元件來完成

首先在Storyboard拉入TableView,並使用雙畫面點擊元件並按住ctrl拉入Viewcontroller取名跟程式碼做連結

https://ithelp.ithome.com.tw/upload/images/20190927/20120980Nde6GbSAgw.png

接下來在Viewcontroller中加上UITableViewDelegate、UITableViewDataSource兩個必須的協定

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

同時我們在viewDidLoad中指定兩個委任的對象
https://ithelp.ithome.com.tw/upload/images/20190927/20120980LyDHraBLqh.png
到這邊為止我們會看到在11行發生了錯誤,我們點開訊息可以看到如下圖
https://ithelp.ithome.com.tw/upload/images/20190927/20120980DMIXKjGV0f.png
這是因為在class加上了UITableViewDelegate、UITableViewDataSource兩個協定
但是並未加上這兩個協定實作所需要的method,接著按下fix就會自動出現兩個所需的method
https://ithelp.ithome.com.tw/upload/images/20190927/201209808RlzcmlB3l.png
為了方便閱讀程式碼,我們將兩個method移到viewDidLoad底下
https://ithelp.ithome.com.tw/upload/images/20190927/20120980rjjTihFcmK.png

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

Cell

cell是在tableview中顯示內容的元件,首先我們先將tableviewCell元件拉入tableview內
並於右側欄位中將tableviewcell元件的Identifier取名,這我們稍等會在cellForRow中用到
https://ithelp.ithome.com.tw/upload/images/20190927/20120980DrThaXNWow.png
最後在兩個實作的method打上以下程式碼就完成cell的部分
https://ithelp.ithome.com.tw/upload/images/20190927/20120980nTWkLrChmg.png


上一篇
D10 NavigationController
下一篇
Day12 UIAlertController
系列文
IOS App開發學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言