Swift iOS App | 作業#8 七夕限定告白App| 用Slider調整講話的音調和速度

App畫面

這次作業主要練習（1）拉Outlet&Action（2）加入Slider調整speechUtterance說話的音調和速度

此外，在實際測試時遇到了一個小問題。如下圖，點擊Textfield輸入後，鍵盤就會卡住，不論點擊背景或Return都沒有辦法收回鍵盤。（這時候驚覺我們平常使用的app是如此方便，偉哉工程師。）

最後靠著Google龐大的資源，解決了這個問題，會在下方詳述。

先直接看程式碼吧

import UIKit
import AVFoundation

// #1
class ViewController: UIViewController, UITextFieldDelegate {

// #2
@IBOutlet weak var saySomething: UITextField!
@IBOutlet weak var voiceType: UISlider!
@IBOutlet weak var speedRate: UISlider!

// #3
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
self.view.endEditing(true)
}
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
textField.resignFirstResponder();
return true
}

// #4
@IBAction func pressSpeak(_ sender: Any) {
let speechUtterance = AVSpeechUtterance(string: saySomething.text!)
let synthesizer = AVSpeechSynthesizer()
speechUtterance.voice = AVSpeechSynthesisVoice(language: "zh-TW")
speechUtterance.pitchMultiplier = voiceType.value
speechUtterance.rate = speedRate.value
synthesizer.speak(speechUtterance)
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
}

#1

class ViewController: UIViewController, UITextFieldDelegate {

有注意到在UIViewController的後方我多加了一個UITextFieldDelegate嗎？這是為了要進行接下來的收鍵盤的設定。詳情請見#3。

#2

@IBOutlet weak var saySomething: UITextField!
@IBOutlet weak var voiceType: UISlider!
@IBOutlet weak var speedRate: UISlider!

很明顯，就是Outlet區。要輸入講話內容的TextField及兩個Slider（一個控制聲調，一個控制語速）

#3

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
self.view.endEditing(true)
}
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
textField.resignFirstResponder();
return true
}

這一段就是寫把鍵盤收起來的功能。

我主要參考這篇文章及影片的教學（看完還可以順便學怎麼做ToDoList，Amazing!）

https://blog.callmewhy.com/2014/09/15/todo-list-in-swift/

由於文章及影片中是用舊版的XCode，有些地方長得不太一樣。但摸索一陣之後也成功做出這個功能了，（所以應該是對的吧？雖然不是很理解整個過程的意思），善哉。

稍微說幾點我在寫的過程中較不清楚的地方：

1. 第一步，將TextField連向ViewController，選Delegate。

教學文章是像下方這樣寫的…看不懂作者要表達的是神馬東西

然后我们把这两个 TextField 的 Delegate 都指向 View Controller ，因为我们希望在我们输入完成点击 Return 之后，键盘会自动弹回去

看完影片，明白其實他說的就是…

右鍵拉Segue到左上的ViewController圖示

選delegate

2. 再來，同#1所示，在UIViewController的後方打上UITextFieldDelegate

3. 在UITextFieldDelegate上點右鍵可以進到definition中查看。

滿滿的function啊

第143行的textFieldShouldReturn就是我這邊使用的func，直接整行貼回去。這個function讓我們點return時，鍵盤可以隱藏。

4. 至於touchesBegan那一段的功能則是可以讓我們點背景後，將鍵盤隱藏。

#4

@IBAction func pressSpeak(_ sender: Any) {
let speechUtterance = AVSpeechUtterance(string: saySomething.text!)
let synthesizer = AVSpeechSynthesizer()
speechUtterance.voice = AVSpeechSynthesisVoice(language: "zh-TW")
speechUtterance.pitchMultiplier = voiceType.value
speechUtterance.rate = speedRate.value
synthesizer.speak(speechUtterance)
}

這段是讓咱們App得以開口說話的關鍵啦。

.pitchMutiplier主控制音調，所以將它和前面定義的Slider voiceType做連結

.rate則是語速，和speedRate做連結

一個七夕告白App就這樣誕生啦，祝各位都能跟自己心愛的人度過這個浪漫的日子。