先回顧一下效果圖

看起來還不錯的設計圖

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

設置色塊的圓角

設置好以后我們需要添加一個選中的效果，那我選擇的就是在他們的后面添加一個View

拖入一個新的View，設置它的大小，位置和層級

然后我們為它添加圓角和邊框 (跟第一行的圖標是一樣的設置)

設置圓角和邊框

接下來我們需要給這個用來選中的View添加約束，讓它能夠始終和色塊處在合適的位置

為新添加的View設置約束1

PS：如果你在右邊部分選不中控件，可以在左側樹狀欄那里找到相應的控件，然后雙擊，你就可以通過鍵盤的上下左右移動控件了

為新添加的View設置約束2

添加完約束以后讓我們來看看我們剛剛添加的約束，觀察一下

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

然后我們運行一下APP，看下效果 (Command+R)

運行APP的效果

嗯，很好，它可以跟著色塊排好隊伍。

那我們就繼續下一步吧。

新增三個View，并設置屬性，寬高和位置

為三個View分別添加約束

Content這個View的約束添加

Date這個View的約束添加

Photo這個View的約束添加

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

運行APP的效果

嗯，很好。收工～