連結 IBAction 和 IBOutlet 的步驟說明

以 Yaya 同學的小費 App 為例

小費計算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 類別有興趣的朋友，可進一步參考以下連結的說明。

新增 Cocoa Touch Class 的步驟說明

如果發現 assistant 視窗出現 No Assistant Results，則可關掉 Xcode 視窗，重開即可恢復正常。

3 以右鍵按住紅色的計算按鈕，拉線到右邊 class { } 裡第一個 function 之後，看到出現 Insert 的文字後放開觸控板。

拉線時有以下幾點注意事項:

(1) 要用右鍵拉線。

segue，outlet 和 action 的拉線方法

(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。

UIControl 類別

連結 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 都取名為元件的名字，這是比較不好的習慣，詳情可參考以下連結。

outlet & action 取一樣的名字 — iOS App 初學者易犯的錯誤

請 AI 提供 Outlet / Action 名字的建議

• 使用 Xcode predictive code completion。

• 詢問 AI。

請 AI 提供程式變數/function/型別命名的建議

為什麼叫 Outlet

以下為 AI 的說明。

至於為什麼要叫做 outlet，可能是因為 Interface Builder 上的元件可以看作是一個個的插座，而程式碼中的變數就像是插頭，IBOutlet 就是用來將插頭插入插座，將兩者連接起來的。

拉完 IBOutlet / IBAction 後，快速切到連線的 Swift 程式編輯

拉完 IBOutlet / IBAction 後，快速切到連線的 Swift 程式編輯

使用 Xcode predictive code completion 產生 IBOutlet / IBAction

使用 Xcode predictive code completion 產生 IBOutlet / IBAction

AI 產生的 outlet / action 心智圖

https://gist.github.com/PeterPanSwift/43a888978836a35a69a83faa7a6d6c2d

其它補充說明

• 拉線的位置

拉線的位置將決定它會產生 action 或 outlet。如果不小心拉錯位置，其實也可以手動更改 outlet / action ，從下圖 Connection 的選單切換即可。

有時因為右邊的 controller 程式宣告很多 property，造成 action 要連到第一個 function 之後有點困難時。此時記得先捲動右邊的畫面，甚至可以按 enter 鍵留多一點空間拉線。

捲動右邊的畫面並按下 enter 鍵，讓第一個 function 多一些拉線的空間。

• 調整 Assistant Editor 顯示的位置

為什麼 Assistant 視窗出現在下面

• 重新連線 IBAction 和 IBOutlet

重新連線 IBAction 和 IBOutlet

• 利用 option + Enter 或 option + 點擊顯示 outlet / action 連線的檔案。

利用 option + Enter 或 option + 點擊顯示 outlet / action 連線的檔案

• 調整 Assistant Editor 顯示的檔案

調整 Assistant Editor 顯示的檔案