Share on Google+Share on Google+

iPhone Double Component In Picker

In this tutorial will learn how to use iPhone Picker View and also how to insert two different objects in different components by using two different array variables.

iPhone Double Component In Picker

In this tutorial will learn how to use iphone Picker View and how to insert two different objects in different components by using two different array variables. After adding objects to the Picker view, the selected objects in picker view will be displayed, when the button is clicked and the application is based on View Based Application.

Final View will look like this:

iphone picker view

Here will define the component which is fixed and then the Picker View and two array is declared and the property for each array is also declared. Action for the button is written in .h file so that when button is clicked the components selected by the user in Picker View will be displayed with OK button on the alert view.

Add this to view controller.h file:

#define kFillingComponent 0

#define kBreadComponent 1

IBOutlet    UIPickerView *mpicker;

    NSArray *marray2;

    NSArray *marray1;

@property(nonatomic, retain) NSArray *marray2;

@property(nonatomic, retain) NSArray *marray1;


First will synthesize the array variable and after that will write the method for the action in that will set the title for the button and the format which will be showed to the user when he/she selects the object. Uncomment the in it with nib name bundle function and after that lets create a data source, with the objects you want to add into the Picker View. The array is declared in the header file and released in the dealloc method. It is populated in view did load method.
The iPhone Picker View can be divided into number of Components required by the user, this is done in numberOfComponentsInPickerView method. Now that the Picker View knows how many Components it should expect, we need to specify how many rows it should display. This is done in pickerView:numberOfRowsInComponent And by counting the two different array will set the number of components. The method pickerView:titleForRow:forComponent get called m number of times, where m is the number returned in 
picker View:numberOfRowsInComponent.

Add this to view controller.m file:

@synthesize marray2, marray1;



    NSInteger breadRow = [mpicker selectedRowInComponent:kBreadComponent];

    NSInteger fillingRow = [mpicker selectedRowInComponent:kFillingComponent];

    NSString *bread = [self.marray2 objectAtIndex:breadRow];

    NSString *filling = [self.marray1 objectAtIndex:fillingRow];

    NSString *message = [[NSString alloc] initWithFormat:@"Your %@ and %@ will be right up.", filling, bread];

    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@" Thank you " message:message delegate:nil cancelButtonTitle:@" OK " otherButtonTitles:nil];

    [alert show];

    [alert release];

    [message release];


- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {

    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {


    return self;


 - (void)viewDidLoad {

 NSArray *new = [[NSArray alloc] initWithObjects:@"Catchup", @"Curry", @"Curd", @"Sause", @" Spicy ", nil];

 self.marray2 = new;

 [marray2 release];

 NSArray *old = [[NSArray alloc] initWithObjects:@"Veg Roll", @"Allu Paratha", @"Pav ", @"Chat ", @"Paneer Pakoda", @"Noodles", @"Manchuriya", nil];

 self.marray1 = old;

 [marray1 release];


- (void)dealloc {

    [super dealloc];

    [mpicker release];

    [marray2 release];

    [marray1 release];


- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView


    return 2;


- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component


    if (component == kBreadComponent)

      return [self.marray2 count];

    return [self.marray1 count];


- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component


    if (component == kBreadComponent)

      return [self.marray2 objectAtIndex:row];

    return [self.marray1 objectAtIndex:row];


After all this Make the connection with the Interface Builder.

Make connection with Interface Builder:

Finally press Build And Go Button.

Download Here



Posted on: September 30, 2009 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.


Advertisement null