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

Solution 1

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];

}

Solution 2

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.

Comments

[Jhaliya - Praveen Sharma]

What did i miss out that lead you to put your own answer ?

[Jacob T.]

sorry, I just think it's nice to have choice of different approach. While one is to have a toolbar at the bottom of the screen, the other is to attach a toolbar on top of the keyboard/uipickerview.

[Tofu]

Thanks for the extra info Jacob. It was really helpful but I believe that the command for the final method is [mypicker setHidden:YES]; am I correct?

[drewish]

@Tofu I don't think so. Since the picker is displayed as the text field's inputView when the text field is no longer the first responder the view will be hidden automatically.

[KVISH]

what is the purpose of the flexspace? it seems to work even without it? sorry for commenting on an old thread.

[VsMaX]

I don't see connection to UIPickerView here.

[VsMaX]

this answer is much better as it shows clearly connection between UITextField and UIPIckerView