Picking Values with the UIPicker View
Problem
You want to allow the users of your app to select from a list of values.
Solution
Use the UIPickerView class.
Discussion
A picker view is a graphical element that allows you to display a series of values to your users and allow them to pick one. The Timer section of the Clock app on the iPhone is a great example of this (Figure 1-10).
First let’s go to the top of the .m (implementation) file of our view controller and define our picker view:
@interface ViewController ()
@property (nonatomic, strong) UIPickerView *myPicker;
@end
@implementation ViewController
...
Now let’s create the picker view in the viewDidLoad method of our view controller:
- (void)viewDidLoad{
[super viewDidLoad];
self.myPicker = [[UIPickerView alloc] init];
self.myPicker.center = self.view.center;
[self.view addSubview:self.myPicker];
}
It’s worth noting that in this example, we are centering our picker view at the center of our view. When you run this app on iOS 7 Simulator, you will see a blank screen because the picker on iOS 7 is white and so is the view controller’s background.
The reason this picker view is showing up as a plain white color is that we have not yet populated it with any values. Let’s do that. We do that by specifying a data source for the picker view and then making sure that our view controller sticks to the protocol that the data source requires. The data source of an instance of UIPickerView must conform to the UIPickerViewDataSource protocol, so let’s go ahead and make our view controller conform to this protocol in the .m file:
@interface ViewController () <UIPickerViewDataSource, UIPickerViewDelegate>
@property (nonatomic, strong) UIPickerView *myPicker;
@end
@implementation ViewController ...
Good. Let’s now change our code in the implementation file to make sure we select the current view controller as the data source of the picker view:
- (void)viewDidLoad{ [super viewDidLoad];
self.myPicker = [[UIPickerView alloc] init];
self.myPicker.dataSource = self;
self.myPicker.center = self.view.center;
[self.view addSubview:self.myPicker];
}
After this, if you try to compile your application, you will get warnings from the compiler telling you that you have not yet implemented some of the methods that the UIPicker ViewDataSource protocol wants you to implement. The way to fix this is to press Com‐ mand+Shift+O, type in UIPickerViewDataSource, and press the Enter key on your keyboard. That will send you to the place in your code where this protocol is defined, where you will see something similar to this:
@protocol UIPickerViewDataSource<NSObject> @required
// returns the number of 'columns' to display.
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView;
// returns the # of rows in each component..
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component;
@end
Can you see the @required keyword there? That is telling us that whichever class wants to become the data source of a picker view must implement these methods. Good deal. Let’s go implement them in our view controller’s implementation file:
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
if ([pickerView isEqual:self.myPicker]){ return 1;
}
return 0;
}
- (NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
if ([pickerView isEqual:self.myPicker])
{
return 10;
}
return 0;
}
