昨天我們學會了使用 Auto Layout 打造一個穩固的「介面骨架」。今天，我們就要開始為這個骨架增添可以互動的「肌肉」！

我們將認識第一個可以讓使用者「滑動」的元件——滑桿（Slider）。它常見於調整音量、亮度的場景，是 App 中最直覺的互動方式之一。今天，我們將親手把它放上畫面，並學會如何讀取它的數值，讓 App 能即時回應使用者的操作！

今日學習重點

• 認識 Slider 元件：了解 Slider 的用途，並在屬性面板設定其最大/最小值與初始值
• 建立畫面與程式的互動：為 Slider 建立 IBOutlet，並監聽 Value Changed 事件來觸發 IBAction
• 處理並顯示 Slider 數值：學會讀取 Slider 的 value 屬性，並將 Float 轉型為 Int 顯示在 UILabel 上
• 釐清 sender 與 IBOutlet：深入理解在 IBAction 中，使用 sender 和 IBOutlet 的差異與最佳時機

實作：讓 Label 顯示滑桿數值

我們將製作一個畫面，包含一個 Slider 和一個 Label，當使用者拖曳滑桿時，文字會即時更新為目前的數值。

步驟 1：拖入元件並設定屬性及約束

首先，打開你的專案，進入 MainViewController.xib 檔案。
從元件庫中，拖曳一個 Slider 和一個 Label 到畫面上：

接著從右側屬性欄設定 Slider 的初始值 Value、最小值 Minimum 與最大值 Maximum：

如圖所示，初始 Value 設為 50，Minimum 設為 0，Maximum 設為 100。

使用 Auto Layout 為這兩個元件加上至少四條約束（例如：水平置中、上邊距、寬度、高度），確保它們在畫面上位置穩定。

這裡就讓你們自己練習一下！

步驟 2：建立連線

接下來，我們來建立 IBOutlet：

建立 IBOutlet

將 Slider 連接到 MainViewController.swift，命名為 sldNumber：

@IBOutlet weak var sldNumber: UISlider!

將 Label 連接到 MainViewController.swift，命名為 lbMessage：

@IBOutlet weak var lbMessage: UILabel!

建立 IBAction

將 Slider 拖曳到程式碼中，設定如下：

• Connection：Action
• Type：UISlider
• Event：Value Changed
• Name：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 vs. IBOutlet

總結：只在事件方法中用，用 sender；其他地方需要操作，就用 IBOutlet。

步驟 3：設定初始數值（在畫面載入時）

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 輸入框！》