Choose values with PickerView

The picker view is a slot-machine view to show one or more sets of values. Users select values by rotating the wheels so that the desired row of values aligns with a selection indicator. The user interface provided by a picker view consists of components and rows. A component is a wheel, which has a series of rows at indexed locations on the wheel. A UIPickerView must conform to the following delegates: UIPickerViewDataSource and UIPickerViewDelegate.

Update: Oct 14, 2014. The rewritten version in Swift for iOS 8 and Xcode 6 is available here.

Open Xcode and create a new Single View Application. For product name, use PickerDemo and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices, and that the Use Storyboards is deselected and Use Automatic Reference Counting checkboxes is selected (Unit Tests will not be necessary for this project).

Go to ViewController.m. Create a property in the @interface section

@property (nonatomic, weak) UIPickerView *pickerView;

In ViewController.m change viewDidLoad to

- (void)viewDidLoad
[super viewDidLoad];
self.pickerView = [[UIPickerView alloc] init]; =;

[self.view addSubView:self.pickerView];

We initialize the pickerView and display it at the center of the View. Build and Run, you should see the pickerView.

As you can see, the pickerview is empty. We must provide the pickerview with values. We do this by providing a Datasource which conforms to the UIPickerViewDataSource protocol. In Viewcontroller.m change the @interface line in

@interface ViewController () <UIPickerViewDataSource>

Next , in viewDidLoad assign the current view controller as the data source of the picker view.

self.pickerView.dataSource = self;

Next, we create an array with some color values. In the @interface section of ViewController.m create a instance variable.

NSMutableArray *colors;

In ViewDidLoad assign the colors to the array.

colors = [[NSMutableArray alloc] init]; 
colors = [@[@"Blue,@"Red",@"Green",@"Yellow"] mutableCopy];

The UIViewDataSource protocol requires delegate methods to define the number of components and rows of a picker. Implemement these methods in ViewController.m

- (NSinteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView 
return 1;

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
return [colors count];

We define one component with the number of rows equal to the number of array items. Build and Run.

As you can see the rows are visible. Now it's time to display the values into the rows. To do this we need a delegate which conforms to UIPickerViewDelegate. change the @interface line to

@interface ViewController () <UIPickerViewDataSource, UIPickerViewDelegate>

Next , in viewDidLoad assign the current view controller as the delegate of the picker view.

self.pickerView.delegate = self;

Finally, add the delegate method which conforms to the UIPickerviewDelegate protocol.

-(NSString *)pickerView:(UIPickerview *)pickerview titleRow:(NSInteger)row forComponent:(NSInteger)component 
return [colors objectAtIndex:row];

Every row will be loaded with an item of the colors array. Build and Run, you should see the colors inside the picker view.

You can download the source code of the PickerDemo at the ioscreator repository on github.