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

藉由仿 momo 購物 APP 來實作

實作步驟

1. 首先將需要的元件放置到 storyboard 上

• Image View：放置廣告圖
• Label：顯示廣告名稱
• Page Control：小圓點換頁
• Segmented Control：Segment 換頁 (由程式初始頁籤名稱)
• Button：下一頁 & 上一頁 (由程式控制不可循環跳轉首頁跟末頁)
• Gesture：Left 手勢功能 (下一頁功能相同) & Right 手勢功能 (上一頁功能相同)

2. 初始變數

// 廣告圖片名
let adImages = ["玩美夏日", "保健_狂降攻略", "美食備中元", "夏拚去", "盛夏GO物節", "酷夏盛典", "線上投保"]
// 目前頁
var currIndex: Int = 0
override func viewDidLoad() {
    super.viewDidLoad()
    
    // 初始 pageDot 數目
    pageDot.numberOfPages = adImages.count
    
    // 初始 segment 內容
    for i in 0...(adImages.count - 1) {
        segment.setTitle("S\(i+1)", forSegmentAt: i)
    }
    updateComponents()
}

3. 拉 IBOutlet

@IBOutlet weak var segment: UISegmentedControl!
@IBOutlet weak var adLabel: UILabel!
@IBOutlet weak var adImageView: UIImageView!
@IBOutlet weak var pageDot: UIPageControl!

4. 拉 IBAction

@IBAction func nextPage(_ sender: Any) {
    if currIndex + 1 < adImages.count {
        currIndex = (currIndex + 1) % adImages.count
        updateComponents()
    }
}
@IBAction func prePage(_ sender: Any) {
    if currIndex > 0 {
        currIndex = (currIndex - 1) % adImages.count
        updateComponents()
    }
}
@IBAction func segmentChange(_ sender: Any) {
    currIndex = segment.selectedSegmentIndex
    updateComponents()
}
@IBAction func pageChange(_ sender: Any) {
    currIndex = pageDot.currentPage
    updateComponents()
}

5. 左按鍵拉 IBAction到 nextPage() 上，右按鍵拉 IBAction 到 prePage() 上

6. Swipe Gesture Recognizer 元件，滑左邊拉 IBAction到 nextPage() 上，滑右邊拉 IBAction 到 prePage() 上

7. 勾選 image view 的 User Interaction Enabled 功能，才能辨識到 Swipe 手勢

成果

依序 segment / 左右滑動 / 左右按鍵 / 滑動 page controller

GitHub

GitHub - rjjq/momoDemo_iosAPP

參考

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

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