Filed Under: iOS

In this tutorial, we’ll be discussing and implementing the UISwitch Control in our iOS Application.

UISwitch

UISwitch is like a toggle button which has two states: on and off. The UISwitch control is typically used at places where you need to enable or disable a certain functionality.

  • var isOn: Bool
  • func setOn(Bool, animated: Bool)

The first one is a property and is used to check the state.
The second is a function which is used to set the state of the UISwitch.

To create a UISwitch programmatically:


func createSwitchProgrammatically() {
    let mySwitch = UISwitch(frame:CGRect(x: 150, y: 150, width: 0, height: 0))
    mySwitch.isOn = false
    self.view.addSubview(mySwitch)
        
}


Similar to many of the other UI controls, when the Switch state changes, valueChanged gets triggered which we can watch for in our selector.

Following are the important properties and functions to customize a UISwitch:

  • var onTintColor: UIColor? – Color tint when the switch is on.
  • var tintColor: UIColor! – Outline color of the switch when it is off
  • var thumbTintColor: UIColor? – Tint color of the thumb of the UISwitch
  • var onImage: UIImage? – Deprecated in iOS 10.
  • var offImage: UIImage? – Deprecated in iOS 10.
It is recommended to use the standard size of UISwitch.

In the next section, we’ll be creating an application which implements a custom UISwitch as well as the handles the states.

Project Storyboard

ios uiswitch storyboard

We can set the initial state of the UISwitch in the attributes inspector.

Control + drag the arrow from the UISwitch onto the ViewController.swift found in the attributes inspector to add the action :

ios uiswitch valuechanged

Code

The code for the ViewController.swift is given below:


import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var customSwitch: UISwitch!
    @IBOutlet weak var myLabel: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        customSwitch.tintColor = UIColor.blue
        customSwitch.thumbTintColor = UIColor.black
        customSwitch.onTintColor = UIColor.brown
        
        createSwitchProgrammatically()
    }
    
    func createSwitchProgrammatically() {
        let mySwitch = UISwitch(frame:CGRect(x: 150, y: 150, width: 0, height: 0))
        mySwitch.isOn = false
        mySwitch.addTarget(self, action: #selector(self.stateChanged), for: UIControl.Event.valueChanged)
        self.view.addSubview(mySwitch)
        
    }

    @IBAction func switchOnValueChanged(_ sender: Any) {
        myLabel.text = "Is on? \((sender as! UISwitch).isOn)"
    }
    
    @objc func stateChanged(mySwitch: UISwitch)
    {
           myLabel.text = "Programmatic switc Is on? \(mySwitch.isOn)"
    }
}

The stateChanged method is a custom selector create for the programmatically created UISwitch.
We display the current state for each of the UISwitch on the UILabel.

The output of the application in action is given below:

ios uiswitch output

As you can see, the UILabel detects the changes on both of the UISwitch successfully.

And that brings an end to this tutorial. You can download the project from the link below:

Comments

  1. RandomGuyOnTheInternet says:

    Hey, I keep getting an error “Thread 1: Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value” whenever I try to run my program. Help!

    1. Anupam says:

      That’s because you are accessing the variable without initializing it.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages