UIKit練習3- UIStoryboard、UIScrollView、AVFAudio聲音按鈕、Silder

IBOutlet & IBAction

這次的聲音效果教學，讓我想到朋友的女兒剛好正在學齡，

先練習一下，之後把它做成正常的APP 。

整體畫面：

實際操作錄影檔：

2024 03 25 22 26 40

1.背景圖

上次用Code寫過一次Scroll View後真的蠻虐待自己的，所以這次用純Story Board製作可以左右滑動的效果。

先拉一個Scroll View後，設定contentSize如圖：

再加一個View就可以把底圖換成你要的圖片(整個View左右一定要超出Scroll View才能滑動）>把View的X,Y座標都設置為0這樣畫面就跟Scroll View對其了

設置底圖對齊Scroll View

2.小動物按鈕

把Button底圖設置好後就可以開始連接code了，如圖，想要幾個就右鍵拉幾個IBAction。

請勿看標記名字，僅示範動作

因為按下去後聲音輸出的動作是一樣的，所以我寫了一個Function :

    func voiceButton(speak: String) {
        let voice = AVSpeechUtterance(string:speak)
        voice.voice = AVSpeechSynthesisVoice(language:
        "en-US")
        voice.rate = 0.3
        voice.pitchMultiplier = 1
        synthesizer.speak(voice)

整體串起來，就可以達到按了按鈕，就會輸出聲音的效果，整體音源code：

import UIKit
import AVFAudio//說話的模組

class ViewController: UIViewController {

    //建立一個會說話的機制，就像Viwe要顯示在畫面上要告訴電腦一樣，這也是為了導出聲音
    let synthesizer = AVSpeechSynthesizer()
    
override func viewDidLoad() {
        super.viewDidLoad()
       
    }

    @IBAction func catButton(_ sender: Any) {
        let cat = "cat"
        voiceButton(speak: cat)
    }
    
    @IBAction func zebraButton(_ sender: Any) {
        let zebra = "zebra"
        voiceButton(speak: zebra)
    }
    
    @IBAction func owlButton(_ sender: Any) {
        let owl = "owl"
        voiceButton(speak: owl)
    }
    
    @IBAction func rabbitButton(_ sender: Any) {
        let rabbit = "rabbit"
        voiceButton(speak: rabbit)
    }
    
    @IBAction func elephantButton(_ sender: Any) {
        let elephant = "elephant"
        voiceButton(speak: elephant)
    }
    
    func voiceButton(speak: String) {
        let voice = AVSpeechUtterance(string:speak)
        voice.voice = AVSpeechSynthesisVoice(language:
        "en-US")
        voice.rate = 0.3
        voice.pitchMultiplier = 1
        synthesizer.speak(voice)
    }

3.圖案移動按鈕：

為了增加畫面有趣度而設置，首先先右鍵拉兩個IBoutlet，如圖

因為Silder是有動作的所以還要再拉一個IBAction，如圖

好了後開始寫裡面的code：

import UIKit
import AVFAudio

class ViewController: UIViewController {
    
    let synthesizer = AVSpeechSynthesizer()
    
    @IBOutlet weak var runBoy: UIImageView!
    @IBOutlet weak var runBoySilder: UISlider!
    
override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }   
    @IBAction func boyMove(_ sender: Any) {
        //座標Ｘ跟著Silder才會左右動，不設置Ｙ，所以直接指定X座標去抓Silder的數值
        runBoy.frame.origin.x = CGFloat(runBoySilder.value)
    }
}

這樣就可以製作讓圖片在畫面上左右跑的Silder了。