2019年9月9日 星期一

[iOS] UITableView - 基礎1

UITableView,是一種表格化顯示的View,可以從各式各樣的App當中看見它的身影,是十分常見的一種View。

這邊來介紹最基本的使用方式,首先先開啟一個新的專案,並且於StoryBoard中,加入UITableView,並且設置簡單的Constraint,將UITableView佔滿UIViewController。


接著,我們建置IBoutlet,將UITableView與我們的UIViewController class做關聯,以下我們命名為tableView。


下一步,如果要使用UITableView,我們必須實作UITableViewDataSource這個Protocol。

因此我們加入extension,讓我們的ViewController去實作UITableViewDataSource,此時你會發現Xcode自動發出警告,若是要實作這個Protocol,必須實作一些方法


按下Fix後,XCode會自動幫你產生所需要的程式碼。

必須要實作兩個方法。

tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int

你必須告訴tableView,你要顯示幾個Row

tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell

你必須告訴tableView,每個Row所顯示的Cell

接著我們先切回StoryBoard,並且搜尋UITableViewCell,將UITableViewCell拖曳到UITableView裡面。


接著我們選擇這個Cell,然後於右邊的屬性配置區,輸入這個Cell的Identifier,我們將它命名成『MyCell』。


下一步我們可以回到程式碼,將不足的部分補齊,首先我們告訴TableView,我們需要10個Row。

接著我們將下一個程式碼也補齊,我們透過剛才於Storyboard設置的Identifier來取得Cell,並且設置顯示的文字。

最後於viewDidLoad,將tableView的dataSource設置為我們的ViewController,以下是完整的程式碼。

以及執行結果。

以上就是TableView,最基本的用法,要使用就必須實作UITableViewDataSource這個Protocol。

接下來可以看基礎2學習如何使用UITableViewDelegate來捕捉使用者點選了哪個Cell哦。

基礎2

沒有留言:

張貼留言