搭配 Static Cells 從 storyboard 設計表格頁面
利用 UITableViewController table 獨有的 Static Cells 功能,我們可以不寫一行程式,直接從 storyboard 設計表格頁面的內容。
Static Cells 的應用情境
方便的 Static Cells 不適合實現 FB, IG 等內容數量不固定的動態牆,不過它很適合以下兩種 case
- 數量內容固定的表格,比方 App 的設定頁面。
- 數量欄位固定的輸入表單。
Static Cells 的好處
- 直接從 storyboard 設定表格內容,不用寫程式。
- 可以將 IBOutlet 連到 view controller。
如何從程式設定 Static Cells
- 使用 UITableViewController
只有 UITableViewController 有使用 Static Cells 的特權,所以請從 storyboard 加入 Table View Controller。
- 點選 Table View Controller 的 table
- 將 table view 的 content 欄位設為 Static Cells。
改成 Static Cells 後,table view 的畫面將如下圖所示。
若是 table view 顯示 Prototype Cells,表示 table view 的 content 是 Dynamic Prototypes,尚未改成 Static Cells。
Static Cells 的限制
只能作用於 UITableViewController,因此加到 UIViewController 的 table 不能使用 Static Cells。
從程式存取或控制 Static Cells
雖然 Static Cells 主要從 storyboard 設定內容,不過我們也可以從程式修改,比方調整 cell 顯示的內容或調整 cell 高度讓 cell 隱藏。
從程式控制 Static Cells 的方法如下:
- 新增繼承 UITableViewController 的自訂類別。因為 storyboard 裡加入的是 Table View Controller,因此它的類別必須繼承 UITableViewController,而不是繼承 UIViewController。
class SettingTableViewController: UITableViewController {
新增類別的方法可參考以下連結。
- 切換到 storyboard,將 UITableViewController 的類別設為剛剛新增的自訂類別。
- 狠心刪掉自訂類別裡的以下 function。
忘了刪除以下 function 將造成辛苦設計的 Static Cells 變成國王的新衣,沒人看得到,成為一片空白的表格。
override func numberOfSections(in tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 0
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
return 0
}
新增繼承 UITableViewController 的自訂類別時,類別裡將自動包含以上 function,不過它們將讓表格顯示的 cell 的數量為 0。因此請將以上程式function 移除,因為 Static Cells 的 cell 數量應該由 storyboard 控制,而不是程式。
- 連結需要的 IBOutlet & IBAction。
輸入表單範例
Static Cells 很適合實作複雜的表單頁面,而且由於搭配 UITableViewController,鍵盤出現時表格還會貼心地自動上移,不怕被鍵盤檔到。
有興趣的朋友可參考 Apple 官方的範例。
Develop in Swift Data Collections 的 Lesson 1.9 complex input screens。
App 執行畫面。
storyboard 設計
範例的 table view controller 類別為 AddRegistrationTableViewController,透過 IBOutlet & IBAction 控制頁面。
透過調整 cell 高度還可控制 cell 的顯示和隱藏,可參考範例裡 function tableView(_:heightForRowAt:) 的定義。
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
switch indexPath {
case checkInDatePickerCellIndexPath where isCheckInDatePickerVisible == false:
return 0
case checkOutDatePickerCellIndexPath where isCheckOutDatePickerVisible == false:
return 0
default:
return UITableView.automaticDimension
}
}