Toggle switch in iOS Swift - Mini App: Build & Ship

Build: Toggle Switch Screen

This screen shows a toggle switch that the user can turn on or off. When the switch is on, a label below it says "Switch is ON". When off, the label says "Switch is OFF".

Target UI

-----------------------
| Toggle Switch Screen |
-----------------------
|                     |
|    [  UISwitch  ]   |
|                     |
|   Switch is OFF     |
|                     |
-----------------------

Add a UISwitch centered horizontally near the top.

Add a UILabel below the switch to show the switch state text.

When the switch is toggled, update the label text to "Switch is ON" or "Switch is OFF" accordingly.

Use Auto Layout to center the switch and label vertically spaced.

The label text should update immediately when the switch changes.

Starter Code

iOS Swift

import UIKit

class ToggleSwitchViewController: UIViewController {

    let toggleSwitch = UISwitch()
    let stateLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground

        // TODO: Add toggleSwitch to view and set constraints

        // TODO: Add stateLabel to view and set constraints

        // TODO: Set initial label text

        // TODO: Add target action for toggleSwitch value change
    }

    // TODO: Implement method to update label text when switch changes
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

iOS Swift

import UIKit

class ToggleSwitchViewController: UIViewController {

    let toggleSwitch = UISwitch()
    let stateLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground

        toggleSwitch.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(toggleSwitch)
        NSLayoutConstraint.activate([
            toggleSwitch.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            toggleSwitch.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40)
        ])

        stateLabel.translatesAutoresizingMaskIntoConstraints = false
        stateLabel.textAlignment = .center
        stateLabel.font = UIFont.systemFont(ofSize: 18)
        stateLabel.text = "Switch is OFF"
        view.addSubview(stateLabel)
        NSLayoutConstraint.activate([
            stateLabel.topAnchor.constraint(equalTo: toggleSwitch.bottomAnchor, constant: 20),
            stateLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        ])

        toggleSwitch.addTarget(self, action: #selector(switchToggled), for: .valueChanged)
    }

    @objc func switchToggled() {
        if toggleSwitch.isOn {
            stateLabel.text = "Switch is ON"
        } else {
            stateLabel.text = "Switch is OFF"
        }
    }
}

We add a UISwitch and UILabel to the view and use Auto Layout to center them horizontally. The switch is placed near the top with some padding from the safe area. The label is placed below the switch with vertical spacing.

We set the label's initial text to "Switch is OFF". Then we add a target action to the switch for the .valueChanged event. When the switch toggles, the switchToggled method updates the label text to show the current state.

This approach keeps the UI simple and responsive, and the label updates immediately when the user toggles the switch.

Final Result

Completed Screen

-----------------------
| Toggle Switch Screen |
-----------------------
|                     |
|    [  UISwitch  ]   |
|                     |
|    Switch is ON     |
|                     |
-----------------------

User taps the switch to toggle it on or off.

Label text below the switch updates instantly to "Switch is ON" or "Switch is OFF".

Stretch Goal

Add a second label below the state label that shows the current time when the switch was last toggled.

💡 Hint

Use DateFormatter to format the current time and update the label inside the switchToggled method.