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

[[130767]]

刪除動(dòng)畫

廢話不多說,新建一個(gè)Single View Application.

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

點(diǎn)擊Viewcontroller里的navigationbar.右邊面板找到這些屬性

找到title

把title改成City.

navigationbar的title

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

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

tableview的約束

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

右鍵單擊tableview

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

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

#p#

這時(shí)候我們還少一個(gè)cell,選中tableview,找到右邊面板。

添加一個(gè)cell原形

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

basicCell

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

運(yùn)行.

運(yùn)行效果

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

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

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

2.第二個(gè)view上要有一個(gè)imageView和兩個(gè)label,這個(gè)很簡(jiǎn)單拉線搞約束就行了.

直接上圖.

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

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

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

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

#p#

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

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

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

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

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

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

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

.m文件是這樣的.

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

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

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

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

demo的地址.