iT邦幫忙

2025 iThome 鐵人賽

DAY 19
0
Mobile Development

Swift iOS 開發新手村:從入門到 AI 聊天室系列 第 19

Day 19|Xcode 元件教學:滑出互動感,打造 Slider 元件!

  • 分享至 

  • xImage
  •  

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

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

今日學習重點

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

實作:讓 Label 顯示滑桿數值

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

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

首先,打開你的專案,進入 MainViewController.xib 檔案。
從元件庫中,拖曳一個 Slider 和一個 Label 到畫面上:
https://ithelp.ithome.com.tw/upload/images/20251003/2017754218YiSbSZXW.png

接著從右側屬性欄設定 Slider 的初始值 Value、最小值 Minimum 與最大值 Maximum
https://ithelp.ithome.com.tw/upload/images/20251003/20177542wfvLqhLMmm.png

如圖所示,初始 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 拖曳到程式碼中,設定如下:

  • ConnectionAction
  • TypeUISlider
  • EventValue Changed
  • NamesliderValueChanged

https://ithelp.ithome.com.tw/upload/images/20251003/20177542zhJhSBNXPV.png
接著在 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 sldNumber(@IBOutlet)
定義 IBAction 的參數,代表觸發的元件 用 IBOutlet 連接的元件屬性
可使用範圍 僅限 IBAction 方法內 整個 ViewController 類別皆可使用
使用時機 即時取得事件元件的值 需在多處方法中讀寫元件屬性時使用

總結:只在事件方法中用,用 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 輸入框!》


上一篇
Day 18|介面佈局大解密:用 Auto Layout 讓 App 畫面自動適應!
下一篇
Day 20|Xcode 元件教學:打字也能互動,認識 TextField 輸入框!
系列文
Swift iOS 開發新手村:從入門到 AI 聊天室21
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言