一個Demo展示Storyboard的強大
一個Demo展示Storyboard的強大
今天我通過完成一個長按cell刪除的Demo,向你們展示熟練運用storyboard和Autolayout能給你的開發速度和效率帶來多大的提升.
廢話不多說,新建一個Single View Application.
到storyboard選中我們唯一一個的viewcontroller,找到xcode的菜單欄,Edit->Embed In->NavigationController.這時候storyboard會自動為你生成一個navigationController,并 且講viewcontroller當做rootViewcontroller.
點擊Viewcontroller里的navigationbar.右邊面板找到這些屬性
把title改成City.
已經顯示為City.
拉一個tableview到viewcontroller上,并且約束改為這樣.
右鍵單擊我們的tableview,把delegate和datasource設置成我們的viewcontroller.
現在,既然設置了delegate和datasource,一些必須實現的方法就必須要在viewcontroller里寫了.
這時候我們還少一個cell,選中tableview,找到右邊面板.
這時候我們的tableview里會出現一個空白cell,我們這時候先用系統自定義的basic款式就行了.改identifier為basicCell
然后,我們要實現tableview的代理方法
運行.
總耗時不超過2分鐘.全部手寫代碼要花多久?
為了實現第一張圖的那種cell,我們需要做這么幾件事.
1.在cell里添加一個兩個view,最底層的一個view專門用來顯示陰影,第二個view在上面,有圓角.(為什么要有一個view專門來顯示陰影不懂的自行百度).而且第一個view寬高要比第二個view小一些.
2.第二個view上要有一個imageView和兩個label,這個很簡單拉線搞約束就行了.
直接上圖.
先把我們的cell的類型改為custom.然后把identifier改為"customCell".新建一個類,繼承自 UITableViewCell,起名叫CustomTableViewCell.和我們的storyboard里的cell關聯起來.(這些操作相信大 家都會把.)
先添加陰影view(shadowView).直接把一個view拖到我們的cell上.
再添加一個容器view(containerView),用來放我們的imageview和兩個label.
通過這個約束你可以看到我們的容器view明顯比陰影view大.
然后把我們的圖片和兩個label按如下位置放置.
這里不用care label的約束,需要注意的只有imageView,先給imageView加如下約束.
意思就是上下與容器viewpadding為0,左邊距為0,然后右鍵選中imageview,拉一根線到我們的容器view.出現這個菜單
選中equal Width,然后去右邊找到我們的這個約束,雙擊,內容改為.
這個約束的意思就是imageView的寬度適中保持為父view寬度的十分之三.
現在我們的cell的.h文件是這樣的.
那個block是我用來回調的,你們這里也可以用delegate.
.m文件是這樣的.
除了手勢的那個方法不太好懂以外,其他的很簡單,就是設置陰影的一些屬性,加給cell的contentview設置一個長按手勢.
長安手勢方法里的意思其實就是當用戶長按cell之后做一個截圖,當用戶右移一定程度時,做一個回調.
我們的viewcontroller里的代碼是這樣的.
ok,到這里,我們的所有代碼搞定了.如果,這里讓你全部使用代碼寫.你要花多久呢?呵呵.
demo的地址.https://github.com/pingguo-zangqilong/LongPressToDelete