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.

Practice

1. What is the main purpose of a Stepper in iOS Swift UI?

easy

A. To let users increase or decrease a numeric value by tapping plus or minus buttons.

B. To display a list of items in a scrollable view.

C. To navigate between different screens in the app.

D. To input text from the keyboard.

Solution

1. Step 1: Understand Stepper functionality

   A Stepper is a UI control that allows users to increment or decrement a value by tapping plus or minus buttons.

2. Step 2: Compare options with Stepper purpose

   Only To let users increase or decrease a numeric value by tapping plus or minus buttons. describes this behavior correctly; others describe unrelated UI elements.

3. Final Answer:

   To let users increase or decrease a numeric value by tapping plus or minus buttons. -> Option A

4. Quick Check:

   Stepper purpose = increase/decrease number [OK]

Hint: Stepper controls numbers with plus/minus taps [OK]

Common Mistakes:

• Confusing Stepper with text input controls
• Thinking Stepper navigates screens
• Assuming Stepper shows lists

2. Which of the following is the correct way to create a Stepper in SwiftUI with a binding to a variable count?

easy

A. Stepper(count: $count, range: 0...10) { Text("Count: \(count)") }

B. Stepper(value: $count, in: 0...10) { Text("Count: \(count)") }

C. Stepper(value: count, range: 0...10) { Text("Count: \(count)") }

D. Stepper($count, 0...10) { Text("Count: \(count)") }

Solution

1. Step 1: Recall Stepper initializer syntax

   The correct initializer uses value: Binding and in: ClosedRange parameters.

2. Step 2: Check each option

   Stepper(value: $count, in: 0...10) { Text("Count: \(count)") } matches the correct syntax with Stepper(value: $count, in: 0...10). Others have wrong parameter names or missing bindings.

3. Final Answer:

   Stepper(value: $count, in: 0...10) { Text("Count: \(count)") } -> Option B

4. Quick Check:

   Correct Stepper syntax = Stepper(value: $count, in: 0...10) { Text("Count: \(count)") } [OK]

Hint: Use value: $variable and in: range for Stepper [OK]

Common Mistakes:

• Forgetting $ for binding
• Using wrong parameter names like count or range
• Passing value without binding

3. What will be displayed when the user taps the plus button twice on this Stepper code?

@State private var count = 3
Stepper(value: $count, in: 1...5) { Text("Count: \(count)") }

medium

A. Count: 7

B. Count: 6

C. Count: 3

D. Count: 5

Solution

1. Step 1: Understand initial value and range

   The count starts at 3 and can only go from 1 to 5.

2. Step 2: Calculate value after two increments

   After two taps on plus, count increases by 2: 3 + 2 = 5, which is the max allowed.

3. Final Answer:

   Count: 5 -> Option D

4. Quick Check:

   Max limit caps count at 5 [OK]

Hint: Stepper value never exceeds max range [OK]

Common Mistakes:

• Ignoring max limit and expecting 6 or 7
• Not updating count on taps
• Confusing initial value with displayed value

4. Identify the error in this Stepper code snippet:

@State private var count = 0
Stepper(value: count, in: 0...10) { Text("Count: \(count)") }

medium

A. Missing $ before count in value binding

B. Range 0...10 is invalid for Stepper

C. Text label should not use \(count)

D. Stepper cannot use @State variables

Solution

1. Step 1: Check Stepper value parameter

   The value parameter requires a binding, so it must be $count, not just count.

2. Step 2: Verify other parts

   The range 0...10 is valid, Text label syntax is correct, and Stepper can use @State variables.

3. Final Answer:

   Missing $ before count in value binding -> Option A

4. Quick Check:

   Binding needs $ prefix [OK]

Hint: Always use $ for binding variables in Stepper [OK]

Common Mistakes:

• Passing variable without $ causes error
• Thinking range 0...10 is invalid
• Misunderstanding @State usage

5. You want a Stepper that starts at 10, goes up to 50, and increases by 5 each tap. Which code correctly sets this behavior?

hard

A. Stepper(value: $count, in: 10...50, step: 10) { Text("Count: \(count)") }

B. Stepper(value: $count, range: 10...50, step: 5) { Text("Count: \(count)") }

C. Stepper(value: $count, in: 10...50, step: 5) { Text("Count: \(count)") }

D. Stepper(value: $count, in: 10...50) { Text("Count: \(count)") }

Solution

1. Step 1: Identify correct Stepper parameters

   To set step size, use the step: parameter. The range uses in:.

2. Step 2: Check each option

   Stepper(value: $count, in: 10...50, step: 5) { Text("Count: \(count)") } correctly uses value: $count, in: 10...50, and step: 5. Stepper(value: $count, range: 10...50, step: 5) { Text("Count: \(count)") } uses wrong parameter range. Stepper(value: $count, in: 10...50) { Text("Count: \(count)") } misses step size. Stepper(value: $count, in: 10...50, step: 10) { Text("Count: \(count)") } uses wrong step size 10.

3. Final Answer:

   Stepper(value: $count, in: 10...50, step: 5) { Text("Count: \(count)") } -> Option C

4. Quick Check:

   Use in: range and step: size [OK]

Hint: Use step: to set increment size in Stepper [OK]

Common Mistakes:

• Using wrong parameter name 'range' instead of 'in'
• Forgetting to set step size
• Setting wrong step size