2015年9月9日 星期三

第 3 個程式: UITableViewController


這裡將 UITableView 改寫為 UITableViewController。此程式需要下列步驟:

1. 刪除 UI 元件 (ViewController)與其相關的 Code (ViewController.swift),這些都是新增 project 的 default 設定。將這些檔案 Move to Trash
2. 新增 UI 元件:拖曳 TableVewController 元件至 Storyboard
3. 指定初始的 Controller : 設定 Is Initial ViewController
4. 新增 Code : 新增一個自訂的 Class
5. 連接 UI 與 Code : 將 UI 的 View Controller 的屬性(Attribute) class 被指定此新的 class
6. 設定 UI 的 Attributes : style = Basic, Identifier = Cell
7. 新增 data source : 提供 Table View 要顯示的資料
8. 檢查 Child Class 除繼承 Parent Class 外,是否遵循 data source 與 delegate 協定
9. 覆寫 overwrite 此 data source 協定的 function
10. 試 Run

新增專案:

1. 刪除 UI 元件 (ViewController)與其相關的 Code (ViewController.swift),這些都是新增 project 的 default 設定。將這些檔案 Move to Trash
若新增一個 Storyboard,其 UI 編輯器沒有任何 UI 元件:
2. 新增 UI 元件:拖曳 TableVewController 元件至 Storyboard 為方便 UI 顯示,指定此專案針對 iPhone 開發,可先關掉 Use Size Class 選項。 即點選 View > Utilities > Show File Inspector , 然後不勾選 User Size Class:
接下來,搜尋 TableViewController:
接著拖曳 TableViewController 元件至 Storyboard:
3. 指定初始的 Controller : 設定 Is Initial ViewController
4. 新增 Code : 新增一個自訂的 TableViewController Class 新增 Cocoa Class 檔案:
設定此新增 Class 的屬性:
此時這新 Class 被新增:
5. 連接 UI 與 Code : 將 UI 的 View Controller 的屬性(Attribute) class 被指定此新的 class
6. 設定 UI 的 Attributes : style = Basic, Identifier = Cell
7. 新增 data source : 提供 Table View 要顯示的資料 8. 檢查 Child Class 除繼承 Parent Class 外,是否遵循 data source 與 delegate 協定
9. 覆寫 overwrite 此 data source 協定的 function 複寫 numberOfRowsInSection:
覆寫 cellForRowAtIndexPath:
覆寫 numberOfSectionsInTableView:
10. 試 Run
後記: Table View 可用 UITableView 實作,亦可用 UITableViewController 實作,兩者皆能製作出我們所要的結果。 iPhone App 的開發,除要熟習 Xcode 的操作之外,另外整個開發的 Flow 要清楚。例如:UI 的建立,Code 的建立,而這兩者之間又該如何建立關係等等。學開發先不求快,但要把每行程式都看懂,看得透徹,明白為何有這行 Code,那將來在開發時,就能得心應手,應用自如了。

沒有留言:

張貼留言

prettyPrint();