更換內容 ( 頁面 / 圖片…)

page control, segmented control, button, gesture

成品 (除了 Button 似乎看不出是按何元件才更換圖與文字😅)

基本配置

▲構思主題後用 Storyboard 配置並將圖放於 Assets
▲將更動內容不輸入文字與圖片，除 Button 及 Segmented control 外

在 ViewController.swift 選 Assistant Editor寫程式

定義陣列 (Array) : 會改變之圖與文字

let movieImages = [“conan.jpg”, “gojira.jpg”, “love.jpg”]
let nameLabels = [“名偵探柯南：緋色的彈丸”, “哥吉拉大戰金剛”, “當男人戀愛時”]
let pageLabels = [“1/3”, “2/3”, “3/3”]

陣列索引(順序)

var arrayIndex: Int = 0

定義同步改變之圖與文字 (簡化之後程式)

func sync() {
image.image = UIImage(named: movieImages[arrayIndex])
pageDot.currentPage = arrayIndex
nameOfMovie.text = nameLabels[arrayIndex]
numberOfPage.text = pageLabels[arrayIndex]
segment.selectedSegmentIndex = arrayIndex
}

使模擬器顯示文字變化 (須將剛定義好的 func 放入 viewDidLoad 中)

override func viewDidLoad() {
super.viewDidLoad()
sync()
}

連結各元件 IBOutlet(變數,讀取修改存取storyboard元件)和 IBAction(執行)

▲點選元件按右鍵拉至 Assistant 設定名稱
▲Button 無需拉 IBOutlet 因無變數
▲swipeShowNext (Prev) Pic 為 gesture 元件
➞先拉 ImageView 至 Swipe Gesture Regornizer
➞再由 Swipe Gesture Regornizer 拉至 Assitant 建立 Action

@IBOutlet weak var image: UIImageView!
@IBOutlet weak var pageDot: UIPageControl!
@IBOutlet weak var nameOfMovie: UILabel!
@IBOutlet weak var numberOfPage: UILabel!
@IBOutlet weak var segment: UISegmentedControl!
@IBAction func pageControlChange(_ sender: Any) {
}
@IBAction func leftButtonChange(_ sender: Any) {
}
@IBAction func rightButtonChange(_ sender: Any) {
}
@IBAction func segmentedControlChange(_ sender: Any) {
}
@IBAction func swipeShowNextPic(_ sender: Any) {
}
@IBAction func swipeShowPrevPic(_ sender: Any) {
}

設置切換條件

▲此處 == 為等於
▲舉左按鈕為例
▲如現於圖 0 位置(首圖), 按左應換為圖 2 (尾圖), 因此 0 要 +2, 以此類推
▲page control, segmented control 不更動, 因此如 0 則 0, 如 1 則 1

@IBAction func leftButtonChange(_ sender: Any) {
   if arrayIndex == 0 {
      arrayIndex = arrayIndex + 2
      sync()
   }
   else if arrayIndex == 1 {
      arrayIndex = arrayIndex — 1
      sync()
   }
   else {
      arrayIndex = arrayIndex — 1
      sync()
   }
}

完整程式碼

GitHub

monica1123/change-pic