UIStepper Tutorial in iOS8 with Swift

The UIStepper control  provides a simple way to change a numeral value. It consists of +/- symbols that increment/decrement an internal value. In this tutorial we will change the value of a label field using the UIStepper buttons. This tutorial makes use of Xcode 6 and is build for iOS8.

Update: February 6, 2017. The rewritten version in Swift for iOS 10 and Xcode 8 is available here.

Open Xcode and create a new Single View Application. For product name, use iOS8SwiftUIStepperTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

Go to the storyboard. In Xcode 6 view controllers are now square by default, so that you can create one user interface use just for multiple devices. In iOS8 you can layout the storyboard using constraints and size classes. Since this app is only going to be for the iPhone, you can disable size classes. In the File Inspector untick Use Size Classes.

Choose Keep size class data for: iPhone, and click Disable Size Classes.

Drag a Label and a Stepper to the View Controller. Select the Label and in the Attributes inspector change the font in System Bold 25.0 and select the center alignment button. Give the Label a text Value of "0". The Storyboard should look like this.

Select the Assistant Editor and open ViewController.swift. Ctrl and drag from the Label to the ViewController.swift and create the following Outlet.

Ctrl and drag from the Stepper to the ViewController.swift and create the following Outlet.

Repeat the preceding procedure, but now create an action.

Change the viewDidLoad method into

override func viewDidLoad() {
  stepper.wraps = true 
  stepper.autorepeat = true
  stepper.maximumValue = 10

The stepper class has a few properties:

  • wraps: if set to true stepping beyond maximumvalue will return to minimumvalue
  • autorepeat: If  set to true, the user pressing and holding on the stepper repeatedly alters value.
  • maximumvalue: the maximum value of the stepper

Implement the stepperValueChanged method

@IBAction func stepperValueChanged(sender: UIStepper) {
    valueLabel.text = Int(sender.value).description

The description value of the Stepper is assigned to the text property if the Label. Build and Run the projects, When the user clicks on the +/- symbols, the current value of the stepper will be assigned to the stepper label.

You can download the source code of the iOS8SwiftUIStepperTutorial at the ioscreator repository on github.