iOS UISwitch With Examples [Latest]

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

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 :

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:

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: