#017, HW 9–2 利用 page control，segmented control，button & gesture 更換內容

Shelley's iOS App learning notes

Published in

彼得潘的 Swift iOS / Flutter App 開發教室

6 min readSep 4, 2022

運用 IBOutlet and IBAction 連結元件。

先來看看成果吧！瘋狂蛋料理，你喜歡哪一種呢？啊～我都喜歡🤤

運用到的元件有：

ImageView，放置蛋料理圖片
segmentedControl，換頁顯示每種蛋料理
pageControl，小圓點換頁
button，切換上一頁及下一頁
textView，顯示蛋料理的文字內容
gesture，手勢切換功能

IBOutlet

@IBOutlet weak var informTextView: UITextView!
@IBOutlet weak var segmentedControl: UISegmentedControl!
@IBOutlet weak var pageControl: UIPageControl!
@IBOutlet weak var eggImage: UIImageView!

Array
輸入須轉換的文字內容，定義兩個Array儲存內容，儲存在ImageView(命名為eggImage)、Textview(命名為informTextView)。
最後定義一個行為為Int的變數，用於顯示陣列的排序。

let eggs = [ “麻藥蛋”, “玉子燒”, “茶碗蒸”, “三色蛋”, “歐姆蛋” ]
let inform = [“時下韓國最流行的韓式小菜，非韓國麻藥雞蛋莫屬！令人一吃成癮、欲罷不能的美味，因而得名「麻藥雞蛋」～半熟的糖心蛋加上充滿香氣的辣味醬汁，白飯根本瞬間秒殺！”, “玉子燒是日式便當、壽司中常見的配菜，製作時會使用四角形的玉子燒煎鍋，以鹽、日式醬油、味醂、清酒、砂糖調味，一般來說有兩種口味，一種是帶有淡淡鹽味的鹹煎蛋，一種是加入砂糖的甜煎蛋。”, “茶碗蒸源自於日本，加上日本人善於料理海鮮，因此茶碗蒸裡總少不了海鮮配料，但由於茶碗蒸的熟成時間短，海鮮食材務必新鮮而且體積不宜過大，才能讓茶碗蒸吃起來保有鮮甜度與軟嫩的口感。”, “雞蛋、皮蛋、鹹蛋三種蛋一次滿足！喜歡吃蛋的人一定會喜歡這道三色蛋，放進電鍋一蒸出爐，熱熱吃或當作宴客冷盤都適合，不過要色澤層次分明可是有訣竅的喔！黃金比例211!”, “歐姆蛋是煎熟的純蛋黃，中間或可放些餡料捲著。其發源地為法國。做法是先在平底鍋內加進蛋汁煎到凝固，再將煎好的圓形蛋餅對折成半圓形即可。”]
var index = 0

IBAction

上一頁的按鈕切換

//index一開始為0, 若想得上一頁的數字，可使用(index+切換的總頁數-1) 再除以切換的總頁數所得的餘數(％)
@IBAction func pre(_ sender: Any) {
index = ( index + eggs.count — 1 ) % eggs.count//圖片切換，IBoutlet為eggImage
let recipe = eggs [index]
eggImage.image = UIImage(named: recipe)//小圓點切換，IBoutlet為pageControl
pageControl.currentPage = index//segment切換，IBoutlet為segmentedControl
segmentedControl.selectedSegmentIndex = index//文字內容切換，IBoutlet為informTextView，存取的內容為一開始定義的inform array
informTextView.text = inform[index]}

下一頁按鈕切換

@IBAction func next(_ sender: Any) {
index = (index + 1) % eggs.count
eggImage.image = UIImage(named: eggs[index])
pageControl.currentPage = index
segmentedControl.selectedSegmentIndex = index
informTextView.text = inform[index]
}

小圓點切換

@IBAction func changePageControl(_ sender: UIPageControl) {
index = sender.currentPage
eggImage.image = UIImage(named: eggs[index])
informTextView.text = inform[index]
}

segmentedControl切換

@IBAction func changeSegment(_ sender: Any) {
index = segmentedControl.selectedSegmentIndex
eggImage.image = UIImage(named: eggs[index])
pageControl.currentPage = index
informTextView.text = inform[index]
}