The UIPickerView control is a simple way to display a number of choices to the user and respond depending on the choice made. A picker control works in a similar manner to the table view control. So let’s see how it works!
Start Xcode, select “Create a new Xcode project,” choose the Single View Application template, and click Next. Name the project PickerDemo, and select the following options:
Click Next, choose a location to save the project, and click Create.
Open the ViewController.xib file, and drag a picker view from the library to the main view. Center it, and change the width to be less than the entire width of the screen. When you are done, the view should look something like this:
Right click on the picker view, and drag from the two circles to the right of dataSource and delegate to the File’s Owner object:
Open the ViewController.h file, and make these changes:
@interface ViewController : UIViewController
<UIPickerViewDelegate, UIPickerViewDataSource>
@property (nonatomic, strong) NSArray *pickerContent;
@end
In order to control the display of the picker view, the ViewController must adopt both the UIPickerViewDelegate and UIPickerViewDataSource protocols. We also add an array property to hold the content that will be displayed in the picker view.
Open ViewController.m and make these changes:
@interface ViewController ()
@end
@implementation ViewController
@synthesize pickerContent;
– (NSArray *)pickerContent
{
if(!pickerContent) {
pickerContent = [[NSArray alloc] initWithObjects:
@"Red", @"Green",
@"Blue", @"Yellow",
@"Magenta", @"Cyan", nil];
}
return pickerContent;
}
#pragma mark – Picker Datasource:
– (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
return 1;
}
– (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
return self.pickerContent.count;
}
#pragma mark – Picker Delegate:
– (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
return [self.pickerContent objectAtIndex:row];
}
– (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
switch (row) {
case 0:
self.view.backgroundColor = [UIColor redColor];
break;
case 1:
self.view.backgroundColor = [UIColor greenColor];
break;
case 2:
self.view.backgroundColor = [UIColor blueColor];
break;
case 3:
self.view.backgroundColor = [UIColor yellowColor];
break;
case 4:
self.view.backgroundColor = [UIColor magentaColor];
break;
case 5:
self.view.backgroundColor = [UIColor cyanColor];
break;
default:
break;
}
}
#pragma mark – ViewController delegate:
– (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
– (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
}
– (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}
@end
After synthesizing the properties, we override the getter of pickerContent in order to lazily instantiate it if is does not yet exist.
The number of components in a picker view is the number of “wheels” the picker will have, in this case, we return 1 from the numberOfComponentsInPickerView: method to indicate the picker should have only one wheel. Each component has a number of rows, this is set by returning the count of the pickerContent array in pickerView: numberOfRowsInComponent:. These two methods are both required; they are the only methods of the UIPickerViewDataSource protocol.
The actual display of the rows in the picker view is done by pickerView: titleForRow: forComponent:. Here, we simply return the string in pickerContent at the index given by the row parameter of the method. At this point the picker view will display and the user can spin the wheel, but nothing will happen when the wheel stops on a selection.
The pickerView: didSelectRow: inComponent: method defines the action to take when the picker lands on a particular row. Here, we set the background color depending on the row selected. Since the datasource of the picker is an NSArray, the ordering Red, Green, Blue, Yellow, Magenta, Cyan will be preserved. If an NSDictionary is used as the data source however, we cannot depend on the order of the keys.
Run the application, and select different colors in the picker to see the result:
Note that in order to see a red background color, some other color must first be selected, then a selection of “Red” will change the background. The fix for this is very simple. Go ahead and implement this fix as an exercise!