PickerView Workshop 1

If you are a new visitor to our site, please read the Getting Started guide.

A PickerView control enables your app user to select an item from a list. The PickerView control is compose of a component (wheel) and scrolling rows. The image below shows what the Picker View Control looks like when you drag it from the Object Library and place it on a view’s canvas.

A PickerView control can display one or more components and their index number are zero base. If you configured a PickerView control to display two components, then the first component’s index number is 0, the second component’s index number is 1. Rows in a component are zero base as well.

You can display rows of text, images, or both in a PickerView’s component. A row in a component is deemed to be selected when it is positioned in the highlighted strip. For example, the Piker View control in the image below has two components. The first component displays strings and the second component displays images. The highlighted strip shows the row the user picked.

Once you’ve place a PickerView control on a view’s canvas, you must do the follow to make its job of displaying one or more components and rows:

1. Conform your class to the PickerView protocols in the class’ interface file like this:

or in Interface Builder like this:

2. Implement these data source and delegate methods of the PickerViewControl in your class’ implementation file.

numberOfComponentsInPickerView:
This is a required method and it return the number of components there are in a PickerView control, so the control knows how many components (wheels) to display. If your PickerView control will only display a single component, then the method should return the number 1. If your PickerView control will display say 3 components, it should return the number 3.

numberOfRowsInComponent:
This is a required dataSource method and it return the total number of rows there are in a component of the PickerView control. This number is obtain by counting objects stored in the PickerView’s data source. The data source could be an Objective-C NSDictionary or an NSArray. If your PickerView control will display say, 3 components and it’s data source is an instance of the NSDictionary class; you’ll have to return the total number of entries there are in the dictionary for each component, via an if control structure or a case control structure.

If you fail to implement required dataSource methods of the PickerView control in your class’ implementation file, the app will work, but it will generate these warnings:

titleForRow:
This is an optional delegate method and it displays rows of text, images or both in a component. If the PickerView’s dataSource (an NSDictionary for example) contain three entries, then this method is called three times to display three rows of data in the PickerView’s component.

didSelectRow:
This is an optional delegate method and it highlights the component’s row the user picked.

reusingView:
This is an optional delegate method and it displays rows of text, images, or both in a component. If your PickerView’s data source (an NSDictionary for example) contain three entries, then this method is called three times to display three rows of data in the PickerView’s component.

If you implement the titleForRow: and reusingView: methods in your class, the PickerView control override’s the titleForRow: method. This means you should implement only one of these methods to display a component’s rows.

There are other delegate methods of the PickerView control you can implement in your class’ implementation file. You can learn about them by consulting the Apple Developer’s UIPickerView Class Reference documents.

Download The PickerView Project

OK, enough talk about the PickerView control and its methods. To really understand how the PickerView control and its protocol methods work, you’ll have to download this skeleton Xcode project. I used Xcode’s Tabbed Application template to create it.

PickerView

After unzipping the file, drag-and-drop the PickerView folder in the iOS Apps folder.

Design The First View Interface

Click the FirstViewController.xib file to load it in Interface Builder. Currently, there are only two Label controls on the view. One of them display: Select an item, the other display nothing. You will write code to display the item (row) the user picked. I want you to drag-and-drop a PickerView control from the Object Library and place it between the Label controls as shown in the image below. Adjust the PickerView control’s width so it look like what’s shown below.

I want you to declare these property variables in the FirstViewController class and conform it to the PickerView control’s data source and delegate protocols.

#import <UIKit/UIKit.h>
// Needed for connecting the PickerView control in IB
@property (strong, nonatomic) IBOutlet UIPickerView *itemPickerView;

// Needed for connecting the third Label control in IB
@property (strong, nonatomic) IBOutlet UILabel *lblItemSelected;

// This is the PickerView control's data source
@property (strong, nonatomic) NSArray *houseHoldObjects;
@end

Don’t forget to connect the IBOutlet property variables to corresponding controls in Interface Builder.

Implement The PickerView Protocol Methods

Once you’ve conformed the FirstViewController class to the PickerView’s data source and delegate protocols, you need to implement these methods of the PickerView control in the FirstViewController.m file.

/* The PickerView control's dataSource methods */
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
  return 1;
}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent (NSInteger)component
{
  return [self.houseHoldObjects count];
}

/* The PickerView control's delegate methods */
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
 return [self.houseHoldObjects objectAtIndex:row];
}

-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
 // Set the message Label's text color to green
 self.lblItemSelected.textColor = [UIColor colorWithRed: 0.09 green:0.63 blue:0.18 alpha:1.00];

 // Display content of the row the user picked, in the third Label control
 NSString *itemPicked = [self.houseHoldObjects objectAtIndex:row];
 self.lblItemSelected.text = [@"You picked, " stringByAppendingString:itemPicked];
}

Add Code in The viewDidLoad Method

I want you to add this code in the viewDidLoad method, which initialize the PickerView control’s data source, which is an NSArray variable called houseHoldObjects.

- (void)viewDidLoad
{
  [super viewDidLoad];
  // Initializde the NSArray object with 11 elements
  self.houseHoldObjects = self.houseHoldObjects = @[@"Garbage Can",
			@"Bathroom Sink",
			@"Flashlight",
			@"Stool",
			@"Arcade",
			@"Small TV",
			@"Cordless Phone",
			@"Stapler",
			@"Wall Clock",
			@"Wine Glass",
			@"Clock Radio"];
}

Run The Application

Run the application to test code you’ve added in the FirstViewController class files. See how the PickerView control display elements of the houseHoldObjects in the PickerView control. See how the Label below the PickerView control changes every time you pick an item (row) in the PickerView control.

This concludes the first PickerView workshop. Next week, you will learn how to display two components in the PickerView control. You will also learn how to display images in a component of the PickerView control. Until then, happy coding. 🙂