# 29 吉卜力概念館：頁面輪播設定

用 Xcode 製作經典換頁功能

想必大家對「吉卜力」膾炙人口的電影都不陌生，今天就用 Xcode 帶大家回味一下經典佳作！

頁面效果：

頁面內容

操作畫面：

操作畫面

先來提幾個值得注意的點：

1. 拉線要注意：
常常線拉一拉對象就跑掉了，記得隨時打開 Connections Inspector 來檢查狀況
2. 請按照功能來命名變數： 
有時候按鈕一多容易錯亂，記得要好好命名變數
3. 若是要製作循環清單，設想頭尾狀況：
如果清單跑到最後一組了，下一組會從頭開始跑，記得要用 if 來寫好 Statement

功能講解：

資料存取：先將資料以陣列儲存

let movieList = ["龍貓","天空之城","霍爾的移動城堡","神隱少女"]
let imageList = ["1","2","3","4"]
var number = 0

Outlet 拉線：輸出資料用的，要好好的拉，還要小心線條跑掉～

@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var movieLabel: UILabel!
@IBOutlet weak var pageControlChange: UIPageControl!
@IBOutlet weak var segmented: UISegmentedControl!

Action 連線：動作事件設定

@IBAction func segmented(_ sender: Any) {
number = segmented.selectedSegmentIndex
changeFunction() }

//與左滑事件共用
@IBAction func nextButton(_ sender: Any) {
number += 1
if number > 3{ number = 0 }
changeFunction() }

//與右滑事件共用
@IBAction func lastButton(_ sender: Any) {
number -= 1
if number < 0{ number = movieList.count - 1 }
changeFunction() }

//須注意方向與功能，改動頁面時，資料需傳進 number
@IBAction func pageController(_ sender: Any) {
number = pageControlChange.currentPage
changeFunction() }

Function 設定：主要是頁面設定，頁面會根據 number 來調整，將 number變數代入各項調整值

func changeFunction() {
imageView.image=UIImage(named: imageList[number])
movieLabel.text = movieList[number]
segmented.selectedSegmentIndex = number
pageControlChange.currentPage = number
}

全部程式碼：

Github 內容：

GitHub - yunminghsu/Demo_changePage

透過今天的流程，就可以完整的製作出換頁效果嘍 ～ 我們下次見！