［相關(guān)信息：Xcode7.2 ; Swift2.0］

先回顧一下效果圖

看起來還不錯(cuò)的設(shè)計(jì)圖

之前我們已經(jīng)把第一行的圖標(biāo)的圓角及其相關(guān)屬性都設(shè)置好了。那第二行的色塊也是同理，只是第二行的色塊我們不加邊框和邊框顏色，來用另外一種方法設(shè)置選中 (為什么要用另外一種？因?yàn)槲?.喜..歡..折騰！！)

設(shè)置色塊的圓角

拖入一個(gè)新的View，設(shè)置它的大小，位置和層級

然后我們?yōu)樗砑訄A角和邊框 (跟第一行的圖標(biāo)是一樣的設(shè)置)

設(shè)置圓角和邊框

為新添加的View設(shè)置約束1

為新添加的View設(shè)置約束2

我們來觀察一下剛剛添加的約束

運(yùn)行APP的效果

嗯，很好，它可以跟著色塊排好隊(duì)伍。

那我們就繼續(xù)下一步吧。

新增三個(gè)View，并設(shè)置屬性，寬高和位置

為三個(gè)View分別添加約束

Content這個(gè)View的約束添加

Date這個(gè)View的約束添加

Photo這個(gè)View的約束添加

大致的框架已經(jīng)搭完了，讓我們最后來運(yùn)行下APP看下效果 (Command+R)

運(yùn)行APP的效果