iPhone SDK Articles
Apple provides a control knows as the UIPickerView, with which a user can select an item from a list. In this tutorial you will learn how to create a simple picker view. Click on “Read more…” to continue
Introduction
The picker view lets the user select an item from a list. In this tutorial, you will learn how easy it is to configure a picker view and respond to events. This is how the app will look like
Creating the project
Create a new project by selecting “Windows-Based Application”, I have named my project “PickerView”. I also added another view called “PickerView” and created a view controller for the view called “PickerViewController”. Add a UIPickerView to the view and create all the right connections. The “PickerViewController” implements two protocols and this is how the header file looks like
//RootViewController.h #import <UIKit/UIKit.h> @interface PickerViewController : UIViewController <UIPickerViewDataSource, UIPickerViewDelegate> { IBOutlet UIPickerView *pickerView; NSMutableArray *arrayColors; } @end
The connections of the picker view looks like this
This is how the UIPickerView is added to the subview of the window.
//RootViewController.m - (void)applicationDidFinishLaunching:(UIApplication *)application { pvController = [[PickerViewController alloc] initWithNibName:@"PickerView" bundle:[NSBundle mainBundle]]; [window addSubview:pvController.view]; // Override point for customization after application launch [window makeKeyAndVisible]; }
Creating the data source
Lets create a data source, with all the colors in a rainbow. The array is declared in the header file and released in the dealloc method. It is populated in viewDidLoad method and this is how the code looks like
//PickerViewController.m - (void)viewDidLoad { [super viewDidLoad]; arrayColors = [[NSMutableArray alloc] init]; [arrayColors addObject:@"Red"]; [arrayColors addObject:@"Orange"]; [arrayColors addObject:@"Yellow"]; [arrayColors addObject:@"Green"]; [arrayColors addObject:@"Blue"]; [arrayColors addObject:@"Indigo"]; [arrayColors addObject:@"Violet"]; }
The picker view can be divided into components, we need to specify how many components to display. This is done in numberOfComponentsInPickerView method. This is how the source code looks like
//PickerViewController.m - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)thePickerView { return 1; }
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. This is how the source code looks like
//PickerViewController.m - (NSInteger)pickerView:(UIPickerView *)thePickerView numberOfRowsInComponent:(NSInteger)component { return [arrayColors count]; }
The method pickerView:titleForRow:forComponent gets called n number of times, where n is the number returned in pickerView:numberOfRowsInComponent. This is how the source code looks like
//PickerViewController.m - (NSString *)pickerView:(UIPickerView *)thePickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component { return [arrayColors objectAtIndex:row]; }
In the above code, we return the object at index using the row parameter. Here we ignored the component parameter, as we only have one component to display. If you have more then one component, then we return the row present in that given component. Run your application to see the values in the picker view.
Handling Events
The method pickerView:didSelectRow:inComponent is called when an item is selected in the picker view. In the example, I simply log the selected color and the row number. This is how the code looks like
//PickerViewController.m - (void)pickerView:(UIPickerView *)thePickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component { NSLog(@"Selected Color: %@. Index of selected color: %i", [arrayColors objectAtIndex:row], row); }
Conclusion
Picker view is a perfect control to display a list of items, from which one single item can be selected. In this tutorial, we saw how easy it is to configure a picker view and respond to events. I hope this tutorial has helped you in some little way. Stay tuned for some more tutorials on the UIPickerView object.
Happy Programming,
iPhone SDK Articles
Attachments
Suggested Readings
If you enjoyed this article, please consider sharing it!
hi, how can i do a vertical uipicker view with the height flexible!?
thanks!!
Can anybody explain how to implement two same views (e.g two table views) in same view/window. I tried it to have, but i experienced that we cant pass the different values in those. plese explain with complete example.Am very much new to these application.
Nice tutorial..it really helped alot..
>hello and thanks for these tutorials.
i followed your tutorial for creating a tab bar controller, and i’m trying to integrate a picker on one of the tabs. by following this tutorial i managed to create the picker onto a view, which is shown over the tab bar controller view if the picker code (in the main app delegated) is inserted after the call for the tab bar controller, or beneath it, if the picker code is inserted before the tab bar controller code.
how do i make the picker appear on one of the tabs in the tab bar controller?
thanks for reading.
>@James You can load another view like this If the picker view is added to a view with a navigation controller.
- (void)pickerView:(UIPickerView *)thePickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
UIViewController *vc = [[UIViewController alloc] initWithNibName:name bundle:[NSBundle mainBundle]];
[self.navigationController pushViewController:vc animated:YES];
}
Hope this helps
If you have any more questions, please send me an e-mail and I will be happy to help you more.
Happy Programming,
iPhone SDK Articles
>is it possible to make it so when a row in the uipickerview is selected and the user presses a button it goes to a xib (nib) with more info and other stuff. i.e. a list of hotels “shoreline hotel”, “motel 8? etc. “shoreline hotel” is selected and the user presses a button “go to hotel” and it goes to another xib with details of the hotel, pictures, and other info.
>if returning more than 1 from numberOfComponentsInPickerView, can each component contain different parameters? i.e.:
component [0] contains 1 through 10, and component [1] contains something else, like a char, or string.
>Hello,
I was reading the articles on how to make a UIPickerView and UITableView, but i could not find the code for when you select one of the items it goes to another window i.e. i select “red” then it goes to another page with info. If you could please help it would be much appreciated.
Thank,
James
>First of all, your tutorials are great! Good job. I have to admit not coming from the Mac UI ToolKit Cocoa world, this drag and drop stuff in the interface builder is driving me crazy. But I digress…
Here’s what I’m curious about…
1) Like ytk above, I’m looking to add two different pickers to the same window. I know how to add multiple components to a single picker, but the UI I’m looking for is a little different. Let’s say I was going to record stats for a team sport. I’d like one picker to be the player name, and then a different picker (that has multiple sections) be the stats for the selected player. So if I change the player, I want to reset the second picker with the last known stats for that player.
Anyway, I’m assuming I need multiple picker controllers, etc… and that’s where I’m getting stuck
2) Similarly, I want to have a picker and a table on the same view, or possibly a picker inside the cell of a table. I can get tables to work fine, and pickers to work fine, but when I try to get them working together I am getting confused about how/where to create these extra controllers. All the examples I can find seem to make the controller derived from the view itself. And I think I want 1 view with multiple controllers. Or maybe I need multiple views embedded in a top most view.
Can you point me toward a tutorial for that?
I apologize in advance if these are naive questions.
Thanks in advance!
>@ytk Do you mean display components in the picker view?
If yes, simply return n in numberOfComponentsInPickerView where n is the number of components you want to display. You would continue using pickerView:titleForRow:forComponent as shown in this tutorial but return the data for a specific component.
I hope this helps.
Happy Programming,
iPhone SDK Articles
>@Kieran Glad I could help. Yes the protocol in objective-c really makes programming easy and fun for the iPhone
Happy Programming,
iPhone SDK Articles
>Very nice. Do you have tutorial of how to put multiple picker?
>Excellent, thanks this really helped me. The methods are very similar to the table view which is good.
>@Humberto Good catch with the image not showing up. I had some bandwidth issues, which seems to be resolved.
The image now shows up now.
Glad you enjoyed the tutorials.
Happy Programming,
iPhone SDK Articles
>This link is not working: The connections of the picker view looks like this.
Again, very nice and helpful ALL your tutorials.
Humberto
>@Jong-Hyun B You should be able to download it from here http://sites.google.com/site/iphonesdktutorials/sourcecode/UIPickerViewPart1.zip?attredirects=0
Try Safari
Happy Programming,
iPhone SDK Articles
>hi
I wasn’t able to download the source code. Is it working? or is it my computer?
John