利用 view 製作 Super Mario 圖案 | 練習實作 #2
使用 view 元件總數量:798 個
製作時間:約 4 小時(不含錄製 gif 檔及發文)
工欲善其事,必先利其器
如果一開始就迫不及待直接在 Xcode Storyboard 作圖,會需要大量的時間來完成,因此準備要利用 view 元件來製作圖案前,應該先花點時間冷靜思考從何處著手。若要能夠精確、快速地完成圖案,還需要再利用其它的工具來輔助完成此次的任務,Google Sheets、Photoshop 就是本次的好幫手。
Step 01. 構圖
為了配合直式的螢幕畫面,並且考量圖案複雜程度會影響筆電的效能,所以選擇了卡通圖案為目標。在挑選合適的主題後,初步排列組合以避免圖案太大超出螢幕範圍。
Step 02. 測量範圍
先在 Xcode Storyboard 利用 view 元件製作一整列格子區塊,確認方格尺寸大小能完整呈現在 Safe Area,我所製作的 view 格子尺寸為 20x20。
接著利用 Google Sheets 來製作方格子非常快速又便利,而且好處是可以利用表單的拖曳功能來自動產出每一個 view 所在的位置 (X、Y) 為何。完成後匯出成 pdf 格式。
Step 03. 確認圖形範圍
在 Photoshop 中開啟該 pdf 檔,並且將圖片與方格子合併在一起,在此步驟可以精確掌握成品的大小及範圍是否無誤,或是需要調整的地方。
Step04. 開始在 Storyboard 作畫
別急,在 storyboard 上將整列的 view 區塊全部複製後貼上,每一列的 Y 值都遞增 20,這道工序是最麻煩的,因為一次貼入大量的 view 元件,所以會導致電腦嚴重遲緩 ==
準備好所有區塊後,就可以依合成的圖片找出相對應的位置,把 view background color 改成想要的顏色嘍!