[Xcode HW] #105 使用 Open Peeps 圖庫開發紙娃娃 App
作業目的：從程式搭配 sketch & zeplin，學習 @IBAction、@IBOutlet
練習對象： Avataaars by Pablo Stanley🧑🧑🏻🧑🏼🧑🏽🧑🏾🧑🏿
作業要求的是Open Peeps 圖庫，但找到Open Peeps的畫家Pablo Stanley在更早期還有做一系列人物大頭照Avataaars圖庫，風格相對活潑可愛，所以就決定改以這系列作為練習對象，來做一個屬於自己的大頭照！
[關於Sketch]
我們可以透過Sketch調整圖檔顏色和大小位置等等，因為利用Sketch處理圖檔，所以下載圖檔時要選擇.sketch，基本的sketch使用教學彼得潘跟網路上都有分享。
特別一提的是，如果點選Sketch右上角或者圖中的Export/Export Current Selection後沒有匯出所需的圖檔，必須針對遺漏的圖檔(或是乾脆全選圖檔)在Layer>Make Exportable設定，再做一次Export就可以成功匯出png了。
接下來先安排人頭圖層順序，順序越後面的圖層會覆蓋前面的圖層，eg.嘴巴圖層要放到膚色之後。
先從最簡單的開始，以改變膚色為例，先將膚色的圖層拉右鍵到Assistant裡面，建立@IBOutlet。
其他部位的圖層也可以在這裡先設定好@IBOutlet。
在大頭照右邊建立一排各種膚色的按鈕，直接將button的image設定成各種膚色的圖檔。這次右鍵改拉到@IBAction，因為各種膚色將套用到前一個步驟所設定的skin圖層中，位置固定，所以所有的button可以直接右鍵拉到同一個@IBAction共用。
撰寫程式碼，讓UIButton在被按下之後，會將UIButton身上的圖層(image)回傳給@IBOutlet skin的image。這樣就可以跑模擬器驗證了！
再來挑戰難一點的：因為希望可以控制改變的大頭照部位有10個，每個部位至少5個樣式，不可能全部擠在畫面中；加上又很貪心的想要全部一目瞭然，所以沒有採用[Xcode HW] #24 Storyboard 電子書 App所運用的Scroll view或Table view controller 。這次改用了Segmented Control+View做呈現。
[View]
- 先做出10個部位的View，參照skin button的做法，把每個部位的樣式用UIButton建立在View裡面。可以先將View拉到Exit比較好調整，完成後再把所有的View重疊並調整座標，重疊是因為隨著Segmented Control的變動，希望一次只會顯示一個View。
- 10個部位的View各自拉出@IBOutlet，因為他們即將隨著Segmented Control的@IBAction連動。
[Segmented Control]
- 畫出Segmented Control，設定Segments、Segment和title
- 拉出@IBAction
- 撰寫程式碼，控制每個Segment的數值在被選取之後，10個View要顯示與否。Segment Index從0開始計算，所以case也要從0開始
- 依此類推寫滿10個View，2個Segmented Control
不知道isHidden=true有沒有更簡便的方式可以一次關閉不需要的，不然程式碼也是落落長…
完成後一樣可以跑模擬器驗證！
題外，原本是用Segmented Control+Container View，然後將Container View各自embed一個額外的view controller，但是這樣就變成button資訊要在兩個storyboard間傳遞，在這邊卡關了好久，結果就跟圖中的大頭照一樣GG。
彼得說這個技巧我太菜還不會，用簡單一點的方式Segmented Control+View就好了！
最期待的部分來了！讓10個View裡面的button產生@IBAction，邏輯與最一開始的skin一樣。由於最開始已經設定所有部位圖層的@IBOutlet，所以這邊直接可以寫程式碼，大功告成！！！
後話，大頭照圖庫其實沒有現在最流行的口罩圖案，因為畫家好像沒有在更新這個圖庫了。
但是，有了Sketch神器，我就自己在網路上免費圖庫抓了看起來很適用的口罩做修改，讓我們在家做App也可以一起防疫！
