Steppers (UIStepper)

What is UIStepper?

UIStepper is a UI component in iOS that allows users to increment or decrement a value by tapping “+” or “−” buttons. It is commonly used for quantity selection, numeric input, volume control, and other step-based adjustments.

---

1. How to Add UIStepper in Swift

A. Adding UIStepper Programmatically

import UIKit

class ViewController: UIViewController {
    
    let stepper = UIStepper()
    let label = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Configure UIStepper
        stepper.frame = CGRect(x: 100, y: 200, width: 0, height: 0)
        stepper.minimumValue = 0
        stepper.maximumValue = 10
        stepper.stepValue = 1
        stepper.value = 5  // Default value
        
        // Add target action
        stepper.addTarget(self, action: #selector(stepperValueChanged(_:)), for: .valueChanged)
        
        // Configure Label
        label.frame = CGRect(x: 100, y: 250, width: 100, height: 30)
        label.text = "Value: \(stepper.value)"
        
        // Add to view
        view.addSubview(stepper)
        view.addSubview(label)
    }
    
    @objc func stepperValueChanged(_ sender: UIStepper) {
        label.text = "Value: \(Int(sender.value))"
    }
}

---

B. Adding UIStepper via Storyboard

1. Open Main.storyboard in Xcode.
2. Drag and drop a UIStepper and a UILabel onto your ViewController.
3. Connect them to your ViewController.swift file: @IBOutlet weak var stepper: UIStepper! @IBOutlet weak var label: UILabel! @IBAction func stepperValueChanged(_ sender: UIStepper) { label.text = "Value: \(Int(sender.value))" }
4. Set properties like min, max, and step values in the Attributes Inspector.

---

2. Customizing UIStepper

A. Changing Increment/Decrement Step Value

stepper.stepValue = 2  // Increases/decreases by 2

B. Setting Minimum & Maximum Values

stepper.minimumValue = 0
stepper.maximumValue = 20

C. Changing Appearance (Tint Color)

stepper.tintColor = .blue

D. Disabling Auto-Repeat (Default: True)

stepper.isContinuous = false  // Updates value only when released

E. Wrapping Values (Loop from Max to Min)

stepper.wraps = true  // If max is reached, it resets to min

---

3. Advanced Usage of UIStepper

A. Using UIStepper to Control Font Size

@objc func stepperValueChanged(_ sender: UIStepper) {
    label.font = UIFont.systemFont(ofSize: CGFloat(sender.value * 2))
}

B. Using UIStepper with a Progress Bar

let progressView = UIProgressView(progressViewStyle: .default)

override func viewDidLoad() {
    super.viewDidLoad()
    
    progressView.frame = CGRect(x: 100, y: 300, width: 200, height: 20)
    view.addSubview(progressView)
}

@objc func stepperValueChanged(_ sender: UIStepper) {
    progressView.progress = Float(sender.value) / 10
}

---

4. Summary of UIStepper Features

Feature	Code Example
Set min/max values	stepper.minimumValue = 0; stepper.maximumValue = 10
Change step value	stepper.stepValue = 2
Enable looping	stepper.wraps = true
Change tint color	stepper.tintColor = .red
Disable continuous stepping	stepper.isContinuous = false
Handle value changes	stepper.addTarget(self, action: #selector(stepperValueChanged(_:)), for: .valueChanged)

---

Conclusion

UIStepper is a simple yet powerful control that enhances user experience for numeric adjustments. It is lightweight, customizable, and integrates well with other UI components like labels, progress bars, and sliders.

Would you like help integrating UIStepper into a specific app feature? 🚀