How To Connect Storyboard UI Component To ViewController Class Code

When we develop iOS app use Xcode, we design the app GUI ( graphical user interface ) in Main.storyboard file. And the swift source code is edited in ViewController.swift file. But how to use swift source code in ViewController.swift file to modify storyboard UI component’s attributes or process UI component’s action event? This article will tell you how to do it.

1. Connection Between Storyboard And ViewController.

First you should add connections between storyboard UI components and ViewController class source code. The connection has a lot of types such as outlet ( a class property variable that is used to refer to UI component ), action ( a class method that is used to response action event which UI component triggered. )

One of the two end point in the connection is a UI component ( such as a button ) in storyboard and the other end point is either a property variable or a method of ViewController class.

When the connection has been created, you can use the class property to refer to the UI component in the storyboard. Then you can modify the UI component’s attributes use the class property variable.

When the UI component trigger an event, then the connected class method will be invoked to process the event.

2. IBOutlet & IBAction.

Swift use @IBOutlet to specify a class property as an outlet variable, then you can use this class property to modify storyboard UI component’s attribute.

Below example define a UILabel type variable, @IBOutlet means this variable is an outlet variable which can modify related label in the storyboard ui.

weak means this Label object is not a must exist object, another option is strong which means this label object must exist.

The !character at the end of  UILabel means the label variable referred UI component must be available, the opposite character is ?which means the UI component is optional.

@IBOutlet weak var label: UILabel!

@IBAction is used to decorate a ViewController class’s method as an action method. It can has two method parameters, one refer to the event source UI component ( which UI component trigger this event ), the other refer to the event object ( what event happened ).

@IBAction func onClick(_ sender: UIButton, forEvent event: UIEvent){

3. How To Create IBOutlet Property & IBAction Method In ViewController Source Code.

Before add outlet property or action method, you should display the storyboard and assistant editor side by side like below. You can read article How To Display Xcode Library, Assistant Editor, Inspectors Window to learn more.

3.1 Add IBOutlet Property Steps.

1. Click to select the UI component such as a button or label.
2. Then press Control key and click the mouse button to drag the source UI component ( label or button ) from left storyboard to right assistant editor window at the same time. Now you will see a blue line point from storyboard to assistant editor source code is displayed like below.
   
3. When you release the mouse button, it will popup a connection dialog. We will explain the connection dialog’s elements as below.

   Connection : Select Outlet in this drop down list.
   
   Object : The value is View Controller ( you can not modify this value ).
   
   Name : The name value is the class property variable name in ViewController class, you should change 
   
          this to an easy to remember value, generally in CamelCase.
   
   Type : The Type value is decided by the UI component's type ( you do not need to change this also ).
   
   Storage : Select Weak in Storage drop down list.

   

4. Then click Connect button to close the dialog and connect the class property to the label, and you will see below class property variable has been added in assistant editor ViewController class.

   // Refer to the label.
   @IBOutlet weak var label: UILabel!
   

3.2 Add IBAction Method Steps.

1. Click to select a UI component such as a button in storyboard.
2. Press Control key and mouse button at same time, then drag the button from left storyboard to right assistant editor source code until you see a blue line is displayed.
   
3. When you release the mouse, it will popup Action connection dialog like below. Let us explain each dialog item in below.

   Connection : Select Action in connection drop down list, this will tell Xcode to add an action method  
   
                to process UI component's event. 
   
   Object : Select View Controller in Object drop down list.
   
   Name : Input the ViewController class's method name in the Name input text box ( we input onClick in 
   
          this example, this method will be invoked when selected event is triggered. ). 
   
   Type : This value is decided by the UI component type ( in this example it is a UIButton). 
   
   Event : This drop down list list all the event that can be triggered on the button, we select 
   
           Touch Up Inside event, then when you touch the button and lift your touched finger up, this 
   
           method will be invoked. 
   
   Arguments : You can specify the action method arguments in this drop down list, you can select either 
   
               None, Sender or Sender and Event.

   
4. At last, click the Connect button to create the action method in ViewController class, then you can add response code in this method to process this action event.

   @IBAction func onClick(_ sender: UIButton, forEvent event: UIEvent){
           ......
   }

References

1. iOS Add Click Event To UIButton Swift Example provide a real example for this article.