#17 利用 page control，segmented control，button & gesture 更換內容

展示寶可夢朱紫隊伍

元件介面

定義陣列

//寶可夢圖片及名稱
let pokemonArray = ["#1008 密勒頓", "#1002 古劍豹", "#992 鐵臂膀", "#991 鐵包袱", "#923 巴布土撥", "#58 風速狗"]
let segmentTitleArray = ["密勒頓", "古劍豹", "鐵臂膀", "鐵包袱", "巴布土撥", "風速狗"]
let pokemonImageArray = ["密勒頓", "古劍豹", "鐵臂膀", "鐵包袱", "巴布土撥", "風速狗"]
let pokemonShinyImageArray = ["密勒頓閃光", "古劍豹閃光", "鐵臂膀閃光", "鐵包袱閃光", "巴布土撥閃光", "風速狗閃光"]

//寶可夢六項個體值
let hpValue = [100, 80, 154, 56, 70, 90]
let attackValue = [85, 120, 140, 80, 115, 110]
let defenseValue = [100, 80, 108, 114, 70, 80]
let spAttackValue = [135, 90, 50, 124, 70, 100]
let spDefenseValue = [115, 65, 68, 60, 60, 80]
let speedValue = [135, 135, 50, 136, 105, 95]

命名Outlet

outlet 的名字一般會用名詞，且以元件的型別結尾。

設定預設顯示畫面

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        pokemonImageView.image = UIImage(named: pokemonImageArray[0])
        pokeLabel.text = pokemonArray[0]
        pageBot.currentPage = 0
        pokemonSegment.selectedSegmentIndex = 0
        
        //設定segment名稱
        for index in 0...5 {
            pokemonSegment.setTitle(segmentTitleArray[index], forSegmentAt: index)
        }
        
        //設定六項個體數值
        hpLabel.text = hpValue[0].formatted()
        attackLabel.text = attackValue[0].formatted()
        defenseLabel.text = defenseValue[0].formatted()
        spAttackLabel.text = spAttackValue[0].formatted()
        spDefenseLabel.text = spDefenseValue[0].formatted()
        speedLabel.text = speedValue[0].formatted()
        
        //設定個體質progressview 特別注意型別Float
        hpProgressView.progress = Float(hpValue[0])/upperLimit
        attackProgressView.progress = Float(attackValue[0])/upperLimit
        defenseProgressView.progress = Float(defenseValue[0])/upperLimit
        spAttackProgressView.progress = Float(speedValue[0])/upperLimit
        spDefenseProgressView.progress = Float(spDefenseValue[0])/upperLimit
        speedProgressView.progress = Float(speedValue[0])/upperLimit
        
    }

預設畫面內容

建立可同步修改的function

    var num = 0
    let upperLimit:Float = 200

func sync() {
        pokemonImageView.image = UIImage(named: pokemonImageArray[num])
        pokeLabel.text = pokemonArray[num]
        pageBot.currentPage = num
        pokemonSegment.selectedSegmentIndex = num
        shinySwitch.isOn = false
        
        hpLabel.text = hpValue[num].formatted()
        attackLabel.text = attackValue[num].formatted()
        defenseLabel.text = defenseValue[num].formatted()
        spAttackLabel.text = spAttackValue[num].formatted()
        spDefenseLabel.text = spDefenseValue[num].formatted()
        speedLabel.text = speedValue[num].formatted()
        
        hpProgressView.progress = Float(hpValue[num])/upperLimit
        attackProgressView.progress = Float(attackValue[num])/upperLimit
        defenseProgressView.progress = Float(defenseValue[num])/upperLimit
        spAttackProgressView.progress = Float(speedValue[num])/upperLimit
        spDefenseProgressView.progress = Float(spDefenseValue[num])/upperLimit
        speedProgressView.progress = Float(speedValue[num])/upperLimit
        
    }

新增switch元件 顯示異色寶可夢功能

//異色寶可夢開關
    @IBAction func changeShiny(_ sender: UISwitch) {
        
        if sender.isOn == true {
            pokemonImageView.image = UIImage(named: pokemonShinyImageArray[num])
        } else{
            pokemonImageView.image = UIImage(named: pokemonImageArray[num])
        }
    }

切換異色寶可夢開關

新增Page Control元件 小圓點換頁功能

@IBAction func changePageDot(_ sender: UIPageControl) {
        
        num = sender.currentPage
        switch sender.currentPage {
        case 0 :
            num = 0
            sync()
        case 1 :
            num = 1
            sync()
        case 2 :
            num = 2
            sync()
        case 3 :
            num = 3
            sync()
        case 4 :
            num = 4
            sync()
        default:
            num = 5
            sync()
        }
        
    }

小圓點切換

新增Segment元件 標籤換頁功能

    
    @IBAction func changeSegment(_ sender: UISegmentedControl) {
        
        num = sender.selectedSegmentIndex
        switch sender.selectedSegmentIndex {
        case 0 :
            num = 0
            sync()
        case 1 :
            num = 1
            sync()
        case 2 :
            num = 2
            sync()
        case 3 :
            num = 3
            sync()
        case 4 :
            num = 4
            sync()
        default:
            num = 5
            sync()
        }
        
    }

標籤切換

新增Button元件 左右按鈕換頁功能

//左箭頭換頁
    @IBAction func previousPage(_ sender: Any) {
        
        num -= 1
        switch num {
        case 0 :
            num = 0
            sync()
        case 1 :
            num = 1
            sync()
        case 2 :
            num = 2
            sync()
        case 3 :
            num = 3
            sync()
        case 4 :
            num = 4
            sync()
        default:
            num = 5
            sync()
        }
        
    }
    
    //右箭頭換頁
    @IBAction func nextPage(_ sender: Any) {
        num += 1
        switch num {
        case 0 :
            num = 0
            sync()
        case 1 :
            num = 1
            sync()
        case 2 :
            num = 2
            sync()
        case 3 :
            num = 3
            sync()
        case 4 :
            num = 4
            sync()
        case 5 :
            num = 5
            sync()
        default:
            num = 0
            sync()
        }
    }

左右箭頭切換按鈕

啟用 Timer方法 ? 自動播放功能

var timer: Timer?
    @IBAction func autoPlay(_ sender: UIButton) {
        if sender.titleLabel?.text == "自動播放"{
            autoPlayButton.setTitle("停止", for: UIControl.State.normal)
            timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(startCarousell), userInfo: nil, repeats: true)
        } else {
            autoPlayButton.setTitle("自動播放", for: UIControl.State.normal)
   //停止Timer
            timer?.invalidate()
        }
        
    }
    
  //寫一個在 Timer觸發所要做的 objc func
    @objc func startCarousell() {
        num += 1
        if num == 6 {
            num = 0
            sync()
        } else {
            sync()
        }
        
    }

參數介紹：

• timeInterval：觸發Timer的間隔時間，以秒為單位。
• target：Timer 觸發的對象，self表示目前使用 UIViewController 本身。
• selector：Timer 觸發後執行哪一個 objc func。
• userInfo：可作為傳入Timer 觸發事件的資料，不使用傳入nil即可。
• repeat：true啟用後會根據 timeInterval 時間間隔設定來重複觸發，若填入false則啟用後只觸發一次。

停止使用 Timer 方法

當不使用 Timer 卻沒停止它的話，會一直在背景執行。

自動播放功能

#11 iOS App Swift Timer 筆記 & 實作

新增swipe gesture手勢換頁功能

兩個手勢功能連線同一個Action

點選滑動的View，勾選User Interaction Enabled

//手勢換頁
    @IBAction func swipeChangePage(_ sender: UISwipeGestureRecognizer) {
        
 //direction
        if  (sender.direction == .left) {
            
            num += 1
            switch num {
            case 0 :
                num = 0
                sync()
            case 1 :
                num = 1
                sync()
            case 2 :
                num = 2
                sync()
            case 3 :
                num = 3
                sync()
            case 4 :
                num = 4
                sync()
            default:
                num = 5
                sync()
            }
            
        } else if (sender.direction == .right) {
            
            num -= 1
            switch num {
            case 1 :
                num = 1
                sync()
            case 2 :
                num = 2
                sync()
            case 3 :
                num = 3
                sync()
            case 4 :
                num = 4
                sync()
            case 5 :
                num = 5
                sync()
            default:
                num = 0
                sync()
            }

        }
        
    }

左右滑動手勢操作

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

新增Long Press Gesture Recognizer長按手勢 隨機換頁功能

@IBAction func showRandomImage(_ sender: Any) {
        num = Int.random(in: 0...5)
        sync()
    }

長按手勢隨機顯示

#38 利用 page control，segmented control，button & gesture 更換內容