2014年1月26日 星期日

[Xcode] 在一般的UI View Controller上建立Static Cells

Table View是一個經常使用的UI元件,大多書籍的教學都是在使用Dynamic Prototype,較少是Static Cells,所以感覺上後者似乎是簡單到不需要教學了 XD,但沒想到......我卻花了好久的時間在解決問題......(怒)為什麼一直不顯示呀?!Storyboard上看到的是幻覺嗎?

在茫茫網海裡面搜尋,整體而言有兩種解答:
1. 請改用TableViewController。
   (可我不想要用呀!我還有其他介面元素妻小要照顧......(跪))
2. 可以在UIViewController裡面放Container然後外連到一個TableViewController就可以了。
    (這個方法似乎符合我的需求......馬上來一試)

因為不太熟悉Container的用法,所以花了點時間,終於看到表格正常的顯示在手機上啦!趕緊分享出來,希望可以幫到很多網路上迷途的小羊兒們。

步驟一、 任何一個程式範本都可以,我們會使用Storyboard (這個分享使用「Single View Application」)。

步驟二、 在Storyboard的元件庫裡找到Container View。
步驟三、 拖曳Container View到你欲放置Static Cells的View上,如下圖。
步驟四、 刪除原本的Container所連接的View Controller,拖曳一Table View Controller至附近。在Container上按著右鍵至此Table View Controller上,放開,選擇embed(嵌入),見下圖,即完成連結,會發現被連結的視圖尺寸改變成Container
步驟五、 在屬性面板中將Table View的內容改成Static Cells,接著就可以自行設定需要的表格內容,作完這些就可以試著跑跑看模擬器了。雖然可以看到畫面了,但是我們目前還無法控制跟截取這個View Controller的資訊,我們必須連結我們自訂的Class。

步驟六、 新增Objective-C Class,是UITableViewController的Subclass,並且將Table View Controller的Class指向此檔案。如果這個時候試著執行模擬器,就會發現有警告訊息出現,而且Container裡面會沒有顯示任何東西(怎麼有種越用越糟的感覺 XD)。
步驟七、 莫心慌,要解決這個問題很簡單,從谷歌大神以及警告訊息中可得知,由於所製作的表格非動態顯示,所以我們不能實作以下三個方法,必須在我們剛剛建立的class中之.m實作檔裡,將它們註解掉或是刪掉,即可正常運行:
// 需刪除或註解掉的三個方法
- (NSInteger)numberOfSectionsInTableView:
- (NSInteger)tableView: numberOfRowsInSection:
- (UITableViewCell *)tableView: cellForRowAtIndexPath:
測試的運行結果如下:

沒有留言:

張貼留言