作業|模仿現成的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 裡頭的設定不對。

應該要這樣才對。

最後一切一切都解決了,然後我就完成作業了。

https://github.com/hsukimmy/imitate.git

--

--

Kimmy Hsu
彼得潘的 Swift iOS / Flutter App 開發教室

Industrial Designer|UX learner|UI learner|PM Learner|Code learner