How to implement drop down lists in your iPhone app

If like me, you’re fairly new to iPhone development, you might be wondering how to implement drop down lists in your app. The fact of the matter is that there is no native control provided by Apple, similar to the <select> tag you’ll know well if you have a background in web development. So, the solution is to roll our own: stick with me for a few minutes – I promise it’s not as tricky as it sounds. Here is how our finished control will look:

We’re going to use a UIButton control with a custom background image and put a label on top of it to show the currently selected option. Go ahead and add a UIButton and a UILabel to your view using the Interface Builder. If you’re not much of a designer, leave the background image for now and just use a regular button – it doesn’t really matter to get the code working as we need it.

Add an IBOutlet for your label to your view controller’s header file and implement the UIPickerViewDelegate and UIPickerViewDataSource delegates. We also need to define an NSMutableArray, a UIActionSheet and an NSInteger – We’ll deal with these and the delegates we are implementing in just a second. Lastly, declare an IBAction showSearchWhereOptions which we need to connect to our button in the Interface Builder. Our finished header file looks like this:

@interface MyViewController : UIViewController  <UIPickerViewDelegate, UIPickerViewDataSource> {

// label showing currently selected option

IBOutlet UILabel *searchWhere;

// data for populating picker view

NSMutableArray *searchWhereOptions;

// display picker view in an action sheet

UIActionSheet *actionSheet;

// keep track of selected option’s index

NSInteger selectedOption;

}

- (IBAction) showSearchWhereOptions;

@end

Next – on to our implementation file. Implement the following methods that are required because of the delegates we have implemented.

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {

return 1;

}

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

return [searchWhereOptions count];

}

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

return [searchWhereOptions objectAtIndex:row];

}

// this method runs whenever the user changes the selected list option

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {

// update label text to show selected option

searchWhere.text = [searchWhereOptions objectAtIndex:row];

// keep track of selected option (for next time we open the picker)

selectedOption = row;

}

Most of the work happens here.. In our showSearchWhereOptions method, which runs when the user taps our “button” (it is a button really, but it’s sneakily pretending to be a drop down list control).

- (IBAction) showSearchWhereOptions {

// create action sheet

actionSheet = [[UIActionSheet alloc] initWithTitle:nil delegate:nil cancelButtonTitle:nil destructiveButtonTitle:nil otherButtonTitles:nil];

[actionSheet setActionSheetStyle:UIActionSheetStyleBlackTranslucent];

// create frame for picker view

CGRect pickerFrame = CGRectMake(0, 40, 0, 0);

// create picker view

UIPickerView *pickerView = [[UIPickerView alloc] initWithFrame:pickerFrame];

pickerView.showsSelectionIndicator = YES;

pickerView.dataSource = self;

pickerView.delegate = self;

// set selected option to what was previously selected

[pickerView selectRow:selectedOption inComponent:0 animated:NO];

// add picker view to action sheet

[actionSheet addSubview:pickerView];

[pickerView release];

// create close button to hide action sheet

UISegmentedControl *closeButton = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObject:@"Close"]];

closeButton.momentary = YES;

closeButton.frame = CGRectMake(260, 7.0f, 50.0f, 30.0f);

closeButton.segmentedControlStyle = UISegmentedControlStyleBar;

closeButton.tintColor = [UIColor blackColor];

// link close button to our dismissActionSheet method

[closeButton addTarget:self action:@selector(dismissActionSheet) forControlEvents:UIControlEventValueChanged];

[actionSheet addSubview:closeButton];

[closeButton release];

// show action sheet

[actionSheet showInView:[[UIApplication sharedApplication] keyWindow]];

[actionSheet setBounds:CGRectMake(0, 0, 320, 485)];

}

We haven’t yet defined our list items – we’ll do this in our viewDidLoad method. We need to make sure we set a default search option too. It’s a zero based index, so setting it to 0 will make “Specified location” our default selection.

// define list options

searchWhereOptions = [[NSMutableArray alloc] init];

[searchWhereOptions addObject:@"Specified location"];

[searchWhereOptions addObject:@"Near me"];

[searchWhereOptions addObject:@"Nationally"];

// default list option to select

selectedOption = 0;

One last thing – implement the dismissActionSheet method which is responsible for hiding the action sheet when we click the done button.

- (void) dismissActionSheet {

// hide action sheet

[actionSheet dismissWithClickedButtonIndex:0 animated:YES];

}