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.
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
- First, drag Label from Object Library located at #3 onto Main.storyboard
- Second, click on Label + Control and drag it to to code section and a pop up will appear
- 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
- Drag Button from the Object Library located on #1 into Main.storyboard
- Click Button + Control and drag it to Swift file
- On #2, change the connection to Action. Then, 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.