Jul 24, 2017 · 3 min read
找了一下手機裡適合拿來作為練習的app, 發現這個愛料理app有用到NavigationBar, Table View, Tab Bar, Container View, 圓角圖片製作等元件,相當適合拿來做練習!於是從NavigationBar開始, 加了兩個bar button item, 並把bar tint屬性改為原本愛料理app的顏色, 只要選擇第四個圖片的選項, 就可以取該圖片的顏色來做使用

在做「編輯推薦」、「VIP」及「看更多>」時, 則是在User Defined Runtime Attributes屬性中加入
Key Path=layer.cornerRadius, Type=number, Value=10即可做出有圓角的label

因為還沒學到如何做圖片輪播的功能, 又想讓圖片看起來有輪播的樣子, 於是用label做了三個圓形來取代

發現靜態的tab cell只能用在Table View Controller, 所以這個部分我使用了靜態的tab cell暫時來做呈現, 將Accessory屬性改為Disclosure Indicator就會出現前往下一頁的箭頭>

這個部分則是使用Container View來做呈現, 將這些東西群組化, 排版較為容易, 另外最下面的icon我是從下面這個網站下載來使用, 再調整Tab bar的Image Tint屬性為灰色, 來完成這頁精美畫面
http://www.iconbeast.com/free/
模擬器畫面:

GitHub連結: