Using the New Stepper Control in iPhone

In Xcode 4 and iOS version 5, we have a new control available for use: the UIStepper control. The stepper control allows the user to increment or decrement a value. In this blog, we will see how to use stepper controls to implement a simple four – digit combination lock. So, let’s get started!

First, open Xcode and select “Create a new Xcode project.” Choose the Single View Application template, and click Next. Name the project “StepperLock” and choose options as shown below:

Click Next, choose a location to save the file, and click Create.

Once the application has been created, open the MainStoryboard.storyboard file by selecting it in the Project Navigator. Drag four UIStepper controls from the library to the view, and also drag a single UIButton and two UILabels. Change the text on the button to “Enter” and the text on the two labels to “Enter your combination” and “0000” . Your user interface should look something like:

Select all four of the stepper controls by dragging a selection box around them. In the Attributes inspector panel, change the Maximum value to 9 as shown:

This will change the value for all four of the stepper controls. If you wish, you may change the background color of the view to something more attractive.

Open the ViewController.h file, and add the properties and methods shown in bold below.

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (nonatomic, strong)IBOutlet UILabel *combination;
@property (nonatomic, strong)NSString *correctCombination;
@property (nonatomic, strong)IBOutlet UIStepper *stepper1;
@property (nonatomic, strong)IBOutlet UIStepper *stepper2;
@property (nonatomic, strong)IBOutlet UIStepper *stepper3;
@property (nonatomic, strong)IBOutlet UIStepper *stepper4;

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

@end

Now, return to the MainStoryboard.storyboard file, and wire up all of the controls as shown below. Note that all four steppers are wired to the “stepperValueChanged” method. We will user the value of each stepper to build the string in the combination label. When the Enter button is touched, the value in the label will be compared to the value of the correctCombination string. If the values are equal, we’ll set the background color of the main view to green, else we’ll set it to a red color.

Open the ViewController.m file, and add the bolded code shown here:

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

@synthesize combination;
@synthesize correctCombination;
@synthesize stepper1, stepper2, stepper3, stepper4;

- (IBAction)stepperValueChanged:(UIStepper *)sender
{
    self.combination.text = [NSString stringWithFormat:@"%d%d%d%d",
                             (long)stepper1.value, (long)stepper2.value,
                             (long)stepper3.value, (long)stepper4.value];
}

// listing continues:

- (IBAction)checkCombination:(UIButton *)sender
{
    if ([self.combination.text isEqualToString:self.correctCombination]) {
        self.view.backgroundColor = [UIColor greenColor];
    } else {
        self.view.backgroundColor = [UIColor redColor];
    }
}

- (void)viewDidLoad
{
    [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
    self.correctCombination = @"1961";
}
…

As usual, we first synthesize all of the properties declared in the header file. Then, the two action methods are defined.

In stepperValueChanged, we use the class method stringWithFormat (of NSString) to build a string comprised of the values of the four stepper controls. The value of a stepper control is a C double primitive type; note we cast each value to a long (long int) in order to display it as an integer type with the format specifier “%d” .

The next method (checkCombination) simply compares the text in the combination label to the text in the correctCombination string. If they are the same, the view’s background is set to green, otherwise, it is set to red. In a real application, we might push another view controller instead.

Run the application to verify that it works properly.