iOS 6 : Set UIStepper Increment And Decrement Images

October 8, 2012

Prior to iOS 6, the increment and decrement images in a UIStepper control were fixed (+ and -). You can now specify custom images for each state.

The pre-iOS 6 control looks as follows, the first image is the default state, the second image shows the rightmost control as active (selected):

Let’s update the control with four new images:, left and right arrows as well as selected states for both arrows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 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];
 
// New iOS 6 stuff follows
[stepper setTintColor:[UIColor colorWithRed:0.000 green:0.000 blue:0.630 alpha:1.000]];
 
// Notice the state "Normal"
[stepper setIncrementImage:[UIImage imageNamed:@"rightArrow.png"] forState:UIControlStateNormal];
[stepper setDecrementImage:[UIImage imageNamed:@"leftArrow.png"] forState:UIControlStateNormal];
 
// Notice the state "Highlighted"
[stepper setIncrementImage:[UIImage imageNamed:@"rightArrowSelected.png"] forState:UIControlStateHighlighted];
[stepper setDecrementImage:[UIImage imageNamed:@"leftArrowSelected.png"] forState:UIControlStateHighlighted];
 
[[self view] addSubview:stepper];

The new look follows:

Notice on line 12 that iOS 6 also includes the option to set the tint for UIStepper.