IBOutlet and IBAction

Day 10

Storyboards make it really easy to arrange objects in a view, but you’ll also need a way to control those objects and handle events in your Controller. As a web developer, this usually means either setting up JavaScript triggers or refreshing the page; in iOS development it means using IBOutlets and IBActions.

In this post I’ll outline how to connect view objects to your video controllers using IBOutlet and IBAction. 

Adding a Text Field

Adding a text field to a view is done by selecting the storyboard and making sure the right sidebar is showing.

Selecting the above button will display the right sidebar. Select the File Inspector  and display the Object Library , then find the Text Field object. Drag this object into your view.

Once added, you can move and resize it as necessary.

Add Text Field to View Controller as a Property

In order to control this text field in the Controller, it needs to be added as a property. First, make sure your view is controlled by a custom subclass of UIViewController. You can check this by selecting the view controller in your storyboard (should outline entire view frame with blue), then check your Identity Inspector.

If you don’t have a custom class, create a new UIViewController subclass by going to File > New > New File… and choosing the appropriate type. Once created, you should be able to see your new custom class in the Custom Class drop down pictured above.

Select the Editor toolbar option  so you can see both your view and View Controller on screen at the same time. Make sure your right-side view is showing the View Controller’s .h file. If it isn’t, you can select it by choosing the appropriate file at the top:

Now, while holding down the Control key, click and drag the text field into your View Controller.


This will popup with a few options, one of which is a Name. Give the outlet a name which you will use to refer to the text box in the controller.

You should now have a new @property in in your View Controller’s header file, and a @synthesize in the implementation file, allowing you to set and get properties for the text field.

Adding a Button

Adding a button is done in the same way to the text field.

You can rename the label on the button by double clicking it.

Connect Button to Controller

Now make sure the right half of the screen is showing your View Controllers implementation file (.m) rather than header file, then Control-drag the button in the same way you did the text field.

Once you do this, you’ll get another popup where your an give the action a name.

After you click Connect, a link will be made between your View and Controller. You can do whatever you want within this IBAction method, which will be fired whenever the user taps on the button.

Controlling Text Field When Button is Pressed

Next, we want to add some text to the text field whenever the user taps the button. This is as simple as adding a line within the IBAction you just created.

Because the text field has been set as a property of the Controller, all that needs to be done is to set the “text” property of myTextField to be whatever value we want. Placing this within the IBAction method means this will only happen if the user taps the “Press Me” button.