哈哈,是不是很想開發出像圖片上面一樣精美的apps啊?我也好想啊,可是我的水平還不夠,只能慢慢來了,不積小流,何以致江海呢?
今天學習的是UITableView,這是apps中最基本的控件了。你手機里面的大部分應用,基本的結構都是由表格構成的。動手永遠是最好的學習方法,我會寫一個大概的操作過程,但是具體的細節我不會過多地去寫,如果有疑問或者我做得有什么不對的地方,請多多指教。
新建一個project,Single View Application,先到Main.storyboard里設計UI界面,在右下角的控件庫里拖一個Table View出來:
設置一樣prototype cell的行數和類型,運行一下:
什么都沒有對吧?嗯,目前來說它就應該是這個樣子的,因為我們什么都沒做啊,就是拖一個控件進去而已。
作為一個控件,它是什么都不知道的,也不知道要干嘛,這些也不是它的職責(MVC設計模式)。我們得告訴它要顯示什么數據和要干什么。在Swift里,我們需要用到協議(protocol)
呃,要解釋一下什么是協議嗎?假設你要創業,你雇了一個設計師來為你的工司設計logo,但是他不能馬上開始設計,他需要知道公司的名稱,還有你喜歡的顏色之類的信息,但是你又很忙,沒空理他,所以你把這些事情都交給你的助手。在iOS里面也是如此。table view需要知道一些基本的信息:
- 在表格里有多少行?
- 數據是什么?
我們通過協議來傳遞這些信息。
代碼這樣寫:
還有一件事,就是要將控件和代碼連接起來,通過Control-drag:
運行一下看看:
哈,有結果了吧,雖然現在還不是很好看,但是起碼它可以顯示數據了。
想把它做得好看點吧?那繼續。
先看看完成后的樣子:
對比之前那個,有了幾個變化:
1,每一行的高度
2,有一個縮略圖,而且是圓形的
3,展示了餐廳更多的信息
4,改變字體的大小
要做到上述幾點,我們需要定制自己的表格。其實絕大多數工作都無需代碼即可完成,基本上就是在Xcode里拖拖控件。
新建一個RestaurantCell.swift,將代碼和控件連接起來:
把RestaurantTableViewController.swift里tableView方法改成:
let cell = tableView.dequeueReusableCellWithIdentifier(identifier) as! RestaurantCell
基本上快完成了,還差將縮略圖變成圓形。
很簡單,就兩行代碼的事情:
cell.thumbnailImageView.layer.cornerRadius = cell.thumbnailImageView.frame.size.width / 2 cell.thumbnailImageView.clipsToBounds = true
最后上個成品圖:
今天的任務就到此結束了。