Stepper in iOS Swift - Mini App: Build & Ship

Build: Stepper Demo

This screen shows a stepper control that lets the user increase or decrease a number. The current number is displayed in the center.

Target UI

---------------------
|                   |
|       0           |
|                   |
|   [-]     [+]     |
|                   |
---------------------

Display a number starting at 0 in the center of the screen.

Add a UIStepper below the number with minus and plus buttons.

When the user taps plus, the number increases by 1.

When the user taps minus, the number decreases by 1.

The number label updates immediately when the stepper changes.

Starter Code

iOS Swift

import UIKit

class StepperViewController: UIViewController {

    let numberLabel = UILabel()
    let stepper = UIStepper()

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

        numberLabel.text = "0"
        numberLabel.font = UIFont.systemFont(ofSize: 48)
        numberLabel.textAlignment = .center
        numberLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(numberLabel)

        stepper.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(stepper)

        // TODO: Add target action for stepper value change
        // TODO: Add constraints for numberLabel and stepper
    }

    // TODO: Implement method to update numberLabel when stepper changes
}

Task 1

Task 2

Task 3

Task 4

Solution

iOS Swift

import UIKit

class StepperViewController: UIViewController {

    let numberLabel = UILabel()
    let stepper = UIStepper()

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

        numberLabel.text = "0"
        numberLabel.font = UIFont.systemFont(ofSize: 48)
        numberLabel.textAlignment = .center
        numberLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(numberLabel)

        stepper.minimumValue = 0
        stepper.maximumValue = 100
        stepper.stepValue = 1
        stepper.value = 0
        stepper.translatesAutoresizingMaskIntoConstraints = false
        stepper.addTarget(self, action: #selector(stepperValueChanged), for: .valueChanged)
        view.addSubview(stepper)

        NSLayoutConstraint.activate([
            numberLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            numberLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -40),

            stepper.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            stepper.topAnchor.constraint(equalTo: numberLabel.bottomAnchor, constant: 20)
        ])
    }

    @objc func stepperValueChanged(_ sender: UIStepper) {
        numberLabel.text = String(Int(sender.value))
    }
}

We set up a UILabel to show the number and a UIStepper below it. The stepper's minimum is 0 and maximum is 100, stepping by 1. We add a target action for the stepper's value change event. When the user taps plus or minus, the stepperValueChanged method updates the label text to the current stepper value. Auto Layout centers the label and places the stepper below it with spacing. This creates a simple interactive stepper screen.

Final Result

Completed Screen

---------------------
|                   |
|       5           |
|                   |
|   [-]     [+]     |
|                   |
---------------------

Tapping [+] increases the number by 1 and updates the label.

Tapping [-] decreases the number by 1 and updates the label.

The number never goes below 0 or above 100.

Stretch Goal

Add a label below the stepper that shows 'Current value: X' updating live with the stepper.

💡 Hint

Create a new UILabel, add it below the stepper with constraints, and update its text inside the stepperValueChanged method.