iOS 5 : UIStepper Control

November 2, 2011

There is a new pre-built control in iOS 5 for incrementing or decrementing a value, UIStepper. The control has two buttons aligned horizontally, one labeled with a plus (+) the other a minus (-).

One nice feature is a continuous option, wherein if the user presses and holds down either +/- button, the stepper value is incremented repeatedly. The longer the button is held down, the faster the increment will occur. Also, you can have the increment value wrap around when a range of values is specified, for example, if you set min and max to 0 and 99 respectively, when the value reaches 99, the next value will be 0 (and vice-versa).

Below is a screenshot that shows the output of the example code below:

Below is a short code example showing the various properties available in UIStepper:

  // Create a label to show the value in the stepper
  label = [[UILabel alloc] initWithFrame:CGRectMake(10, 20, 100, 30)];    
  [label setTextColor:[UIColor whiteColor]];
  [label setBackgroundColor:[UIColor clearColor]];
  [label setTextAlignment:UITextAlignmentLeft];
  [label setText: @"Quantity:"];
  [[self view] addSubview:label];
 
  // Frame defines location, size values are ignored
  UIStepper *stepper = [[UIStepper alloc] initWithFrame:CGRectMake(120, 20, 0, 0)];    
 
  // Set action target and action for a particular value changed event
  [stepper addTarget:self action:@selector(stepperPressed:) forControlEvents:UIControlEventValueChanged];
 
  // Set min and max
  [stepper setMinimumValue:0];
  [stepper setMaximumValue:99];
 
  // Value wraps around from minimum to maximum
  [stepper setWraps:YES];
 
  // If continuos (default), changes are sent for each change in stepper,
  // otherwise, change event occurs once user lets up on button
  [stepper setContinuous:NO];
 
  // To change the increment value for each step
  // (default is 1)
  [stepper setStepValue:10];