作業|模仿現成的app畫面
一開始實在沒有頭緒到底要模仿什麼畫面,後來選定了常常找尋靈感的”pinterest”。
不過,這真的是一個很多災多難的作業…
先是放錯controller,再來是檔案不見了,最後重新操作了第三次還是有問題!模擬器一直跑不起來,只能求助於潘仔了。
於是我決定要認真記錄一下這個過程。
首先,透過手機先截圖想要模仿的畫面。
接著,就是把需要的元件(圖片)截圖下來(放幾張意思一下,總之就是截圖需要用到的圖片)。
前置作業準備的差不多之後,再來就是要進入到xcode的部分了。
進入Xcode → file → new → project → single view application → Next……(後面步驟就不寫了,相信我們都已經學會如何開一個專案了 是吧?!)
到目前都很順利,專案啟動完成。
因為實際點選圖片會有回饋,所以我使用button*4 再從右邊加入image
其餘的部分則是運用到image, label, Tab Bar, Tab Bar item。
(補充說明:丟Tab Bar會有預設的兩個小圖,若要增加,則是要用到Tab Bar item)
都是重複的動作,就不逐一說明了,最後的呈現為下圖所示。
(補充說明:因為原圖Tab bar中,Pinterest icon是紅色的,但目前的功力還沒有教到如何使用彩色,所以問題來了,都是灰灰的一圈!!
最後找到灰色的icon上傳,就正常了。
到目前 畫面幾乎都完成了。接下來是app icon的製作。
一開始,先上網抓取icon來用,就直接丟到assets.xcassets
悲劇發生了……
準備跑模擬器的時候,出現了它們…
Fine~我遺漏了尺寸的限制,只顧著抓解析度超好的icon,才產生這樣的悲劇。
再跑一次模擬器還是有問題,但不知道為什麼設定跑掉。再向潘仔求救之後,原來是general 裡頭的設定不對。
應該要這樣才對。
最後一切一切都解決了,然後我就完成作業了。