iOS Task#24 | Change Content by Page Control, Segmented Control, Button & Gesture

念念不忘剛看完最喜歡的導演 Wes Anderson 的新片 《French Dispatch》，就用這個來做吧！

試著用到以下元件：

• Page Control
• Segmented Control
• Button + IBAction : Previous & Next
• Image View + IBOutlet
• Gesture

Image View + IBOutlet

Step 1. 先找好要顯示的內容，這裡用圖片的方式

《French Dispatch》中，總共有四個故事和最後的 Obituary 訃聞：

• In brief :《The Cycling Reporter》
• 《The Concrete Masterpiece》
• 《Revisions to a Manifesto》
• 《The Private Dining Room of the Police Commissioner》

找好圖片後，一樣丟進Assets中，用 Image View 先顯示出第一張的圖片

Step 2. 做好 Previous & Next Button

Step 3. 右上角 Assistant，打開 ViewController.swift 的輔助視窗

Step 4. ctrl + 右鍵 拉線到 viewDidLoad上放，生成 IBOutlet，連接讓程式能修改圖片內容

IBOutlet 的命名方式：名稱＋型別

Step 5. 用 Array 排序等下要顯示的圖片順序

因為故事全名很長，我用 inBrief 和電影中編排的故事順序做 array

let stories = ["inBrief", "#1", "#2", "#3"]

Button + IBAction : Previous & Next

Step 1. 將剛剛做的 Button，拉線生成 IBAction，要用程式來控制 Button

IBAction 拉在 viewDidLoad 之下，因為不需要在畫面一開始就有動作，而是等使用者操作選取才會發生動作

Step 2. 指定 Next & Previous 做的動作和順序

定義一個 var 表示 current page，記得變數要放在 viewDidLoad 之前

var index = 0

next 和 pre 可以用餘數來正確跳到正確接續的序號

next :
@IBAction func next(_ sender: Any) {
index = (index + 1) % stories.count
let storyName = stories[index]
storiesImageView.image = UIImage(named: storyName)
}
pre :
   
@IBAction func previous(_ sender: Any) {
index = (index + stories.count - 1) % stories.count
let storyName = stories[index]
storiesImageView.image = UIImage(named: storyName)
}

Page Control

從 Library 加入 Page Control，IBAction Type 設定為 UIPageControl

記得同時也要拉 IBOutlet ，偵測同步 current page 來變換圓點的位置

sender.currentPage

Segmented Control

從 Library 加入 Segemented Control，IBAction Type 設定為 UISegmentedControl

記得同時也要拉 IBOutlet ，偵測同步 current page 來變換分頁的位置

sender.selectedSegmentIndex

最後記得把 Next & Previous, Page Control, Segmented Control 之間都關聯起來，才能在任何一種方式切換頁面時，其他切換頁面方式也能跟著連動。

Gesture — Swipe Gesture

Step 1. 從 Library 加入Swipe Gesture，拖曳到要控制的元件上

Step 2. 一個 gesture 是一個方向的 Swipe，若有不同方向，則分開加入手勢元件

這裡只有用到左&右，則加入兩個元件

Step 3. Image View 原本設置為不可操作的元件，所以要勾選 User Interaction Enabled

User Interaction Enable 是 View 元件底下的設定，View 為所有元件之基礎，表示每個元件皆有此功能；而 ImageView 預設為未勾選。

Step 4. 設置 Swipe Left & Right

Swipe Left 通常表示下一張，即跟 Next 的寫法相同。可拉 IBAction 貼上一樣的語法，也可拉在同一個 function 即可。

Swipe Right 通常表示上一張，即跟 Previous 的寫法相同。可拉 IBAction 貼上一樣的語法，也可拉在同一個 function 即可。

可以先將 Document Outline 中的兩個手勢元件修改名稱，更清楚辨識。

參考：

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