作業5-1：⭐️ 使用 Open Peeps 圖庫開發紙娃娃 App

Github

show0007/paperDoll

原本是想用Container View + tableView 來顯示的，

但是拉action 時候卡住了，只好吧所有button 放同個ViewControll 。

最後改成這樣

一個畫面搞定。

流程

首先把整體人物拉好，

各物件更換試試看畫面有沒有問題。

各項目 加入outlet

@IBOutlet var showBody: UIImageView!
@IBOutlet var showHead: UIImageView!
@IBOutlet var showFace: UIImageView!
@IBOutlet var showAccessories: UIImageView!
@IBOutlet var showBg: UIImageView!

加入Segmented Control & Scroll View

因為想用Segmented Control 來切換物件選項，

加入Scroll View 來取代 Table View想要的滑動效果。

切換需要把 Scroll View 加入 Outlet Collection

4個Scroll View都需要加入

可以從Connections inspector 查看是否有加入outlet or action

載入後會顯示最底下的scroll view ，可在viewDidLoad 裡先設定隱藏顯示的scroll view。

設定切換效果

Segmented Control加入action

這樣就有切換畫面的效果了，

雖然只是顯示隱藏而已XD

Scroll View 加入Button

再把Button 加入Action

一樣可以在Connections inspector 查看是否全都有加入了，

還不會用程式碼加入，只好土炮了。

各項目Button分開加入

這樣就可以有button 換裝的效果了，

上面可以看到物件的部分image 是取BackgroundImage，

是因為，我Button顯示圖片是設定Background而已。

Image的部分可以參考 changeBackground 的部分。

因為各Button 相隔的間距太小了，導致要上下滑會不好滑動。

參考資料：

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

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

[Xcode HW] #105 使用 Open Peeps 圖庫開發紙娃娃 App

利用多個 container view 切換頁面