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

呈現畫面：

由於之後會做app點唱機，趁這一次功課剛好可以先做一些前置作業。

使用元件包含：

UIImageView

Page control

Label

Segmented control

Button

Gesture

Slider

先把每個元件的action、outlet拉好並且命名。

設定好所需圖片、文字等等的陣列，而定義變數 num 是方便我們用來儲存要顯示的陣列順序。

let imageArray = ["image1","image2","image3"]
let songNameArray = ["帶我去找夜生活","愛人錯過","披星戴月的想你"]
let pageNumber = ["1/3","2/3","3/3"]
var num:Int = 0

用function定義要同步改變的內容：圖片、文字、Page Controll、Segmented Controll

func sync(){
        songImageView.image = UIImage(named: imageArray[num])
        songLabel.text = pageNumber[num]
        songPage.currentPage = num
        songSegmented.selectedSegmentIndex = num
    }

同理用function定義要播放的歌曲mp3。

let player = AVPlayer()
var fileUrl = Bundle.main.url(forResource: "", withExtension: "mp3")
var playerItem:AVPlayerItem?

func musicPlayer(){
        if num == 0{
            fileUrl = Bundle.main.url(forResource: "\(num)", withExtension: "mp3")
        }else if num == 1{
            fileUrl = Bundle.main.url(forResource: "\(num)", withExtension: "mp3")
        }else{
            fileUrl = Bundle.main.url(forResource: "\(num)", withExtension: "mp3")
        }
        playerItem = AVPlayerItem(url: fileUrl!)
        player.replaceCurrentItem(with: playerItem)
        player.play()
    }

Peter AVPlayer教學：

利用 AVPlayer 播放音樂音效

而圖片邊框、背景漸層、segmented control的文字等等，我也用function去定義，最後在override func viewDidLoad() {}內呼叫。

func imageSitting(){
        songImageView.layer.borderWidth = 5
        songImageView.layer.borderColor = CGColor(red: 1, green: 1, blue: 1, alpha: 1)
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = view.bounds
        gradientLayer.colors = [CGColor(red: 67/255, green: 47/255, blue: 87/255, alpha: 1),CGColor(red: 44/255, green: 50/255, blue: 66/255, alpha: 1)]
        view.layer.insertSublayer(gradientLayer, at: 0)
    }
func segmentedText(){
        songSegmented.setTitle(songNameArray[0], forSegmentAt: 0)
        songSegmented.setTitle(songNameArray[1], forSegmentAt: 1)
        songSegmented.setTitle(songNameArray[2], forSegmentAt: 2)
    }
override func viewDidLoad() {
        super.viewDidLoad()
    
        sync()
        imageSitting()
        musicPlayer()
        segmentedText()
    }

Peter漸層教學：

利用 CAGradientLayer 製作漸層背景

利用 if else 寫出三種情況，，以 Segmented Control 為例後面依樣畫葫蘆。

@IBAction func segmentedControl(_ sender: UISegmentedControl) {
        if songSegmented.selectedSegmentIndex == 0{
            num = 0
        }else if songSegmented.selectedSegmentIndex == 1{
            num = 1
        }else {
            num = 2
        }
        sync()
        musicPlayer()
    }

Page Control:

@IBAction func pageControl(_ sender: UIPageControl) {
        
        if songPage.currentPage == 0{
            num = 0
        }else if songPage.currentPage == 1{
            num = 1
        }else {
            num = 2
        }
        sync()
        musicPlayer()
    }

上一頁、下一頁按鈕、Swipe Gesture Recognizer （左右滑手勢）皆類似：

@IBAction func nextButton(_ sender: UIButton) {
        num += 1
        if num > 2{
            num = 2
        }
        sync()
        musicPlayer()
    }
    @IBAction func previousButton(_ sender: UIButton) {
        num -= 1
        if num < 0{
            num = 0
        }
        sync()
        musicPlayer()
    }

最後是暫停播放按鈕：

@IBAction func stopButton(_ sender: UIButton) {
        if player.rate == 0{
            stopbutton.setImage(UIImage(systemName: "pause.fill"), for: .normal)
            player.play()
        }else{
            stopbutton.setImage(UIImage(systemName: "play.fill"), for: .normal)
            player.pause()
        }

參考資料：

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