Swift / X-code_TableViewTransformPage

林暐潔
5 min readDec 4, 2016

--

接近期末最後的幾堂課了,開始著手期末作業,而我做的期末作業就是綜合Peter上課所教,用所學的來完成。那因為分了很多部分,所以避免一篇文章內文太多,我就分各個作業來介紹程式內容所使用到的部分。

這個題目也是我期末作業的根本,因此我做了一個日記的App 達到題目的要求也完成了自己的一個小小里程碑。

那這邊也要特別的介紹我同組的好朋友,女神Zoey,因為這次的期末作業,如果沒有他幫我做UI的設計,可能真的更沒人想看吧!! (衷心感謝~^_^

前言介紹完以後,開始進入主題了,先來看看畫面:

那因為功能面跟前一篇文章的操作大多雷同,所以我就介紹不一樣的地方,TableView動態產生cell 的部分,以及傳值到後續頁面的部分。

首先,一樣是先建立預設資料的類別,以便之後日記輸入資料使用:

內容有圖片、日期、標題、日記內文。

TableView動態產生cell:

★這邊特別要說明一下,上課練習時使用的是ViewController拉TableView元件,所以我們需要自行連結TableViewDataSource以及TableViewDelegate。

那因為我們已經上戰場要做App了,所以我們就直接從Cocoa Touch Class直接建立UITableViewController的文件。

會發現X-Code自動建立有很多function已經幫你override了,還有很多註解掉的function。這樣就很方便,因為這些都是最常用到的function,省掉我們自己去找方法的時間。

『客製化Cell』:

這邊另外再插入一個主題,就是『客製化Cell』的部分。

下面的圖片,是 X-code預設可以使用的Cell四種樣式。

那因為cell大多時候不一定會用到預設的cell介面所以我們常常客製化。

一樣在Cocoa Touch Class 建立TableViewCell的文件。然後就可以將Cell內的元件拉Outlet到程式碼裡做連結。方便使用。

既然建立好了以後就來簡單介紹一下這個部分的程式碼吧。

如圖上所講的, 這幾個function都是最基本的設定。

cell的部分:宣告cell 重複利用轉型成Cocoa Touch建立的cell。

dic則宣告來承接noteData這個Array 裡面每一筆資料(indexPath.row )

再將我們客製化的元件內容顯示出來。

基本上,從前一個作業三頁面切換編輯,加上這篇講到的首頁編輯改成TableView顯示,應該就能完成作業了。希望能幫助到同學,以及我自己又再次的複習了一次。最後附上程式的操作畫面。內容有些拍照跟存檔功能會在後面的文章在提到,敬請期待。

至於程式碼的部分,會晚一些日子才傳上github喔~^_^

--

--