#27 利用 page control，segmented control，button & gesture 更換內容

使用元件：

• Page Control 換頁
• Segmented Control 換頁
• Button 按鈕切換上下頁
• Swipe Gesture Recognizer 手勢左右滑動換頁
• Image View 狗勾圖片
• Label 顯示文字

操作小記錄：

使用陣列來存放各個元件1~3顯示的內容，狗勾圖片、Label 的文字

定義變數 arrayIndex 儲存要顯示的圖片、文字的陣列順序

let dogImage = ["喜樂蒂", "黃金獵犬", "哈士奇"]
let dogLable = ["牧羊犬", "狩獵犬" , "觀賞犬"]
var arrayIndex: Int = 0

用 function 定義要同步改變的內容：圖片、文字、Page Controll、Segmented Controll

func sync() {
image.image = UIImage(named: dogImage[arrayIndex])
pageControl.currentPage = arrayIndex
lable.text = dogLable[arrayIndex]
segmentedControl.selectedSegmentIndex = arrayIndex
}

用 if else 語法寫出三種情況，以 Page Control 為例

@IBAction func pageControlChange(_ sender: Any) {
if pageControl.currentPage == 0 {
arrayIndex = 0
sync()
}
else if pageControl.currentPage == 1 {
arrayIndex = 1
sync()
}
else {
arrayIndex = 2
sync()
}
}

Button 按鈕切換上一頁、下一頁

//button些換上一頁
@IBAction func beforeButton(_ sender: Any) {
if arrayIndex == 0 {
arrayIndex = arrayIndex + 2
sync()
}
else if arrayIndex == 1 {
arrayIndex = arrayIndex - 1
sync()
}
else {
arrayIndex = arrayIndex - 1
sync()
}
}
//button些換下一頁
@IBAction func nextButton(_ sender: Any) {
if arrayIndex == 0 {
arrayIndex = arrayIndex + 1
sync()
}
else if arrayIndex == 1 {
arrayIndex = arrayIndex + 1
sync()
}
else {
arrayIndex = arrayIndex - 2
sync()
}
}

Swipe Gesture Recognizer (左右滑手勢）

開發 iOS App 的 Gesture 手勢功能 — UIKit 版本

點選 imageView，勾選 User Interaction Enabled（紅線）

新增二個 Swipe Gesture Recognizer，storyboard 畫面上的 image view（紫線）

設定二個 Swipe Gesture 元件的滑動方向為 Left 跟 Right

將兩個 Swipe Gesture Recognizer 連結到同一個 IBAction

@IBAction func swipe(_ sender: UISwipeGestureRecognizer) {
if sender.direction == .left {
arrayIndex += 1
if arrayIndex == 0 {
sync()
} else if arrayIndex == 1 {
sync()
} else if arrayIndex == 2 {
sync()
} else {
arrayIndex = 0
sync()
}
} else if sender.direction == .right {
arrayIndex -= 1
if arrayIndex == 2 {
sync()
} else if arrayIndex == 1 {
sync()
} else if arrayIndex == 0 {
sync()
} else {
arrayIndex = 2
sync()
}
}
}

完整程式碼：

import UIKit
//定義常數陣列
let dogImage = ["喜樂蒂", "黃金獵犬", "哈士奇"]
let dogLable = ["牧羊犬", "狩獵犬" , "觀賞犬"]
var arrayIndex: Int = 0
class ViewController: UIViewController {
@IBOutlet weak var image: UIImageView!
@IBOutlet weak var pageControl: UIPageControl!
@IBOutlet weak var lable: UILabel!
@IBOutlet weak var segmentedControl: UISegmentedControl!
// 同步切換image、pageControl、lable、segmetedControl
func sync() {
image.image = UIImage(named: dogImage[arrayIndex])
pageControl.currentPage = arrayIndex
lable.text = dogLable[arrayIndex]
segmentedControl.selectedSegmentIndex = arrayIndex
}
override func viewDidLoad() {
super.viewDidLoad()
sync()
}
//pageControlChange切換
@IBAction func pageControlChange(_ sender: Any) {
if pageControl.currentPage == 0 {
arrayIndex = 0
sync()
}
else if pageControl.currentPage == 1 {
arrayIndex = 1
sync()
}
else {
arrayIndex = 2
sync()
}
}
//SegmentedControl切換
@IBAction func SegmentedControlChange(_ sender: Any) {
if segmentedControl.selectedSegmentIndex == 0 {
arrayIndex = 0
sync()
}
else if segmentedControl.selectedSegmentIndex == 1 {
arrayIndex = 1
sync()
}
else {
arrayIndex = 2
sync()
}
}
//button些換上一頁
@IBAction func beforeButton(_ sender: Any) {
if arrayIndex == 0 {
arrayIndex = arrayIndex + 2
sync()
}
else if arrayIndex == 1 {
arrayIndex = arrayIndex - 1
sync()
}
else {
arrayIndex = arrayIndex - 1
sync()
}
}
//button些換下一頁
@IBAction func nextButton(_ sender: Any) {
if arrayIndex == 0 {
arrayIndex = arrayIndex + 1
sync()
}
else if arrayIndex == 1 {
arrayIndex = arrayIndex + 1
sync()
}
else {
arrayIndex = arrayIndex - 2
sync()
}
}
//滑動image切換圖片
@IBAction func swipe(_ sender: UISwipeGestureRecognizer) {
if sender.direction == .left {
arrayIndex += 1
if arrayIndex == 0 {
sync()
} else if arrayIndex == 1 {
sync()
} else if arrayIndex == 2 {
sync()
} else {
arrayIndex = 0
sync()
}
} else if sender.direction == .right {
arrayIndex -= 1
if arrayIndex == 2 {
sync()
} else if arrayIndex == 1 {
sync()
} else if arrayIndex == 0 {
sync()
} else {
arrayIndex = 2
sync()
}
}
}
}

參考文章

利用 page control，segmented control，button & gesture 更換兔子餐廳菜單

#38 利用 page control、segmented control、button & gesture 更換內容