blog posts

Learn the UI buttons (user interface) in iOS in simple language

With an example in Swift, we will learn how to use the ui buttons in iOS and how we can use the ui control button in iOS to get special actions that happen by clicking.

IOS UI buttons

In iOS buttons, the object is actually a display that performs some special actions based on user actions.

If we want to add some operating methods to iOS buttons; We need to code similarly below:

Now with an example, we will see how we can use the buttons in the iOS app.

Create iOS Buttons app in Xcode

To create a new iOS project in Xcode, open Xcode from the Applications folder. 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 or select the File New Project path.

C: \ Users \ mohammad \ Desktop \ open-xcode-to-create-new-ios-app-using-xcode (1) .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, such as page-based apps, tab-based apps, games, spreadsheet apps, and more. These templates have a preset interface and source code files.

For example, the hello world app on iOS, we will use the most basic pattern of the app, which is “show-only app”. To select this item, go to the iOS section on the left to select the application using the select application, and in the main part of the window, select the “Single View Application” window and click 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: “Button in iOS” (Buttons in iOS)

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 for 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-buttons-create-new-swift-project-in-xcode.png

When we click Next; A new window will open in which we have to select the location where we want to save our project. Once we have selected the project storage location; We have to click on the Create button as shown below.

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

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, so that Xcode opens the visual interface editor as shown below.

C: \ Users \ mohammad \ Desktop \ ios-buttons-main-storyboard-file-structure-in-xcode.png

Now select the ViewController.Swift file in your project, which should look like this:

C: \ Users \ mohammad \ Desktop \ ios-buttons-viewcontroller-swift-code-xcode-editor.png

Add iOS ui controls to display

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 button in the library selection bar on the left. (On the other hand, you can select the View Utilities Show Object Library path).

C: \ Users \ mohammad \ Desktop \ object-library-in-xcode-editor-in-ios-swift.png

As we mentioned; Our interface will be in the Main.storyboard file; So open the Main.storyboard file. Now search for Button in the Object Library in the Filter box, then drag the control button and do the same as you see below; Drop it in ViewController on the main.storyboard.

C: \ Users \ mohammad \ Desktop \ ios-buttons-add-button-control-view-in-xcode.png

Associate iOS UI controls with coding

Now we want to connect the controls to the ViewController.Swift code. To do this, we need to click on the Assistant button (two tangled circles), which is located in the Xcode toolbar on the right, as shown below.

C: \ Users \ mohammad \ Desktop \ assistant-editor-overlap-circle-in-iox-xcode.png

To map the controls, hold down the Ctrl key on the keyboard and hold the key similar to what you see below; Drag and drop to the ViewController.swift file.

C: \ Users \ mohammad \ Desktop \ ios-buttons-map-controls-code-in-xcode-editor.png

When you dragged the controls from the Viewcontroller to the code in the ViewController.swift file, you now have to write the code @IBAction to the text of the button when it is clicked; To change. When the required changes are made, the ViewController.swift file should look like this:

Import UIKit

Class ViewController: UIViewController {


@IBOutlet weak var buttonOutlet: UIButton!

@IBActin func buttonOutlet: UIButton!

buttonOutlet.setTitle (“Apple”, forstate: UIControlState.Nrmal)


Override func viewDidLoad () {

Suoer.viewDidLoad ()

buttonOutlet.setTitle (“Hi”, forstate: UIControlState.Normal)


Override func viewDidLoad () {

Super.didReceiveMemoryWarning () {

// Dispose of any recources that can be recreated.



We will now run the app and see the iOS buttons output of the app. To run the program, first select the required emulator (here we have selected iPhone Six S Plus) and click on the Play button (located in the upper left corner of the Xcode toolbar) as shown below.

Example Output iOS UI buttons

When we run the program; We will see the text “Hi”; When we click the button; The text changes to “Apple”. Below you can see the output of the program.

This way we can use the ui control buttons in iOS to perform special actions after clicking on the button