利用 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 改成想要的顏色嘍！