連結 IBAction 和 IBOutlet 的步驟說明
以 Yaya 同學的小費 App 為例
連結 IBAction,生成畫面元件事件觸發的 function
1 點選要拉 action 的元件,比方下圖的計算按鈕。
2 打開 Assistant,利用它顯示畫面對應的程式。
- 方法 1
從 Quick Actions 點選 Assistant。
- 方法 2
點選下圖右上角紅色框框標示的 Adjust Editor Options 按鈕。
選擇 Assistant
(快速鍵 cmd + option + control + enter)。
此時右邊的 Assistant Editor 將聰明地顯示跟此畫面有關的檔案,比方上圖的 ViewController。
如果發現右半邊出現如下圖長得不太像 Swift 的程式,請注意上方 jump bar 標示的檔名。比方下圖標示著 UIViewController.h,表示我們忘記修改 controller 的類別,它還是原本內建的 UIViewController,不能拉 action 跟 outlet。
只有我們自己定義的類別才能拉 outlet 和 action。像 UIViewController 是 iOS SDK 內建的類別,我們不能修改它們,因此不能拉 outlet 和 action。
因此,請記得我們在 storyboard 新增的 View Controller 類別為內建的 UIViewController,要改成我們定義的類別後才能拉 outlet & action。
對如何修改 controller 類別有興趣的朋友,可進一步參考以下連結的說明。
如果發現 assistant 視窗出現 No Assistant Results,則可關掉 Xcode 視窗,重開即可恢復正常。
3 以右鍵按住紅色的計算按鈕,拉線到右邊 class { } 裡第一個 function 之後,看到出現 Insert 的文字後放開觸控板。
拉線時有以下幾點注意事項:
(1) 要用右鍵拉線。
(2) 線要連到 class 的 { } 裡,並且連到第一個 function 之後。
如此 Xcode 將聰明地判斷我們想要拉出產生 function 的 action。因為定義 class 時,我們習慣在前面宣告 property,後面定義 function。
4 在 Action 設定視窗的 Name 欄位輸入名字,然後按右下角的 Connect。(或是按 Enter)
action 的名字將成為 class method 的名字,也就是 function 的名字,因此將產生以下程式碼。
@IBAction func calculateTip(_ sender: Any) {
}
action 的名字一般會用動詞, 說明此 function 做的事,比方點擊選擇題按鈕的 action 可取名為 singleAnswerButtonPressed,singleAnswerButtonTapped,selectSingleAnswer,滑動 slider 選擇年紀的 action 可取名為 ageSliderChanged,changeAge。
ps: AI 給的 IBAction 命名建議和例子。
https://chat.openai.com/share/f43cb296-87ca-440d-92e1-6f7031cfbf10
值得注意的,只有繼承 UIControl 的元件可以拉 IBAction,像 label & image view 等不能點選的元件則不能拉 action。
連結 IBOutlet,生成存取畫面元件的變數
方法和連結 IBAction 差不多,主要差別在第 3 步拉線的位置。以剛剛的小費 App 為例,當我們點選金額的 text field,按住右鍵拉線到右邊 class 的 { } 時,要拉到第一個 function 之前,看到出現 Insert 的文字後放開觸控板。
請記得線要連到第一個 function 之前,如此 Xcode 將聰明地判斷我們想要拉出產生 property 的 outlet。因為定義 class 時,我們習慣在前面宣告 property,後面定義 method。
接著在 Outlet 設定視窗的 Name 欄位輸入名字,然後按右下角的 Connect。(或是按 Enter)
outlet 的名字將成為 class property 的名字,也就是變數的名字,因此將產生以下程式碼。
@IBOutlet weak var priceTextField: UITextField!
outlet 的名字一般會用名詞,且以元件的型別結尾,比方 UILabel 元件會取名 scoreLabel,UISlider 元件會取名 ageSlider。
ps: AI 給的 IBOutlet 命名建議和例子。
https://chat.openai.com/share/1c41a9ad-4489-47d9-a1c9-6a8eeb43a671
由於 action 跟 outlet 都是從元件拉線,因此初學者有時會不小心將 outlet & action 都取名為元件的名字,這是比較不好的習慣,詳情可參考以下連結。
請 AI 提供 Outlet / Action 名字的建議
- 使用 Xcode predictive code completion。
- 詢問 AI。
為什麼叫 Outlet
以下為 AI 的說明。
至於為什麼要叫做 outlet,可能是因為 Interface Builder 上的元件可以看作是一個個的插座,而程式碼中的變數就像是插頭,IBOutlet 就是用來將插頭插入插座,將兩者連接起來的。
拉完 IBOutlet / IBAction 後,快速切到連線的 Swift 程式編輯
AI 產生的 outlet / action 心智圖
https://gist.github.com/PeterPanSwift/43a888978836a35a69a83faa7a6d6c2d
其它補充說明
- 拉線的位置
拉線的位置將決定它會產生 action 或 outlet。如果不小心拉錯位置,其實也可以手動更改 outlet / action ,從下圖 Connection 的選單切換即可。
有時因為右邊的 controller 程式宣告很多 property,造成 action 要連到第一個 function 之後有點困難時。此時記得先捲動右邊的畫面,甚至可以按 enter 鍵留多一點空間拉線。
- 調整 Assistant Editor 顯示的位置
- 重新連線 IBAction 和 IBOutlet
- 利用 option + Enter 或 option + 點擊顯示 outlet / action 連線的檔案。
- 調整 Assistant Editor 顯示的檔案