UIPickerView sample

UI to select a state from the picker to update the image/label. The arrow button controls the visibility of the picker.

UI to select a state from the picker to update the image/label. The arrow button controls the visibility of the picker.

There is no built-in drop down list in iPhone SDK. You’ll need to create the interaction from the combination of the Picker and some other control, e.g., a button. Here are the steps to create and initialize a UIPickerView for all the 50 States:

Start Interface Builder and drag a Picker View object from the Library tool to the View object. This will create a UIPickerView object for you. Alternatively you can programmatically create this object in Xcode. But it is easier to use the IB. If you now build and run your project, you wont see the picker. To see it you’ll need to set the data source and delegate.

In IB, control-click on the Picker and then drag and connect the dataSource and delegate outlets to the File’s Owner for the view controller. Now if you build and run your application, you’ll see an empty picker. The control-click on the picker is a short cut for connecting the data source and the delegate properties. In addition, you’ll need to connect the picker to your view controller to create the object so that you can access it in Xcode. You do this by dragging the New Referencing Outlet from the IB’s Picker VIew Connection to the File’s Owner object in the xib file view. Alternatively, when you control-click, you can drag a New Referencing Outlet from the popup.

Next it would be helpful to define a class that denotes an item in the picker. Here is how you would refer to picker item class in the view controller.

@interface Test2ViewController : UIViewController {

	IBOutlet UIPickerView *mypicker;
	NSArray *pickerItems;
	StatesPickerItem *currentItem;

@property (nonatomic, retain) UIPickerView *mypicker;


Here is the interface and implementation for the picker item class:

#import <Foundation/Foundation.h>

@interface StatesPickerItem : NSObject {
	NSString *displayName;
	NSString *stateValue;
	UIImage *stateFlag;

@property (nonatomic, retain) NSString *displayName;
@property (nonatomic, retain) NSString *stateValue;
@property (nonatomic, retain) UIImage *stateFlag;

-(id)initWithName:(NSString *)name value:(NSString *)value;


and here is its implementation:

#import "StatesPickerItem.h"

@implementation StatesPickerItem
@synthesize displayName, stateValue;

-(id)initWithName:(NSString *)name value:(NSString *)value flag:(UIImage *) flag {
	self = [super init];
	if (self != nil) {
		self.displayName = name;
		self.stateValue = value;
                self.stateFlag = flag;
	return self;

- (void)dealloc {
	[displayName release];
	[stateValue release];
	[stateFlag release];
	[super dealloc];

Next you need to add the picker view to the view controller.

#import "StatesPickerItem.h"

@interface TestViewController : UIViewController {
	IBOutlet UIPickerView *mypicker;
	NSArray *pickerItems;	
	IBOutlet UILabel *stateslabel;
	StatesPickerItem *currentItem;
	IBOutlet UIImageView *currentFlag;
	IBOutlet UIButton *setStateButton;

@property (nonatomic, retain) UIPickerView *mypicker;
@property (nonatomic, retain) UILabel *stateslabel;
@property (nonatomic, retain) UIImageView *currentFlag;
@property (nonatomic, retain) UIButton *setStateButton;

- (IBAction)setStateButtonPressed:(id)sender;


In the control viewer implementation, you’ll need to initialize the picker list and define the picker delegate methods.

- (void)viewDidLoad {
    [super viewDidLoad];
	pickerItems = [[NSArray alloc] initWithObjects:
				   [[[StatesPickerItem alloc] initWithName:@"Alabama" value:@"AL" flag:[UIImage imageNamed:@"Alabama.png"]] autorelease],
				   [[[StatesPickerItem alloc] initWithName:@"Alaska" value:@"AK" flag:[UIImage imageNamed:@"Alaska.png"]] autorelease],
				   [[[StatesPickerItem alloc] initWithName:@"Arizona" value:@"AZ" flag:[UIImage imageNamed:@"Arizona.png"]] autorelease],
				   [[[StatesPickerItem alloc] initWithName:@"California" value:@"CA" flag:[UIImage imageNamed:@"California.png"]] autorelease],
				   [[[StatesPickerItem alloc] initWithName:@"Wyoming" value:@"WY" flag:[UIImage imageNamed:@"Wyoming.png"]] autorelease], nil];
	for (StatesPickerItem *item in pickerItems) {
		[mypicker selectRow:[pickerItems indexOfObject:item] inComponent:0 animated:YES];
	mypicker.hidden = YES;
	[mypicker selectRow:(NSInteger)3 inComponent:0 animated:YES];

#pragma mark ---- UIPickerViewDataSource delegate methods ----

// returns the number of columns to display.
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
	return 1;

// returns the number of rows
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
	return [pickerItems count];

#pragma mark ---- UIPickerViewDelegate delegate methods ----

// returns the title of each row
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
	currentItem = [pickerItems objectAtIndex:row];
	return currentItem.displayName;

// gets called when the user settles on a row
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
	currentItem = [pickerItems objectAtIndex:row];
	stateslabel.text = currentItem.displayName;
	currentFlag.image = currentItem.stateFlag;

- (IBAction)setStateButtonPressed:(id)sender {
	mypicker.hidden = [mypicker isHidden] ? NO : YES;

One Response to “UIPickerView sample”

  1. ambuj shukla Says:

    how to insert image in pickerview afer text

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

%d bloggers like this: