Swift 程式雖然強大,但真正讓畫面「活起來」的關鍵,是和使用者互動的能力。昨天我們打好了 App 的架構基礎,今天,我們就要親手為這個架構注入靈魂!
我們將學習 iOS 開發中最重要的兩條「連接線」:
準備好見證你的程式碼第一次「指揮」畫面的神奇時刻了嗎?
IBOutlet(屬性連線)與 IBAction(動作連線) 的用途與差異UILabel 與 UIButton 到畫面上Control + 拖曳」將 UI 元件與程式碼連接的技巧接續昨天的專案,今天我們將建立一個包含 Label 和 Button 的簡單畫面,並讓使用者點擊按鈕後,改變 Label 的顯示文字。
進入 MainViewController.xib 檔案(這是我們的介面設計檔),點擊上方 + 號,會跳出元件庫:

從元件庫中,拖曳一個 Label 和一個 Button 到畫面上:
小提醒:Label 的寬度記得拉長,避免文字被截斷哦!

將它們大致排列好後,開啟右側設定欄,設定 Label 的初始文字,例如 Hello!:
現在,我們來建立 IBOutlet,讓程式碼能夠控制這個 Label。
在畫面上方可以看到小小的工具列
點擊右上方的「Add Editor on Right」按鈕(圖示是兩個並排的長方形),來開啟並排編輯畫面。
接著在左側檔案管理開啟 MainViewController.swift 檔案,讓它與 MainViewController.xib 並排顯示:
按住 Control 鍵,從 MainViewController.xib 中的元件管理區將 Label 元件拖曳到 MainViewController.swift。
在彈出的視窗中,選擇連線方式為 Outlet,並將名稱命名為 lbMessage:
點擊 Connect,Xcode 會自動在你的程式碼中生成以下程式碼:
@IBOutlet weak var lbMessage: UILabel!
妳會發現 Xcode 自動生成的 IBOutlet 都是一個驚嘆號 ! 結尾的隱式解析可選型別。
這是因為,當 MainViewController 被建立的瞬間,lbMessage 這個屬性其實還沒有跟畫面上的元件連上,所以它在技術上是 nil。但我們(以及 Xcode)可以保證,在畫面載入完成後 (viewDidLoad),這個連線一定會被建立好。
因此,為了方便起見,我們使用 ! 來告訴編譯器:「相信我,在我使用它的時候,它絕對有值!」這也是 ! 在 iOS 開發中最常見、也最合理的用法。
接著用相同方法,建立 Button 的 IBOutlet,命名為 btnEnter:
@IBOutlet weak var btnEnter: UIButton!
接著,我們要讓點擊按鈕時執行某些動作。
同樣按住 Control 鍵,從 MainViewController.xib 上的 Button 元件拖曳到 MainViewController.swift:
在彈出的視窗中,選擇連線方式為 Action,並將名稱命名為 didTapButton:
點擊 Connect,Xcode 會自動生成以下程式碼:
@IBAction func didTapButton(_ sender: Any) {
}
接著再 didTapButton 方法中,撰寫修改標籤文字的程式碼,整個看起來會像這樣:
@IBAction func didTapButton(_ sender: Any) {
lbMessage.text = "Hello, World!"
}
點選 Xcode 上方 ▶️ Run 按鈕(或 Cmd + R),在模擬器中執行。
初始畫面會顯示你設定的 Hello!:
點擊按鈕後,文字會變成 Hello, World!:
恭喜!今天,你的 App 第一次「活」了過來!
我們完成了一項極其重要的實作:學會了如何在 Xcode 中,將視覺化的介面元件與程式碼邏輯緊密地綁定在一起。你現在理解了 IBOutlet 如同一條數據線,讓程式碼得以控制畫面;而 IBAction 則像一條信號線,讓使用者的操作得以觸發程式。
這個「畫面 → 程式 → 畫面」的互動循環,是所有 iOS App 開發的核心基礎。掌握了它,你就真正踏上了 UI 開發的康莊大道!
今天我們成功讓按鈕和標籤動了起來,但在不同尺寸的 iPhone 上看看——它們的位置是不是亂掉了?
這個「跑版」問題是所有 UI 開發者都必須面對的挑戰。明天,我們將正式學習 iOS 中的排版神技 —— Auto Layout(自動佈局)!你將學會如何為元件添加 約束(Constraints),讓你的 App 介面能優雅地自動適應任何螢幕尺寸!
敬請期待《Day 18|介面佈局大解密:用 Auto Layout 讓 App 畫面自動適應!》