使用 Open Peeps 圖庫開發紙娃娃 App

這次課程主要講到的是IBAction、IBOutlet這兩個的使用，利用這兩個加上之前所學的storyboard的技巧做出這個小應用程式，透過下方點選可以將上方的人物進行置換變裝，實際怎麼操作，請參考以下步驟：

下載人物圖騰檔案

當然首先要感謝一下插畫家 Pablo Stanley 免費提供一系列的人物插畫，實際的下載步驟，有點不太一樣，不過透過以下Peter的教學，其實也是很快就可以完成。

#105 使用 Open Peeps 圖庫開發紙娃娃 App

Open Peeps, Hand-Drawn Illustration Library

・進入網站後，點選Get Library

・出現以下畫面可能會以為沒有免費，但其實是贊助的概念

輸入0元後點擊 Purchase again

・畫面中“制訂公平價格”請輸入0，點選 Purchase again，這時畫面消失會要您輸入電子郵件信箱，接著會進入下一個頁面，可以直接下載。

點擊付款

輸入個人電子郵件信箱

點選查看產品

進入下載頁面，可以下載您想要的圖檔

利用Sketch打開來後，可以將圖檔會出PDF檔案

由於Xcode不支援svg，所以可以採用pdf，目前的sketch可以匯出pdf，實際匯出的教學，可以參考以下網站教學。

利用Sketch於設計流程

最後你將拿到這些檔案

每個資料夾都放著不同部位的元件圖案

打開Xcode，建立一個新的Project

建立完成後，我們將剛剛的圖檔放入

將素材放到畫面上

這邊要提醒一下，因為我們等等將會寫程式來搭配更換，所以上方人物的部分建議使用UIImage，而下方因為點選要有所動作，建議是UIButton再透過屬性去處理。

撰寫程式

於storyboard設計視窗的右上角，可以從此打開程式視窗，如下圖。

開啟後的畫面如下：

建立Outlet和Action

Outlet對我們來說就像表示一個物件，也就是上方的頭、臉、衣服、頭髮都是分別的物件，只是透過圖層的概念放在一起，如何將物件建立成Outlet物件，可以滑鼠左鍵點選物件後，按著右鍵拖曳至該視窗，就可以看到建立Outlet的相關設定。

滑鼠右鍵點選物件並拖曳至程式碼上方，會自動認為Outlet，下方則是Action，但前提還是得看物件有無事件才會產生Action。

這邊要給物件一個名稱name

下方UIBtutton也是如此操作，往程式碼拖曳，上方會是Outlet，下面則會識別為Action

當將Button建立IBAction時候，可以注意視窗內有Name、Type、Touch Up Inside等設定，主要就是分別定義Action func的名稱，所以我這邊命名hadBtn，並將type從any改為UIButton，事件部分因為要點選後做事，所以就維持Touch Up Inside。

點選頭部的圖案要將上方UIImage頭部換上我所點選的圖片，程式碼如下：

@IBAction func headBtn(_ sender: UIButton) {

let image = sender.currentImage //取得點選按鈕的圖案

head.image = image //將上方Outlet Head的image指向按鈕的image

}

至於其他的UIButton頭部，也要一個一個做嗎？

不用，func的部分可以更用，所以我才會需要拿sender來做事，因為我不能指判斷一個按鈕，我希望哪顆按鈕點了，sender就會是點的那顆按鈕的物件。

如果拉錯，可以直接刪除嗎或者改名嗎？

冒然改名或者刪除片段，都會使iOS模擬應用程式中發生閃退的狀況，那若真的發生錯誤，要如何進行刪除呢？

(一) 點選物件

(二)屬性視窗的最後一個頁籤“Show the connections inspector“

(三)從上圖可以看到Touch Up Inside會連結至View Controller內的headBtn這個func，所以從這邊的xx來進行刪除取消連結是最好不過的做法了！

成果分享

Github

wayne97023/paperDoll