搭配 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 {

新增類別的方法可參考以下連結。

新增 Cocoa Touch Class 的步驟說明

• 切換到 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。

‎Develop in Swift Data Collections

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
        }
}

Check-In Data 切換 date picker 的顯示/隱藏