#11 尋找台北的彩繪人孔蓋。

熟練目標：利用 Page Control、Segmented Control、Button & Gesture更換內容。

（上一頁的英文應該是Previous…腦殘打錯，請鞭小力一點）

台北的人孔蓋”學習”日本精神，把毫無生氣的孔蓋彩繪了一番，這幾年走在台北街頭的低頭族，不只是在滑手機，也增加了許多找尋彩繪人孔蓋的尋寶客。

這次選了四個人孔蓋來練習，水利處有公佈其他人孔蓋的設計組圖，有興趣的人可以參考：台北蓋水計畫

Preview(X)、Previous(O)

步驟如下：
1.xcode新增project，在Assets加入四張人孔蓋圖片。
2.一定要在初始的View Controller才能拉IBOutlet和IBAction。
3.新增背景Image View，拉成滿版。
4.新增Image View，選擇第一張人孔蓋圖片。接著陸續加入Label、Button、Page Control、Segmented Control。
5.打開Assistant，定義pics和labels的Array[,]，訂出起始點index。

6.拉出其他UI元件的outlet。

7.拉出IBAction，從Button開始設定。下一頁跟上一頁的數學公式不太一樣，課堂上講的餘數概念可直接應用。

8.加入Gesture UI，注意滑動的方向，以及連結的Image View有沒有打開User Interaction Enabled。IBAction跟Button一樣，直接拉過去即可，往左滑是下一頁，往右上一頁。
可參考Peter教學：
https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E9%96%8B%E7%99%BC-ios-app-%E7%9A%84-gesture-%E6%89%8B%E5%8B%A2%E5%8A%9F%E8%83%BD-uikit-%E7%89%88%E6%9C%AC-f6cb95075705

9.設定Page control、Segmented control。幾乎都是在後面呼叫屬性。

模擬開起來如下：

import UIKit

class ViewController: UIViewController {
//先宣告轉換時會牽動其他資料的pics和labels
    let pics=["CZ001","East001","WH002","DDD002"]
    let labels=["有鳳來儀","未來。新都。","萬華日夜巡","人生求解，癒見大稻埕"]
//設定起始點index
    var index=0
//拉出UI outlet:image,label,page control,segmented control
    @IBOutlet weak var manholeImageView: UIImageView!
    @IBOutlet weak var manholeLabel: UILabel!
    @IBOutlet weak var manholePage: UIPageControl!
    @IBOutlet weak var manholeSeg: UISegmentedControl!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
//button下一頁、上一頁的func設定
    @IBAction func next(_ sender: Any) {
        index=(index+1)%pics.count
        let display=pics[index]
        print(index,display)
        manholeImageView.image=UIImage(named: display)
        manholeLabel.text=labels[index]
        manholePage.currentPage=index
        manholeSeg.selectedSegmentIndex=index
    }
    
    @IBAction func pre(_ sender: Any) {
        index=(index+pics.count-1)%pics.count
        let display=pics[index]
        print(index,display)
        manholeImageView.image=UIImage(named: display)
        manholeLabel.text=labels[index]
        manholePage.currentPage=index
        manholeSeg.selectedSegmentIndex=index
    }

//page control設定
    
    @IBAction func pageChange(_ sender: UIPageControl) {
        index=sender.currentPage
        let display=pics[index]
        print(index,display)
        manholeImageView.image=UIImage(named: display)
        manholeLabel.text=labels[index]
        manholeSeg.selectedSegmentIndex=index
    }
    
    
//segmented control 設定
    
    @IBAction func segChange(_ sender: UISegmentedControl) {
        index=sender.selectedSegmentIndex
        let display=pics[index]
        print(index,display)
        manholeImageView.image=UIImage(named: display)
        manholeLabel.text=labels[index]
        manholePage.currentPage=index
    }
       
}

這次先試著自己操作擁有多樣UI元件時的設定，但屬性有點難記，若沒對照Swift的文件，幾乎完全背不起來XD 好在有優秀的學長姐作業可參考，以後還是得多加練習才能熟悉。

感謝HP迷的學長姐，受益良多！

#17 利用 Page Control，Segmented Control，Button & Gesture 更換內容