UIPickerView select and hide

Question

How do you make a UIPickerView act like the one with a webview wherein there is a drop down selection box and instead of dropping down like usual websites do, the iphone makes it into a UIPickerView with all the selections in. When you select one, a check becomes visible beside your selection and changes the value of the drop box. And how do you put the "Done" button on top of the UIPickerView to dismiss the UIPickerView?

I already know that [pickerview setHidden:YES] is the method to use to hide the pickerview. I just don't know how to include the "Done" button in the UIPickerView.

Regards, Chris

Answer 1

This piece of code will slide out a picker view as keyboard and attached a done button on top of it. Basically, you want to set a inputAccessoryView with your input field. You should call this method on a touch down event for your input field.

- (IBAction)showYourPicker:(id)sender {

// create a UIPicker view as a custom keyboard view
UIPickerView* pickerView = [[UIPickerView alloc] init];
[pickerView sizeToFit];
pickerView.autoresizingMask = (UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
pickerView.delegate = self;
pickerView.dataSource = self;
pickerView.showsSelectionIndicator = YES;
self.yourPickerView = pickerView;  //UIPickerView

yourTextField.inputView = pickerView;

// create a done view + done button, attach to it a doneClicked action, and place it in a toolbar as an accessory input view...
// Prepare done button
UIToolbar* keyboardDoneButtonView = [[UIToolbar alloc] init];
keyboardDoneButtonView.barStyle = UIBarStyleBlack;
keyboardDoneButtonView.translucent = YES;
keyboardDoneButtonView.tintColor = nil;
[keyboardDoneButtonView sizeToFit];

UIBarButtonItem* doneButton = [[[UIBarButtonItem alloc] initWithTitle:@"Done"
    style:UIBarButtonItemStyleBordered target:self
    action:@selector(pickerDoneClicked:)] autorelease];

[keyboardDoneButtonView setItems:[NSArray arrayWithObjects:doneButton, nil]];

// Plug the keyboardDoneButtonView into the text field...
yourTextField.inputAccessoryView = keyboardDoneButtonView;  

[pickerView release];
[keyboardDoneButtonView release];
}

Finally, your Done button calls the "pickerDoneClicked" method, where you should add [yourTextField resignFirstResponder]; which will hide the picker view.

Answer 2

The "Done" button is placed in UIToolBar.

Use the below method of UIToolBar for adding the "Done" buttons.

- (void)setItems:(NSArray *)items animated:(BOOL)animated {

    UIToolbar*  mypickerToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 56)];
    mypickerToolbar.barStyle = UIBarStyleBlackOpaque;
    [mypickerToolbar sizeToFit];

    NSMutableArray *barItems = [[NSMutableArray alloc] init];

    UIBarButtonItem *flexSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:nil];
    [barItems addObject:flexSpace];

    UIBarButtonItem *doneBtn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(DatePickerDoneClick)];
    [barItems addObject:doneBtn];

    [mypickerToolbar setItems:barItems animated:YES];

}