Programmatically add picker to tableview with same behavior as default keyboard

edwinvanolst · April 2012

I have a tableview with a few cells. One of these contains a textfield, which shows the keyboard when selected.

Now in the tableviewcontroller class I create a UIPickerView in the viewWillAppear method, like this:

moodPickerView = [[UIPickerView alloc] initWithFrame:CGRectZero];
moodPickerView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;
CGSize pickerSize = [moodPickerView sizeThatFits:CGSizeZero];
moodPickerView.frame = [self pickerFrameWithSize:pickerSize];
moodPickerView.showsSelectionIndicator = YES; // note this is default to NO
moodPickerView.dataSource = self;
moodPickerView.delegate = self;
moodPickerView.hidden = YES;
[self.view addSubview:moodPickerView];

When a certain cell is selected I want to show the picker, like so:

[picker setCenter:CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height+(picker.frame.size.height/2))]; // place the pickerView outside the screen boundaries
[picker setHidden:NO]; // set it to visible and then animate it to slide up
[UIView beginAnimations:@\"slideIn\" context:nil];    
[picker setCenter:CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height-(picker.frame.size.height/2))];
[UIView commitAnimations];

While the keyboard is up, I can still scroll in the tableview while the keyboard stays at the bottom of the screen. But, when the pickerview is up I can't.

How do I show the pickerview so it has the same behavior as the keyboard?

smithdale87 · April 2012

First off, you're doing it wrong if you're adding subviews in viewWillAppear. You should be using viewDidLoad to create your picker instance and add it to the subview.

Can you NSLog the frame of your picker when you are showing it? I suspect the picker's frame is likely the entire screen, which means it would be blocking touches from going to the tableview.

Domele · April 2012

UITextFields have an inputView property. This replaces the keyboard. Set this property in cellForRow.

edwinvanolst · April 2012

smithdale87;427429 said:
First off, you're doing it wrong if you're adding subviews in viewWillAppear. You should be using viewDidLoad to create your picker instance and add it to the subview.

Thanks for this, I was wondering about this myself.

smithdale87;427429 said:
Can you NSLog the frame of your picker when you are showing it? I suspect the picker's frame is likely the entire screen, which means it would be blocking touches from going to the tableview.

NSLog(@\"picker view frame: %f x %f\", picker.frame.size.width, picker.frame.size.height);

returns: picker view frame: 320.000000 x 216.000000

The touches aren't being blocked as I can select the row above it.

edwinvanolst · April 2012

Domele;427430 said:
UITextFields have an inputView property. This replaces the keyboard. Set this property in cellForRow.

I'm a bit confused by this. The cell with the pickerview doesn't have a textfield, just a label that get's updated when the picker value changes. Also, I currently don't use cellForRow. The tableview uses static cells, using storyboard/ib.

Domele · April 2012

One of these contains a textlabel, which shows the keyboard when selected.

You say that you have a text label. I assume it's a UITextField since it shows a keyboard when selected. UITextFields have an inputView property which you can set to a view. In your case, you should set this property to your UIPickerView. You should add yourself as a target for UIControlEventValueChanged events from the UIPickerView. In the method that gets called when the value changes, update the UITextField.

edwinvanolst · April 2012

Domele;427521 said:
You say that you have a text label. I assume it's a UITextField since it shows a keyboard when selected.

Yes you're right, I meant textfield (updated my post). But the textfield is in a different cell, one that requires the keyboard. The other cell however has a UILabel and shows a pickerview when selected (via didSelectRowAtIndexPath).

Domele · April 2012

So why not just replace it with a UITextField? It's the same thing except it summons a keyboard automatically and you can replace that keyboard with your own view.

And to get the same functionality of clicking anywhere in the cell to bring up the UIPickerView, just call becomeFirstResponder on the UITextField in didSelectRow.

edwinvanolst · April 2012

Domele;427528 said:
So why not just replace it with a UITextField? It's the same thing except it summons a keyboard automatically and you can replace that keyboard with your own view.

And to get the same functionality of clicking anywhere in the cell to bring up the UIPickerView, just call becomeFirstResponder on the UITextField in didSelectRow.

Yeah, this seems to be the way to go. Can I hide the blinking cursor in the textfields? It's weird to see the cursor when selecting from a picker.

Domele · April 2012

You'd have to switch between 2 UITextFields or something. You can look into it more by googling.

edwinvanolst · April 2012

Domele;427535 said:
You'd have to switch between 2 UITextFields or something. You can look into it more by googling.

Yeah, thanks, I solved this issue by using becomeFirstResponder in didSelectRow on a hidden uitextfield.

Thank you for your help!

Howdy, Stranger!

Forums

Programmatically add picker to tableview with same behavior as default keyboard

Replies