How To Implement A Multicomponent Picker In iPhone?

This is the example of a Picker with two components or wheels, and each wheel will be independent of the other wheel. The left wheel will have a list of sandwich fillings, and the right wheel will have a selection of bread types.

Step 1: Create a new project from Xcode and select view-base application template.

Step 2: Adding the following code to the controller Header file.




Step 3: Double click .xib file to open the file in Interface Builder. Add a picker and abutton to te View, and ¬†then make the necessary connections. First, connect the doublePicker outlet on File’s Owner to the picker. Second, connect the DataSource and Delegate connections on the picker view to File’s Owner. Third, connect the Touch Up Inside event of the button to the buttonPressed action on File’s Owner. Now close your nib file and go back to Xcode.

Step 4: We need to add following code to our controller file. The buttonPressed method used when we request the selected row using those constants , kBreadComponent and kFillingComponent. There is a another method viewDidLoad: , we are just creating  arrays from a hard loadinglist of strings.




Step 5: Now compile and run your application on simulator.(See figure 1)

Figure 1: Multicomponent Picker View.

You can downloaded SourceCode from here DoubleComponentPicker 2

Leave a Comment:

JB says February 10, 2010

Nice tutorial. Do you know how to make a Picker with two components or wheels, and one wheel will be dependent on the other wheel? Or do you know of an example?

JB says February 10, 2010

Great tutorial. Do you know how to make a Picker with two components or wheels, and one wheel will be dependent on the other wheel?

Sushant says February 10, 2010

This is the example of Picker with two components or wheels. I think this example will help you.

John Parker says June 2, 2010

Hi there…

I have been playing with your code and it works fine with 2 wheels.
When I add the third wheel though, No matter what I do, the third when is the same as the first though the return text has the correct info. So I know that it is pulling the correct info from the array, it is just not displaying correctly. Please assist.

See code snippit:

#import “DoubleComponentPickerViewController.h”

@implementation DoubleComponentPickerViewController

@synthesize doublePicker;
@synthesize firstTypes;
@synthesize middleTypes;
@synthesize lastTypes;

NSInteger firstRow = [doublePicker selectedRowInComponent:kfirstComponent];
NSInteger middleRow = [doublePicker selectedRowInComponent:kmiddleComponent];
NSInteger lastRow = [doublePicker selectedRowInComponent:klastComponent];
NSString *first = [firstTypes objectAtIndex:firstRow];
NSString *middle = [middleTypes objectAtIndex:middleRow];
NSString *last = [lastTypes objectAtIndex:lastRow];
NSString *message = [[NSString alloc] initWithFormat:@”Your name is: %@ %@ %@.”,first, middle, last];
UIAlertView *alert = [[ UIAlertView alloc] initWithTitle:@”Full name”
[alert show];
[alert release];
[message release];

– (void)viewDidLoad
NSArray *firstArray = [[NSArray alloc] initWithObjects:
@”Willy”,@”Peter”,@”Michael”,@”Sam”,@”Bobby”, nil];
self.firstTypes = firstArray;
[firstArray release];

NSArray *middleArray = [[NSArray alloc] initWithObjects:
self.middleTypes = middleArray;
[middleArray release];

NSArray *lastArray = [[NSArray alloc] initWithObjects:
@”Jones”,@”Pearson”,@”Parker”,@”Hart”, @”Andersen”,nil];
self.lastTypes = lastArray;
[lastArray release];

[super viewDidLoad];

-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
return 3;

-(NSInteger)pickerView:(UIPickerView *)pickerView

if (component == kfirstComponent)
return[self.firstTypes count];
return[self.middleTypes count];
return[self.lastTypes count];

-(NSString *)pickerView:(UIPickerView *)pickerView
if (component == kfirstComponent)
return [self.firstTypes objectAtIndex:row];
return [self.middleTypes objectAtIndex:row];
return [self.lastTypes objectAtIndex:row];

– (void)didReceiveMemoryWarning
[super didReceiveMemoryWarning];

– (void)viewDidUnload

– (void)dealloc
[super dealloc];


Bob Schoenburg says June 7, 2010

Great. Saved me a lot of time trying to figure out how to do this. My picker has 3 wheels!

Donito says May 16, 2011

How can I set a multi select picker with checkmarks. Like this :

Please, help

Add Your Reply