blog posts

Learn how to switch UI buttons on iOS

We will learn iOS switches in Swift language. Also with this example using xCode we can learn how to use ui switches in iOS to display whether a status is on or off.

IOS UI switches

In iOS, switch to that used to notify the user that a situation or a device option is turned on or off / active or passive is. In general, we use buttons that can set an option on or off.

Using iOS switches we can implement features that allow the user to adjust the settings of a particular item according to their needs; Turn it on or off.

Visual display of iOS switches with on and off positions is as follows:

ios ui switches in swift sample example

By adding a UISwitch class reference to our applications; We can use these switches in our iOS applications.

Here’s an example of how to use these UI buttons in iOS apps.

Create the iOS Switches app in Swift

To create a new project in Xcode on iOS, open Xcode from the application 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”; Click (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, iOS status change buttons, we have the most basic pattern of the program, which is “demo only”; We will use. To select this item, go to the iOS section on the left, select the application from the select section, 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: “Image View 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.developersocociety)”

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.

create new ios switches project in swift using xcode

When we click the Next button; A new window will open in which you must use the location where you want the new project to be saved; Let’s choose. Once you have selected the new project storage location; As shown below; Click the Create button.

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

ios progress bar application storyboard file in xcode

Now select the ViewController.swift file in your project which will look like this:

ios progress bar viewcontroller file in xcode

Add UI controls to display in Swift language

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).

As mentioned earlier; Our interface is in the Mian.storyboard file so you have to open the Main.storyboard file. Now search for the object library in the filter section, look for the Switch and drag the Switch control and drop it inside the ViewController in the Main.storyboard; Similarly, we need to add the label control to the ViewController as shown below.

Add ios ui controls to storyboard in xcode

Linking iOS UI controls to coding in Swift

Now we need to communicate between the controls and the ViewController.Swift code, for this purpose on the Assistant button, which is located in the right corner of the Xcode toolbar; Click (looks like two tangled circles)

To map the controls, hold down the Ctrl key on the button screen and, as you can see below, drag the label and switch controls from the interface and drag and drop them into the ViewController.swift file.

Map ios ui switch controls to code in xcode

When we add controls to the ViewController.swift file; Then we have to write custom code so that we can display the status of the button in the label control.

When we have written all the functions we need; The code for the ViewController.swift file should look like this:

Import UIKit

Class ViewController: UIViewController {

@ IBOutlet weak var switchkh: UISwitch!

@IBOutlet weak var label: UILabel!

@IBAction func switchAction (sender: Any0bject) {

if switchkh.on

{

label.text = “Switch is pressed”

}

else {

self.label.text = “Switch is 0ff”

}

}

Override func viewDidLoad () {

Super.viewDidLoad ()

// Do any additional setup after loading the view, typically from a nib.

}

Override func didReceiveMemoryWarning () {

Super.didRecieveMemoryWarning ()

// Dispose of any resources that can be recreated.

}

}

Now run the program and check the output of the program. To run the application; Select the required emulator (in this section we have selected the iPhone Six S Plus) and click the Play button, which is located in the left corner of the Xcode toolbar.

Output of iOS Switches app in Swift language

Below you can see the result of running the iOS switches app. Now drag the button from left to right, the label says “Switch is pressed”; Pull the button from left to right in the same way; The label “Switch is Off” similar to the following is displayed:

C: \ Users \ mohammad \ Desktop \ ios-switches-application-example-result-output.png

This way we can use the Swift ui switch control in iOS apps to indicate that a specific status is on / off based on our needs using Xcode.