作業#21 紙娃娃App
目的：練習製作出可選定項目變換主體造型的紙娃娃App
做法介紹
下方項目清單切換
先加入一個scrollView接下來加入五個View到畫面之外，製作好五個View要顯示的東西後，將五個View都連接IBOutlet到controller中，最後用上方五個選擇清單Button控制要顯示哪個View，下方畫面可以看到我們因為有把下方的subview移除，所以無論怎麼加入subview都還是只有一個
切換畫面：
實作程式碼：
每按下一個Button後，會先執行移除scrollView最下面的subview，然後再加入我們要的View
//切換列表
@IBAction func showBodyList(_ sender: UIButton) {
let lastView = listScrollView.subviews
lastView[0].removeFromSuperview()
listScrollView.addSubview(bodyView)
}
@IBAction func showHeadList(_ sender: UIButton) {
let lastView = listScrollView.subviews
lastView[0].removeFromSuperview()
listScrollView.addSubview(headView)
}
@IBAction func showMoustacheList(_ sender: UIButton) {
let lastView = listScrollView.subviews
lastView[0].removeFromSuperview()
listScrollView.addSubview(moustacheView)
}
@IBAction func showFaceList(_ sender: UIButton) {
let lastView = listScrollView.subviews
lastView[0].removeFromSuperview()
listScrollView.addSubview(faceView)
}
@IBAction func showAccessoriesList(_ sender: UIButton) {
let lastView = listScrollView.subviews
lastView[0].removeFromSuperview()
listScrollView.addSubview(accessoriesView)
}清單切換造型
首先把每個圖案都建立Button後，右邊的Attributes inspector下面有一欄叫tag的屬性，將tag改為圖片的編號，這Tag可以用在接下來按鈕按下後調用圖片的索引值，最後把同一種類的Buyyon拉到同一個IBAction中，然後用剛剛設定好的每個Button的Tag去取得圖片，讓主體顯示出來
操作畫面：
實作程式碼：
//清單點選
@IBAction func changeBody(_ sender: UIButton) {
sittingPoseImage.image = UIImage(named: "sitting\(sender.tag)")
}
@IBAction func changeHead(_ sender: UIButton) {
headImage.image = UIImage(named: "head\(sender.tag)")
}
@IBAction func changeFace(_ sender: UIButton) {
faceImage.image = UIImage(named: "face\(sender.tag)")
}
@IBAction func changeMoustache(_ sender: UIButton) {
moustacheImage.image = UIImage(named: "Moustache\(sender.tag)")
}
@IBAction func changeAccessories(_ sender: UIButton) {
accessoriesImage.image = UIImage(named: "accessories\(sender.tag)")
}隨機切換造型及背景
按下random按鈕後，背景及造型都會隨機變換，這時候就可以用到亂數來製造出圖片編號顯示出來
操作畫面：
實作程式碼：
//隨機變換造型
@IBAction func randomStyle(_ sender: UIButton) {
accessoriesImage.image = UIImage(named: "accessories\(Int.random(in: 0...8))")
faceImage.image = UIImage(named: "face\(Int.random(in: 0...19))")
headImage.image = UIImage(named: "head\(Int.random(in: 0...19))")
moustacheImage.image = UIImage(named: "Moustache\(Int.random(in: 0...16))")
sittingPoseImage.image = UIImage(named: "sitting\(Int.random(in: 0...10))")
backgroundPageControl.currentPage = Int.random(in: 0...4)
backgroundScrollView.contentOffset.x = CGFloat(backgroundPageControl.currentPage*414)
}背景滑動切換
利用scrollView以及PageControl切換背景畫面，先在畫面外建立一個View把圖片都放進去，正常來說都會比螢幕還寬，然後將View塞進scrollView中，調整scrollView的contentSize與View等寬就可以進行滑動了，接下來加入PageControl，然後要加入scrollView的Delegate，讓他告訴PageControl目前滑到哪一頁來顯示頁數，那移動PageControl來移動scrollView方法剛好是反過來，讓頁數乘以畫面寬就可以讓scrollView移動到目前的頁數
操作畫面：
實作程式碼：
override func viewDidLoad() {
super.viewDidLoad()
backgroundScrollView.delegate = self
}//背景切換顯示
override func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let page = backgroundScrollView.contentOffset.x/414
backgroundPageControl.currentPage = Int(page)
}
@IBAction func changeBackground(_ sender: UIPageControl) {
backgroundScrollView.contentOffset.x = CGFloat(backgroundPageControl.currentPage*414)
}
以上內容參考下方連結：
GitHub連結：
