iOS UIStepper

In this tutorial, we’ll be discussing and implementing the UIStepper Control in our iOS Application.

UIStepper

UIStepper is a basic UI control element that is used to increment/decrement values. This UI element is commonly used in shopping cart applications to increase or decrease the quantity.

A UIStepper consists of the following important properties.

• minimum/maximum values – The upper and lower limits of the UIStepper.
• stepValue – The increment/decrement value. By default, this is 1. A stepValue property is a Double.
• autorepeat – If this is true, pressing and holding the button would keep incrementing/decrementing the value. Otherwise pressing would increment/decrement only once. By default this is true.
• continuous – If this is true, the value would be changed immediately as soon as the button is touched. By default it is true.
• wrap – When this is true, the UIStepper increments/decrements in cycles. That means that once the minimum value is reached, decrementing further would start from the maximum value and vice-versa.
  When this is false once the UIStepper reaches the min/max you cannot click any further. The buttons get disabled as well.

Some more important properties and functions –

• tintColor – Used to set the color of the key elements of the UIStepper.
• setIncrementImage(image:, for:) – Sets the image for the increment button for the state assigned. A UIImage instance is passed. The states can be normal, focused, highlighted.
• setDecrementImage(image:, for:) – Sets the same for the decrement button.
• setDividerImage() – Used to set the divider image.

We’ll look at the click listener functions in the XCode project that we implement next.

Implementation

Create a new XCode project. In your Main.storyboard, drag a UIStepper and a Label on the ViewController as shown below:

1. Set the constraints on the UIStepper to center horizontal and vertical in the parent. Set the Label to center horizontal and add a vertical spacing to it from the UIStepper. Link these Outlets to the ViewController.swift
2. In the right pane the attributes can be changed. Or they can be done programmatically.

The ViewController.swift code is given below:

Copy
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var myStepper: UIStepper!
    override func viewDidLoad() {

        super.viewDidLoad()

    myStepper.addTarget(self, action: #selector(ViewController.stepperValueChanged(_:)), for: .valueChanged)
    }
    
    
    @objc func stepperValueChanged(_ sender:UIStepper!)
    {
        label.text = String(sender.value)
    }
}

Using the addTarget method we set the function to be called when the value of the UIStepper is changed by setting the event to valueChanged.

In the stepperValueChanged function, we get the current step value using sender.value and set it on the Label.

sender.value is of the type Double, so we’ve converted it into a String.

The output when the application is run on a simulator is:

The value is displayed in Decimal(Double). When the UIStepper button is pressed, it keeps incrementing and goes over the maximum value which was 20.

autorepeat and wrap. No continuous.

Copy
myStepper.isContinuous = false

No Autorepeat, No wrap, No continuous

Copy
myStepper.isContinuous = false
myStepper.autorepeat = false
myStepper.wraps = false

As you can see the + button is disabled.

Adding Tint Color and Step Value

In order to display an Integer value, we need to convert the double to Int first and then to a String.

Copy
label.text = String(sender.value)

To add a Tint color and step value, set the following inside the viewDidLoad method.

Copy
myStepper.tintColor = UIColor.brown
myStepper.stepValue = 2.0

The output of the application in action is :

Let’s create another UIStepper in which we’ll set custom images.

Creating UIStepper Programmatically

In the following ViewController.swift, we’ve updated the viewDidLoad method to add a custom UIStepper with image assets set on the left, right and divider elements. You can find the images in the project source code attached at the end of this tutorial.

We’ve added the AutoLayout constraints programmatically as well:

Copy
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var myStepper: UIStepper!
    override func viewDidLoad() {

        super.viewDidLoad()

        myStepper.tintColor = UIColor.brown
        myStepper.stepValue = 2.0
        myStepper.addTarget(self, action: #selector(ViewController.stepperValueChanged(_:)), for: .valueChanged)

        
        let customStepper = UIStepper()
        customStepper.minimumValue = 10
        customStepper.maximumValue = 100
        customStepper.tintColor = UIColor.red

        customStepper.setIncrementImage(UIImage(named: "happy.png"), for: .normal)
        customStepper.setDecrementImage(UIImage(named: "sad.png"), for: .normal)
        customStepper.setDividerImage(UIImage(named: "divider.png"), forLeftSegmentState: .normal, rightSegmentState: .normal)
        
        customStepper.translatesAutoresizingMaskIntoConstraints = false
        
        customStepper.addTarget(self, action: #selector(ViewController.stepperValueChanged(_:)), for: .valueChanged)
        
        self.view.addSubview(customStepper)
        
        [
        customStepper.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
        customStepper.topAnchor.constraint(equalTo: myStepper.bottomAnchor, constant: 20)
            ].forEach{$0.isActive = true}
    
    }
    
    
    @objc func stepperValueChanged(_ sender:UIStepper!)
    {
        label.text = String(Int(sender.value))
    }
}

The output of the application in action is given below:

As you can see the tintColor gets applied on the images as well.

This brings an end to this tutorial. You can download the project from the link below.

About Anupam Chugh

He loves learning new stuff in Android and iOS. Shoot him queries.