#17 利用 page control，segmented control，button & gesture 更換內容
Published in
6 min readMay 6, 2022
練習目的：使用 array 儲存資料內容，不須使用到 if else。運用 IBOutlet and IBAction 連結元件。
用我目前心中前三名奶茶店做練習，先來看一下作品～
步驟：
- 先拉需要的元件在storyboard上
運用到的元件有：
- Image View：放置品牌logo圖
- Label：文字顯示放品牌名稱
- Page Control：小圓點換頁
- Segmented Control：Segment 換頁(第一名第二名第三名)
- Button：下一個/上一個換頁
- Gesture：手勢功能
2. 叫出Assistant
3. IBOutlet
@IBOutlet weak var logoImageView: UIImageView!@IBOutlet weak var drinkLabel: UILabel!@IBOutlet weak var segment: UISegmentedControl!@IBOutlet weak var pageDot: UIPageControl!
4. Array
在頁面轉換上有圖片、店名需要更換，所以需要定義兩個Array儲存內容。儲存在ImageView(命名為drinks)、Label(命名為shops)的陣列中，並定義一個型別為Int的變數，用於之後顯示陣列的排序
let drinks = ["john","monmonday","shangyulin"]let shops = ["約翰紅茶","漫漫點","上宇林"]var index:Int = 0
5. IBAction
(1) 上下頁的切換
//切換到上一頁@IBAction func pre(_ sender: Any) {//切到上一頁，一開始index為0，若直接0-1為負數會出現錯誤，若想得出上一頁的數字，可用(index＋要切換的頁面數-1)除以切換的頁面數所得的餘數index=(index+drinks.count-1)%drinks.count//做圖片的切換，IBOutlet為logoImageViewlogoImageView.image=UIImage(named: drinks[index])//店名也要一起更換，IBOutlet為drinkLabel，其要存取的內容為一開始先定義的shops ArraydrinkLabel.text=shops[index]//第幾名的segment也需換頁，IBOutlet為segmentsegment.selectedSegmentIndex=index//小圓點也須同步切換，IBOutlet為pageDotpageDot.currentPage = index}//切換到下一頁@IBAction func next(_ sender: Any) {index=(index+1)%drinks.countlet name = drinks[index]logoImageView.image=UIImage(named: name)drinkLabel.text=shops[index]segment.selectedSegmentIndex=indexpageDot.currentPage = index}
#logoImageView讀取圖片的寫法有兩種
分開寫，先定義name存取飲料圖的Array
let name = drinks[index]logoImageView.image=UIImage(named: name)
一起寫
logoImageView.image=UIImage(named: drinks[index])(2)Segmented Control&Page Control換頁
@IBAction func segmentChange(_ sender: Any) {index = segment.selectedSegmentIndexlogoImageView.image=UIImage(named: drinks[index])drinkLabel.text=shops[index]pageDot.currentPage = index}@IBAction func pageChange(_ sender: Any) {index = pageDot.currentPagesegment.selectedSegmentIndex=indexlogoImageView.image=UIImage(named: drinks[index])drinkLabel.text=shops[index]}
6. Gesture手勢功能
Swipe Gesture Recognizer向左滑、向右滑
(1) 將此拖曳到要向左向右滑的畫面上，並設定Swipe Gesture Recognizer的方向（選left&right）
(2) 拉IBAciton至pre跟next的function中
因向左滑就是向下一頁、向右滑回上一頁
心得：
寫完後參考其他人的作業，有發現大家會多設一個function來做同步切換，就不用像我每一個Action都要貼上其他需同步的內容，會更省力跟有效率～
上傳GitHub：
參考文章：
