#27 利用 page control,segmented control,button & gesture 更換內容
Published in
8 min readApr 26, 2021
使用元件:
- 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 = arrayIndexlable.text = dogLable[arrayIndex]segmentedControl.selectedSegmentIndex = arrayIndex}
用 if else 語法寫出三種情況,以 Page Control 為例
@IBAction func pageControlChange(_ sender: Any) {if pageControl.currentPage == 0 {arrayIndex = 0sync()}else if pageControl.currentPage == 1 {arrayIndex = 1sync()}else {arrayIndex = 2sync()}}
Button 按鈕切換上一頁、下一頁
//button些換上一頁@IBAction func beforeButton(_ sender: Any) {if arrayIndex == 0 {arrayIndex = arrayIndex + 2sync()}else if arrayIndex == 1 {arrayIndex = arrayIndex - 1sync()}else {arrayIndex = arrayIndex - 1sync()}}//button些換下一頁@IBAction func nextButton(_ sender: Any) {if arrayIndex == 0 {arrayIndex = arrayIndex + 1sync()}else if arrayIndex == 1 {arrayIndex = arrayIndex + 1sync()}else {arrayIndex = arrayIndex - 2sync()}}
Swipe Gesture Recognizer (左右滑手勢)
點選 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 += 1if arrayIndex == 0 {sync()} else if arrayIndex == 1 {sync()} else if arrayIndex == 2 {sync()} else {arrayIndex = 0sync()}} else if sender.direction == .right {arrayIndex -= 1if arrayIndex == 2 {sync()} else if arrayIndex == 1 {sync()} else if arrayIndex == 0 {sync()} else {arrayIndex = 2sync()}}}
完整程式碼:
import UIKit//定義常數陣列let dogImage = ["喜樂蒂", "黃金獵犬", "哈士奇"]let dogLable = ["牧羊犬", "狩獵犬" , "觀賞犬"]var arrayIndex: Int = 0class 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、segmetedControlfunc sync() {image.image = UIImage(named: dogImage[arrayIndex])pageControl.currentPage = arrayIndexlable.text = dogLable[arrayIndex]segmentedControl.selectedSegmentIndex = arrayIndex}override func viewDidLoad() {super.viewDidLoad()sync()}//pageControlChange切換@IBAction func pageControlChange(_ sender: Any) {if pageControl.currentPage == 0 {arrayIndex = 0sync()}else if pageControl.currentPage == 1 {arrayIndex = 1sync()}else {arrayIndex = 2sync()}}//SegmentedControl切換@IBAction func SegmentedControlChange(_ sender: Any) {if segmentedControl.selectedSegmentIndex == 0 {arrayIndex = 0sync()}else if segmentedControl.selectedSegmentIndex == 1 {arrayIndex = 1sync()}else {arrayIndex = 2sync()}}//button些換上一頁@IBAction func beforeButton(_ sender: Any) {if arrayIndex == 0 {arrayIndex = arrayIndex + 2sync()}else if arrayIndex == 1 {arrayIndex = arrayIndex - 1sync()}else {arrayIndex = arrayIndex - 1sync()}}//button些換下一頁@IBAction func nextButton(_ sender: Any) {if arrayIndex == 0 {arrayIndex = arrayIndex + 1sync()}else if arrayIndex == 1 {arrayIndex = arrayIndex + 1sync()}else {arrayIndex = arrayIndex - 2sync()}}//滑動image切換圖片@IBAction func swipe(_ sender: UISwipeGestureRecognizer) {if sender.direction == .left {arrayIndex += 1if arrayIndex == 0 {sync()} else if arrayIndex == 1 {sync()} else if arrayIndex == 2 {sync()} else {arrayIndex = 0sync()}} else if sender.direction == .right {arrayIndex -= 1if arrayIndex == 2 {sync()} else if arrayIndex == 1 {sync()} else if arrayIndex == 0 {sync()} else {arrayIndex = 2sync()}}}}