從模仿開始,來製作一頁Instagram的畫面吧!

雖然我們家IT說「整間辦公室沒有人在用Storyboad拉畫面的,之後的程式碼也只能專屬這支App,所以用Storyboad開發不實用」不過……也才剛進入第二堂課,光要弄懂Xcode裡的各種Controller、View階層、物件屬性,我就頭昏眼花了,覺得還是先把這些基本要素搞清楚,跟著課程規劃,之後再慢慢學寫code吧~

題目:模仿Instagram的Layout做出一個一模一樣的來吧!

準備工作:畫面上會用到的圖片和icon都先放到Assets.xcassets

Step 1 圓形的個人頭像

▲左圖:自己真正的Instagram畫面,右圖:開發模擬器畫面

一時之間也不知道要模仿誰的Instagram,乾脆截自己的畫面比較快。首先製作山頭的Navigation Bar,因為這都是公版的套件,在右下角的Object Library搜尋一下就能快速找到,拉到畫面中,把標題改成個人的帳號名字。

▲忘了是從哪支App開始,個人頭像就流行圓形的設計。新增一個image view匯入照片後,在identity新增Key Path,輸入[layer.cornerRadius],應該就是建立圓形遮罩,並設定Value值為正方形寬度除以2,接著再切換到Attributes把Clip To Bounds打勾。就可在模擬器看到圓形頭像囉~ 詳細操作請參考講義p.139

Step 2 iCon按鈕

▲整個畫面中,最多的就是icon按鈕。但又因為我們現在只有自己一個人,沒有美術設計能幫忙,除了講義提供的圖庫,我也有在網路上找到免費的icon,而且都是去背好的png檔。只要輸入關鍵字幾乎都能找到~icons8.com提供參考。

關鍵字例如: iOS、menu、home、search、camera、like、map、contact…

▲圖片icon找齊,同時用修圖軟體調整到適當尺寸大小後,放入Assets.xcassets。在右下角Object Library搜尋Bar Button Item,將Title文字改為圖片,依序擺放到適當位置就差不多完成囉。

不過後來我自己發現Storyboard不像一般繪圖軟體能隨意拖拉擺放,tool bar的icon會全部擠在一塊兒,無法平均分開,因此我在每個Bar Button Item的Size調整了它的Width寬度,一個個去試,讓每個icon有固定間距,如此一來tool bar才會好看。不確定是否為正確做法,僅提供參考。

Step 3 切除超出的區塊

▲最後依序將照片擺好,儘管發現底下3張照片會蓋住置底的tool bar,仍天真的想說 我每張照片都有在Attributes勾選「Clip To Bounds」切除超出區塊,到時跑模擬器就會不見吧?!

果然代誌不是憨人想的那麼簡單,跑模擬器時,照片依然會壓到置底的tool bar。只好call out傳Line問彼得,感謝他超快回覆!!! 從以上的Xcode截圖,馬上知道是不同元件的階層問題,只要把置底的tool bar拉到最下面,就能讓tool bar在畫面上層,不會被照片壓住了,而照片也會乖乖切出超出區塊,呈現正常一半的樣子。順利完成這回合! (雙手合十)

題外話:其實置底tool bar應該直接使用tab bar和tab bar item製作,不過我新增tab bar iten時,出現畫面亂掉的狀況,雖然彼得有即時提供解法,不過還是無解,之後上課找到解法再更新此文。

>> Xcode檔上傳至Github,可點此連結參考

全文同步發表於: http://tsaorick.com/archives/6509

Show your support

Clapping shows how much you appreciated 好奇小悶’s story.