How To Use iOS UISwitch In Interface Builder And Programmatically In Swift Example

This example will tell you how to create and use the UISwitch component both in Xcode interface builder and swift source code. It will add one label, one UISwitch to the Main.storyboard. And the other UISwitch component is created and used in ViewController.swift file uses source code programmatically. Let us first look at the example demo below.

If you can not see the above video, you can see it in the youtube URL https://youtu.be/AumOzMdeYz4

1. iOS UISwitch Example Creation Steps.

1. Create an Xcode project using the Single View App template.
2. Click to edit the Main.storyboard file, add one label and one UISwitch UI component in it ( How To Display Xcode Library, Assistant Editor, Inspectors Window ). And add constraints to them to make them auto-layout responsively ( How To Add Constraints In Xcode 10 To Implement Auto Layout, iOS Auto Layout With Constraint Example ).
3. Connect the label and UISwitch UI component to the ViewController class’s @IBOutlet instance variables, and add a @IBAction function to process the UISwitch value changed event ( How To Connect Storyboard UI Component To ViewController Class Code ).
4. Then write the below source code in the ViewController.swift class file to create the second UISwitch object programmatically. You can see the below swift source code to know how to create the second UISwitch UI component programmatically. If you have any question, please add comments.

   import UIKit
   
   class ViewController: UIViewController {
       
       // This UISwitch object is create programmatically in source code.
       var switch1 : UISwitch!
   
       // Reference to the test label.
       @IBOutlet weak var label: UILabel!
       
       // Reference to the UISwitch in Main.storyboard.
       @IBOutlet weak var `switch`: UISwitch!
       
       override func viewDidLoad() {
           super.viewDidLoad()
           
           // Get the first UISwitch object's x, y location value.
           let switch0Frame: CGRect = `switch`.frame
           let switch0Y: CGFloat = switch0Frame.origin.y
           let switch0X:CGFloat = switch0Frame.origin.x
           
           // Create the second UISwitch object.
           switch1 = UISwitch()
           
           // Set the second UISwitch object's x, y location value. The second UISwitch is located below the first one.
           switch1.frame.origin = CGPoint(x: switch0X, y:switch0Y + 50)
           
           // The second UISwitch is turned on by default.
           switch1.setOn(true, animated: true)
           
           // Register a function to process second UISwitch's value changed event.
           switch1.addTarget(self, action: #selector(turnSecondSwitch), for: UIControl.Event.valueChanged)
           
           // Add the second UISwitch to the screen root view.
           self.view.addSubview(switch1)
           
       }
   
       // This function will be invoked when the first UISwitch component is pressed.
       @IBAction func turnSwitch(_ sender: UISwitch) {
           
           // Get first UISwitch current status.
           let switchStatus:Bool = sender.isOn
           
           // Change the label text and second UISwitch status accordingly.
           if(switchStatus){
               label.text = "First switch is turned on"
               
               switch1.setOn(false, animated: true)
           }else{
               label.text = "First switch is turned off"
               
               switch1.setOn(true, animated: true)
           }
           
       }
       
       // This function will be called when user turn on/off the second UISwitch object.
       @objc func turnSecondSwitch(srcObj: UISwitch){
           
           // Get second UISwitch current status.
           let switchStatus:Bool = srcObj.isOn
           
           // Change the label text and first UISwitch status accordingly.
           if(switchStatus){
               label.text = "Second switch is turned on"
               
               `switch`.setOn(false, animated: true)
           }else{
               label.text = "Second switch is turned off"
               
               `switch`.setOn(true, animated: true)
           }
           
       }
       
   }