#05做一款OpenPeeps的小人物變裝App
最近持續摸索StoryBoard連接IBOutlet及IBAction來製作App的功能
這次練習使用了 OpenPeeps 的免費素材 做一款簡易的自訂人物App
首先 練習繼承一個 UIViewController 自定義一個 class
建立一個新的專案後 cmd.+ n 選擇 Cocoa Touch Class
替自己的 class 命名為 FaccViewController
Subclass of 記得選 UIViewController 因為我要用他的元件
完成後 把新的 controller 設定成 Is initial View Controller
這樣就成功建立一個自己命名 class 的 controller
專案建立完成後 先用StoryBoard 拉元件 再寫程式
包含ImageView ScrollView Button
還有 Assets 中的各部位 png 圖示
要建立在同一個View的 png 用相同名稱 不同數字命名
因為待會要透過isHiden的布林屬性 隱藏與顯示
開始進入程式階段
App畫面中上方的人物 要作為變裝用的顯示區塊
先拉出四個ImageView的 IBOutlet 作為一個能替換的UIView
名稱以hairImageView的規則命名 依此類推
接著替四個有 Button 的 View 拉出IBOutlet
名稱以glassesView的規則命名 依此類推
接著我把 scrollView 中的 button 分別拉出四個IBAction
func 透過 isHiden 的布林值屬性 true false 來顯示與隱藏四個重疊的 Button View
比方我要想要點選眼鏡 會出現眼鏡的View
那我就讓 glassesView 的 isHiden 值為 false 進行顯示
其餘View的布林值 屬性為 true 進行隱藏
另外也在ViewDidLoad裡面透過 isHiden屬性
顯示剛開啟App時 想要顯示的 Button View
最後設定點擊 Button 能替換主人物表情服裝的 func
先透過一個 Button 拉出 IBAction type選為UIButton
並且把四個Button連動到同一個IBAction func
另外關於怎麼在Butotn中顯示圖示 這之前彼得潘大大有教
要把Background設為custom後 就會出現Image的欄位
在選擇已經加入Assets中的圖片即可
ContentMode選擇AspectFit就可以符合邊框 且顯示整張圖片
由於要讓四個部位的sender能順利讀到我選的圖片
這邊讓主人物的Image 呼叫「檔名 +tag」來順利讀取所選
Tag則是設定從1~6來辨識
最後
順利執行
這個作業成品簡單 卻卡了好幾天
重寫好幾次、重想邏輯、除錯
但最後看到自己寫的程式可以動 成就感多到滿出來!
