Change Values with UIStepper

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.

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 UIStepperDemo and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices, and that the Use Storyboards is deselected and Use Automatic Reference Counting checkboxes are selected (Unit Tests will not be necessary for this project).

Go to ViewController.xib and drag a label and a stepper to the view. Select the label and in the property inspector change the font in System Bold 25.0 and select the center alignment button.  The view should look like this.

In ViewController.m create the following IBOutlet properties in the @interface section.

@property (nonatomic, weak) IBOutlet UILabel *valueLabel; 
@property (nonatomic, weak) IBOutlet UIStepper *stepper;

Also, define a IBAction method, this method will be called when a stepper button is clicked.

- (IBAction)stepperValueChanged:(UIStepper *)sender;

In ViewController.xib make the follwoing connections:

  1. Label ->  IBOutlet valueLabel
  2. UIStepper -> IBOutlet stepper
  3. UIStepper -> IBAction stepperValuechanged

Change the viewDidLoad method into

- (void)viewDidLoad 
[super viewDidLoad];

self.view.backgroundColor = [UIColor yellowColor];
self.stepper.wraps = YES; self.stepper.autorepeat = YES;
NSUInteger value = self.stepper.value; self.valueLabel.text = [NSString stringWithFormat:@"%02d", value];

self.stepper.maximumValue = 10;

The stepper class has a few properties:

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

The valueLabel is getting the initial value of  the stepper, which is zero by default. Implement the stepperValueChanged method

- (IBAction)stepperValueChanged:(UIStepper *)sender 
NSUInteger value = sender.value;
self.valueLabel.text = [NSString stringWithFormat:@"%02d", value];

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 UIStepperDemo at the ioscreator repository on github.