Introduction to IBAction & IBOutlet

One of the features that I love about Xcode is the ability to connect an object from the Main.storyboard to the code section and modify either some of attributes of the object or it’s functionality.

OVERVIEW

IBOutlet gives you access to the attributes of an object while IBAction allow you to add functionality into an object. By understanding the basic of IBOutlet and IBAction, you will be able to achieve even more in creating your specific apps.

LET’S DIVE INTO IBOUTLET

In order to create your own IBOutlet, you need to connect an object from Main.storyboard to one of the Swift file. In order to have a split view like below, click Main.storyboard first so you have Main.storyboard as your main view, then click ALT and click on ViewController.swift and your second view will appear. In order to change the position of the view, you could change the position of the second view on #1 show on the image below by clicking on Assistant Editors on Bottom.

STEPS IN CREATING IBOUTLET

  1. First, drag Label from Object Library located at #3 onto Main.storyboard
  2. Second, click on Label + Control and drag it to to code section and a pop up will appear
  3. Third, on #2, you will be given a choice for connection. Pick Outlet and give it a name. I named it label here. Here, we are creating an IBOutlet by naming it label. It’s that easy.

Let’s try exploring with what we could do with IBOutlet. Here we could see the IBOutlet is created with the name called label. By accessing the attributes of the object, we could easily do it by typing the name of the object which is label(or anything that you name) and notice that I’ve change the tcxt and the text color below.

The result is spectacular

LET’S DIVE INTO IBACTION

IBAction allows you to create a specific functionality in which when clicked will execute the functionality. This is one of the most common used functionality on iOS apps. The steps in creating IBAction is pretty similar with IBOutlet

STEPS IN CREATING IBACTION

  1. Drag Button from the Object Library located on #1 into Main.storyboard
  2. Click Button + Control and drag it to Swift file
  3. On #2, change the connection to ActionThen, give it a name. (I named it changeButton)

You’ll notice that it looks a little different from IBOutlet. That is because IBAction allows you to create a function to execute a command. Do not get confuse. With the IBOutlet I’ve created, I could still access it’s attributes. In IBAction, I intend to change the text and the color everything I clicked on the button.

This is what happen every time I clicked on the button.

  • Article By :
    Founder of DaddyCoding. Studied Computer Science, Information System and Information Technology at BYU-Hawaii. Currently spending most of my time researching and learning on helping to expose making iOS apps.

Random Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*