今天我通過完成一個長按cell刪除的Demo,向你們展示熟練運用storyboard和Autolayout能給你的開發(fā)速度和效率帶來多大的提升。

[[130767]]

刪除動畫

廢話不多說,新建一個Single View Application.

到storyboard選中我們唯一一個的viewcontroller,找到xcode的菜單欄,Edit->Embed In->NavigationController.這時候storyboard會自動為你生成一個navigationController,并且講viewcontroller當(dāng)做rootViewcontroller.

點擊Viewcontroller里的navigationbar.右邊面板找到這些屬性

找到title

把title改成City.

navigationbar的title

已經(jīng)顯示為City.

拉一個tableview到viewcontroller上,并且約束改為這樣.

tableview的約束

右鍵單擊我們的tableview,把delegate和datasource設(shè)置成我們的viewcontroller.

右鍵單擊tableview

設(shè)置代理和數(shù)據(jù)源

現(xiàn)在,既然設(shè)置了delegate和datasource,一些必須實現(xiàn)的方法就必須要在viewcontroller里寫了。

#p#

這時候我們還少一個cell,選中tableview,找到右邊面板。

添加一個cell原形

這時候我們的tableview里會出現(xiàn)一個空白cell,我們這時候先用系統(tǒng)自定義的basic款式就行了.改identifier為basicCell

basicCell

然后,我們要實現(xiàn)tableview的代理方法

運行.

運行效果

總耗時不超過2分鐘.全部手寫代碼要花多久?

為了實現(xiàn)第一張圖的那種cell,我們需要做這么幾件事.

1.在cell里添加一個兩個view,最底層的一個view專門用來顯示陰影,第二個view在上面,有圓角.(為什么要有一個view專門來顯示陰影不懂的自行百度).而且第一個view寬高要比第二個view小一些.

2.第二個view上要有一個imageView和兩個label,這個很簡單拉線搞約束就行了.

直接上圖.

先把我們的cell的類型改為custom.然后把identifier改為"customCell".新建一個類,繼承自UITableViewCell,起名叫CustomTableViewCell.和我們的storyboard里的cell關(guān)聯(lián)起來.(這些操作相信大家都會把.)

先添加陰影view(shadowView).直接把一個view拖到我們的cell上.

再添加一個容器view(containerView),用來放我們的imageview和兩個label.

通過這個約束你可以看到我們的容器view明顯比陰影view大.

#p#

然后把我們的圖片和兩個label按如下位置放置.

這里不用care label的約束,需要注意的只有imageView,先給imageView加如下約束.

意思就是上下與容器viewpadding為0,左邊距為0,然后右鍵選中imageview,拉一根線到我們的容器view.出現(xiàn)這個菜單

選中equal Width,然后去右邊找到我們的這個約束,雙擊,內(nèi)容改為.

這個約束的意思就是imageView的寬度適中保持為父view寬度的十分之三.

現(xiàn)在我們的cell的.h文件是這樣的.
 

那個block是我用來回調(diào)的,你們這里也可以用delegate.

.m文件是這樣的.

除了手勢的那個方法不太好懂以外,其他的很簡單,就是設(shè)置陰影的一些屬性,加給cell的contentview設(shè)置一個長按手勢.

長安手勢方法里的意思其實就是當(dāng)用戶長按cell之后做一個截圖,當(dāng)用戶右移一定程度時,做一個回調(diào).

我們的viewcontroller里的代碼是這樣的.

ok,到這里,我們的所有代碼搞定了。如果這里讓你全部使用代碼寫，你要花多久呢?

demo的地址.