apps從0到1 day2

屏幕快照 2015-06-30 下午6.18.24.png

哈哈,是不是很想開發出像圖片上面一樣精美的apps啊?我也好想啊,可是我的水平還不夠,只能慢慢來了,不積小流,何以致江海呢?
今天學習的是UITableView,這是apps中最基本的控件了。你手機里面的大部分應用,基本的結構都是由表格構成的。動手永遠是最好的學習方法,我會寫一個大概的操作過程,但是具體的細節我不會過多地去寫,如果有疑問或者我做得有什么不對的地方,請多多指教。
新建一個project,Single View Application,先到Main.storyboard里設計UI界面,在右下角的控件庫里拖一個Table View出來:

屏幕快照 2015-06-30 下午6.37.07.png

設置一樣prototype cell的行數和類型,運行一下:

屏幕快照 2015-06-30 下午6.42.39.png

什么都沒有對吧?嗯,目前來說它就應該是這個樣子的,因為我們什么都沒做啊,就是拖一個控件進去而已。
作為一個控件,它是什么都不知道的,也不知道要干嘛,這些也不是它的職責(MVC設計模式)。我們得告訴它要顯示什么數據和要干什么。在Swift里,我們需要用到協議(protocol)
呃,要解釋一下什么是協議嗎?假設你要創業,你雇了一個設計師來為你的工司設計logo,但是他不能馬上開始設計,他需要知道公司的名稱,還有你喜歡的顏色之類的信息,但是你又很忙,沒空理他,所以你把這些事情都交給你的助手。在iOS里面也是如此。table view需要知道一些基本的信息:

  • 在表格里有多少行?
  • 數據是什么?
    我們通過協議來傳遞這些信息。
    代碼這樣寫:
屏幕快照 2015-06-30 下午7.57.15.png

還有一件事,就是要將控件和代碼連接起來,通過Control-drag:

屏幕快照 2015-06-30 下午7.58.13.png

運行一下看看:

屏幕快照 2015-06-30 下午7.59.15.png

哈,有結果了吧,雖然現在還不是很好看,但是起碼它可以顯示數據了。
想把它做得好看點吧?那繼續。
先看看完成后的樣子:

屏幕快照 2015-06-30 下午9.30.02.png

對比之前那個,有了幾個變化:
1,每一行的高度
2,有一個縮略圖,而且是圓形的
3,展示了餐廳更多的信息
4,改變字體的大小
要做到上述幾點,我們需要定制自己的表格。其實絕大多數工作都無需代碼即可完成,基本上就是在Xcode里拖拖控件。
新建一個RestaurantCell.swift,將代碼和控件連接起來:

屏幕快照 2015-06-30 下午10.01.35.png

把RestaurantTableViewController.swift里tableView方法改成:
let cell = tableView.dequeueReusableCellWithIdentifier(identifier) as! RestaurantCell

屏幕快照 2015-06-30 下午10.18.00.png

基本上快完成了,還差將縮略圖變成圓形。
很簡單,就兩行代碼的事情:
cell.thumbnailImageView.layer.cornerRadius = cell.thumbnailImageView.frame.size.width / 2 cell.thumbnailImageView.clipsToBounds = true
最后上個成品圖:

屏幕快照 2015-06-30 下午10.30.26.png

今天的任務就到此結束了。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容