Angie Wang
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連結:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade