練習製作一頁Instagram APP的畫面

彼得潘說,對於初學者來說,模仿是最好的練習。

所以,今天就要運用課堂上學習的story board 技巧,來製作一頁類似下圖的Instagram的畫面。

首先,知道這張圖片的大小是1242*2208,是iphone6 plus (3x)的畫面。

所以這個專案我就直接用iphone6 plus的大小來做了。

孫燕姿是小時候的偶像,我上網找了他歷屆專輯的封面,作為內容照片。

題外話:這些專輯我幾乎都有買耶~~

這個畫面真的是很好的練習,因為button、label、image view、navigation bar、tab bar都用到了!

製作過程中比較特別需要筆記的如下:

  1. 左上角的圓型大頭照,要準備一張正方型的圖片,並做以下設定:

(我圖片的邊長是68,layer.cornerRadius是切圓角的參數,切圖片邊長的一半,剛好就會是圓形了!)

layer.cornerRadius

2. 那些bar上的logo必需是去背的。

(我一開始還傻傻的拿白色底的圖來用,想說奇怪怎麼弄都是只有正方形)

3. 超出image view的部份自動切掉,只要勾選Clip To Bounds

4. button的邊框(border)

在畫面上找不到可以設定邊框的地方,所以GOOGLE了一下:

http://stackoverflow.com/questions/28854469/change-uibutton-bordercolor-in-storyboard

好像是要這樣子設定。

顏色的部份,還要再偷偷加上一小段程式碼:

extension CALayer {
var borderColorFromUIColor: UIColor {
get {
return UIColor(cgColor: self.borderColor!)
} set {
self.borderColor = newValue.cgColor
}}}

特別感謝ZoeyTsou同學,熱心的分享tab bar上那些icon的圖片,因為去背我還是不會呢>”<

最後附上GIT HUB連結:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.