昨天我們學會了使用 Auto Layout 打造一個穩固的「介面骨架」。今天,我們就要開始為這個骨架增添可以互動的「肌肉」!
我們將認識第一個可以讓使用者「滑動」的元件——滑桿(Slider)。它常見於調整音量、亮度的場景,是 App 中最直覺的互動方式之一。今天,我們將親手把它放上畫面,並學會如何讀取它的數值,讓 App 能即時回應使用者的操作!
IBOutlet,並監聽 Value Changed 事件來觸發 IBAction
value 屬性,並將 Float 轉型為 Int 顯示在 UILabel 上IBAction 中,使用 sender 和 IBOutlet 的差異與最佳時機我們將製作一個畫面,包含一個 Slider 和一個 Label,當使用者拖曳滑桿時,文字會即時更新為目前的數值。
首先,打開你的專案,進入 MainViewController.xib 檔案。
從元件庫中,拖曳一個 Slider 和一個 Label 到畫面上:
接著從右側屬性欄設定 Slider 的初始值 Value、最小值 Minimum 與最大值 Maximum:
如圖所示,初始 Value 設為 50,Minimum 設為 0,Maximum 設為 100。
使用 Auto Layout 為這兩個元件加上至少四條約束(例如:水平置中、上邊距、寬度、高度),確保它們在畫面上位置穩定。
這裡就讓你們自己練習一下!
接下來,我們來建立 IBOutlet:
建立 IBOutlet
將 Slider 連接到 MainViewController.swift,命名為 sldNumber:
@IBOutlet weak var sldNumber: UISlider!
將 Label 連接到 MainViewController.swift,命名為 lbMessage:
@IBOutlet weak var lbMessage: UILabel!
建立 IBAction
將 Slider 拖曳到程式碼中,設定如下:
Action
UISlider
Value Changed
sliderValueChanged

接著在 sliderValueChanged 方法中,加入以下程式碼,讓 Label 顯示滑桿的數值:
@IBAction func sliderValueChanged(_ sender: UISlider) {
lbMessage.text = "\(Int(sender.value))"
}
也可以改用 sldNumber:
@IBAction func sliderValueChanged(_ sender: UISlider) {
lbMessage.text = "\(Int(sldNumber.value))"
}
預設情況下,Slider 的數值是 Float 型別,我們這裡為了方便顯示為整數,所以使用 Int() 做轉換。
| 用法 | sender |
sldNumber(@IBOutlet) |
|---|---|---|
| 定義 | IBAction 的參數,代表觸發的元件 | 用 IBOutlet 連接的元件屬性 |
| 可使用範圍 | 僅限 IBAction 方法內 | 整個 ViewController 類別皆可使用 |
| 使用時機 | 即時取得事件元件的值 | 需在多處方法中讀寫元件屬性時使用 |
總結:只在事件方法中用,用
sender;其他地方需要操作,就用IBOutlet。
override func viewDidLoad() {
super.viewDidLoad()
lbMessage.text = "目前的數值是:\(Int(sldNumber.value))"
}
這樣一來,畫面載入時就會自動顯示初始值,像是「目前的數值是:50」。
今天,我們為 App 注入了第一絲「動感」!你學會了如何建立、設定並連接 Slider 元件,讓 App 第一次能夠即時回應使用者的連續操作。
我們不僅掌握了 Value Changed 事件的用法,更深入比較了在 IBAction 方法中,使用參數 sender 與屬性 IBOutlet (sldNumber) 的根本差異。這個觀念對於未來處理更複雜的互動至關重要。
最後,透過在 viewDidLoad 設定初始狀態,你也學會了如何確保 App 在啟動時,畫面與資料能完美同步!
滑動操作很直覺,但 App 中最不可或缺的互動,絕對是讓使用者輸入文字!
明天,我們將介紹另一個關鍵元件:輸入框(TextField)。你將學會如何從中取得使用者輸入的內容、設定提示文字與鍵盤類型,以及——每個新手都會遇到的魔王關卡——如何優雅地讓鍵盤消失!
敬請期待《Day 20|Xcode 打字互動:認識 TextField 輸入框!》