昨天我們學會了使用 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 輸入框!》