blog posts

Learn iOS Delegates in plain language

We want to learn how to use iOS Delegates in Swift by using an example, and learn how to use iOS Delegates in relation to multiple objects using the xcode editor in Swift.

The concept of iOS delegates is the same as the concept of all programming languages, which means that delegate is used to communicate between different objects.

 You can also imagine that iOS delegates are a simple way to communicate between objects. In other words, we also say that delegates are basically used to send messages from one object to another.

Now suppose you want to get your national card, for this purpose you enter the office and go to counter 1, the person in charge there; Takes the initial information and transfers you to counter 3 to complete the next steps. 

Your 3 Delegate Counter now manages the details transmitted to it by Counter 1. Now that the counter has completed the 3 steps, the information is sent to the counter for further processing.

Now with an example from the Xcode editor we will see how to use iOS delegates in applications.

Create iOS Delegate app in Xcode

To create a new application in Xcode, open Xcode from the Applications folder (/ application) list. After opening Xcode, a welcome window will open as shown below. In the Welcome window, click on the second option: Create a new Xcode Project “Create a new Xcode Project” or select the File New Project path.

C: \ Users \ mohammad \ Desktop \ open-xcode-to-create-new-ios-app-using-xcode.png

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 built-in application templates to implement the usual type of iOS apps, including page-based apps, tab-based apps, games, spreadsheet apps, and more. These templates have a preset interface and source code files.

Hello world, for example, on iOS, one of the most basic pattern of the app, which is a “show-only app”; We will use. To select this item, go to the iOS section on the left to select the application using the application option, and in the main part of the window you see, select “Single View Application” and click the next button, as shown below. .

C: \ Users \ mohammad \ Desktop \ ios-swift-select-single-view-application-in-xcode.png

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 Delegates” (iOS Delegates)

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.

C: \ Users \ mohammad \ Desktop \ ios-delegates-enter-details-to-create-new-application-in-xcode.png

A new window will open when you click the Next button; Where the location in which we want to save the new project must be selected. Once you have selected the project storage location; As follows; Click the Create button.

C: \ Users \ mohammad \ Desktop \ save-xcode-new-project-in-application-folder-in-ios-swift.png

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

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

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

Now in the project by selecting Main.storyboard, Xcode is similar to what you see below; An editor opens the visual interface.

C: \ Users \ mohammad \ Desktop \ ios-delegates-main-storyboard-file-for-interface-in-xcode.png

Now select the ViewController.Swift file in your project, which is similar to the following figure.

C: \ Users \ mohammad \ Desktop \ ios-delegates-viewcontroller-swift-file-in-xcode.png

Add iOS UI controls to the storyboard in Xcode

Now open the Main.storyboard file and click on ViewController. As shown below, go to the Editor section and continue with the Embed in Navigation Controller path as shown below.

C: \ Users \ mohammad \ Desktop \ ios-delegates-add-navigation-controller-in-xcode.png

Now in the library of objects in the Filter box; Search for the phrase ViewController and then find it similar to what you see below; Drag and drop into Main.storyboard.

C: \ Users \ mohammad \ Desktop \ ios-delegates-add-controls-to-storyboard-file-in-xcode.png

Similarly, drag the Bar button item from the object library; When you select the add option; The “Add” system item is set and the + button is as follows; Is shown.

C: \ Users \ mohammad \ Desktop \ ios-delegates-add-bar-button-items-in-xcode.png

Now hold down the ctrl option on the keyboard and drag the + button, and as shown below; Drag and drop in the ViewController3 section.

C: \ Users \ mohammad \ Desktop \ add-bar-item-to-viewcontroller-in-ios-delegates.png

Once you have established the connection between the controllers; Main.storyboard file as shown below; Includes controllers interface.

C: \ Users \ mohammad \ Desktop \ ios-delegates-after-make-relation-between-controllers-in-xcode.png

We will now add the new class file to our application. To do this, go to FileNewFile, which is shown in the window below.

C: \ Users \ mohammad \ Desktop \ ios-delegates-add-new-file-to-app-in-xcode.png

Now like what you see below; Select “Cocoa Class” and click Next.

C: \ Users \ mohammad \ Desktop \ ios-delegates-add-new-class-file-in-xcode.png

When we click on Next; We will see a new window named “LastNameViewController” in the class section and “UIViewController” in the subclass section. In the language section; Select “Swift” and click the Next button to create a new class as shown below.

C: \ Users \ mohammad \ Desktop \ ios-delegates-give-name-to-class-in-xcode.png

Now click on ViewController and select the LastNameViewController class as shown below; Adjust it.

C: \ Users \ mohammad \ Desktop \ ios-delegates-map-class-file-to-controller-in-xcode.png

Now go to the object library and drag the button and text section and drop it in the View Controller3 section so that the whole button changes as you see below.

C: \ Users \ mohammad \ Desktop \ ios-delegates-add-uicontrols-to-third-view-control-in-xcode.png

Linking iOS UI controls to code in Xcode

Now open the editor in Assistant mode to establish a connection between the UI controls (text field, button) and the LastNameViewController.swift file. To do this, click the Assistant button on the Xcode toolbar near the top right corner of Xcode, opening the Assistant Editor as shown below.

Assistant Editor in iOS Xcode to Mapp Controls with Code

Now hold down the Ctrl key on the keyboard and drag the controls to the code display in the LastNameViewCntroller.swift file at the same time as shown below.

C: \ Users \ mohammad \ Desktop \ ios-delegates-mapp-controls-to-viewcontroller-in-xcode.png

When we mapped the controls to the LastNameViewCntroller.swift file; We need to write the code in order to take action, and our LastNameViewCntroller.swift file should contain the following code:

Go to the Main.storyboard file and click on the second view controller and drag the label from the objects library and release it in the ViewController2 section, then open the editor in Assisstant mode and, as you can see below, link the label to the ViewController.Swift file. Establish:

C: \ Users \ mohammad \ Desktop \ ios-delegates-add-map-label-to-second-viewcontrol-in-xcode.png

Now click on the link between ViewController2 and ViewController3 and name the ID “Send” as shown below.

C: \ Users \ mohammad \ Desktop \ ios-delegates-map-second-third-controller-in-xcode.png

When the necessary changes were made; Our ViewController.Swift file will look like this:

Now we want to run and view the output of the iOS Delegate app. To run the program; First, select the required emulator (in this section, we have selected iPhone Six Plus) and click on the Play button in the upper left corner of the Xcode toolbar.

IOS Delegate app output

In the following; You can see the result of iOS Delegate app. Now run your program and click on the “+” icon, at this time; ViewController3 will open in which, in the text field, enter the name and click on “ShowData” as shown below.

C: \ Users \ mohammad \ Desktop \ ios-delegates-app-output-screen1.png

When the function in ViewController3 is completed; The data is then delegated using the following; Sent to ViewController2.

C: \ Users \ mohammad \ Desktop \ ios-delegates-app-output-screen2.png

This is how we can use iOS delegates in our applications from one controller to another, according to our needs.