Here we learn iOS actions and outlets in Swift with examples using the xcode editor. We also learn how to use iOS actions and outlets IBoutlets and IBActions in swift with examples.

In iOS, Outlets and Actions basically symbolize the IBoutlets and IBActions feature, which IB stands for Interface Builder, and developers need to know that IBActions and IBOutlet are both interface elements.

If you have little knowledge of object-oriented programming, we can say that the outlet is essentially; The object is a reference, and action is the method used to perform certain types of actions.

Using the vocabulary of Actions and Outlets in iOS

The following is how to use iOS Actions and Outlets in applications.

If you see the box above; You can see that we used @IBOutlet to add the label control reference and we also used @IBAction to change the text of the label control.

Here are some examples of how to use the iOS Action and Outlet feature in iOS apps.

Example of iOS Actions and Outlets

To create iOS action features and outlets in iOS apps, we create a simple app. To do this, open the Xcode editor from the Applications folder list. After opening Xcode, the welcome window will open as shown below. In the Welcome window, click on the second option Create a new Xcode project which means “Create a new Xcode Project” or you can navigate to FileNewProject.

After selecting “Create a new Xcode project”, a new window will open in which we must select our template.

The new Xcode window includes several options so that you can set the internal pattern of applications, which to implement; Common types of iOS apps such as page-based apps, tab-based apps, games, table-view apps, and more are selected. These templates have a pre-configured interface and source code files.

For iOS actions and outlets, for example, we will use the most basic template, which is “demo only”. To select this, go to the iOS section on the left to select the application and in the main part of the window that opens, select “Single View Application” and click on the next button as shown below.

After clicking Next, we will see a window like the one below, in this case we have to mention the project name and other details for our program.

Product name: ”iOS Actions & Outlets”

The name we enter in the Product Name section is used for the project and application.

Organization name: “Tutlane”

You can enter the name of the organization or your name in this field; Of course you can leave that section blank.

Organization Identifier: com.developersocociation

If you do not have an enterprise ID, enter com.example.

Bundle Identifier

This section is automatically generated based on the phrases we entered in the product name and organization ID.

Language: “Swift”

Select the language type “Swift” because we want to develop applications using swift.

Universal (devices): “Universal”

Select the Devices option as Universal This means that this app is applicable to all Apple devices; If you need to run the app for iPad only, you can select the iPad option to restrict your app to running only on iPad devices.

Use core Data: Not selected

This option is used for database operations. Select this option if you are doing any database-related operations in your application, otherwise do not select this option.

Include Unit Test: Not selected

If you need unit tests for your application, select this option otherwise leave it unselected.

Includes UI tests: not selected

Select this option if you need UI tests for your application, otherwise do not select it.

After completing the options, click the Next button as shown below.

When we click on the Next button, a new window will open where the part where we want our project should be saved; Let’s choose. When you select the storage location; To save the project; As you can see in the figure below; Click the Create button.

After clicking the Create button, Xcode opens and creates a new project. In our project, Main.storyboard and ViewController.swift are the main files used to design the user interface and maintain the source code.

Main.storyboard – which is the visual interface editor and this file is used to design the application interface.

ViewController.swift – which contains the source code of our application and we use this file to write any code related to our application.

Now select the Main.storyboard file in the project, until Xcode opens the visual interface editor as shown below.

Now select the ViewController.Swift file in your project, which will look like the following figure.

Add controls to the StoryBoard file on iOS

We are now adding controls to our application for that library of available objects. The object library appears at the bottom right of Xcode. If you did not find the object library, as shown below; Click the button that is the third icon in the library selection bar on the left. (On the other hand, you can select the View Utilities Show Object Library path).

As we discussed, our interface will be in the Main.storyboard file so open the Main.storyboard file. Now in the Objects Library, see the Label in the section under Filter; Search, then drag the label and drop it into the ViewController in the Main.storyboard, as you would drag and drop the Button control into the ViewController, as shown below.

Relate UI controls to code

If we want to implement other functions for UI controls, we have to code the UI controls into code in ViewController.swift.

Now we map our controls to the ViewController.swift file, for this we need to use the Assistant editor in Xcode. Open the Xcode Editor in Assistant mode; Click the Overlap circle editor button in the Xcode toolbar at the top right; Click as shown below.

Now hold down the Ctrl key on the keyboard and as shown in the figure below; At the same time drag and drop the controls to the code display in the ViewController.swift file.

When you drag the controls from ViewController to the code in the ViewController.swift file, you must enter the code in @IBAction to change the label text when you click the button. After making the required changes, the ViewController.swift file should look like this:

Now run and check the output of the program. To run the program, select the required emulator (in this section we have selected iPhone Six S Plus) and then click the Play button; Which is located as below in the upper left corner of the Xcode toolbar.

Program outputs for Actions and Outlets

The following is the output of iOS actions and outlets. When we ran the program; Click the button; Changes the text of the label. In fact, clicking performs the necessary action for the button to change its output text.

This is how we can use Outlets and Actions in our Swift applications to connect performance methods and resources to UI controls.