How to Show UIPickerView when selecting UITextField

Question

Here is a screenshot of what I did till now:

So what I am trying to do

Answer 1

What you can do is, create a UIButton with custom type on UITextField. Both having equal sizes. On the touch of button you can show UIPickerView.

Answer 2

ViewController.h

@interface ChangeCurrencyVC : UIViewController <UIPickerViewDataSource, UIPickerViewDelegate>
{
      NSArray *availableCurreniesArray;
}
@property (weak, nonatomic) IBOutlet UITextField *chooseCurrencyTxtFldRef;

ViewController.m

 - (void)viewDidLoad {
[super viewDidLoad];
availableCurreniesArray = @[@"Indian Rupee", @"US Dollar", @"European Union Euro", @"Canadian Dollar", @"Australian Dollar", @"Singapore Dollar", @"British Pound", @"Japanese Yen"];
// Do any additional setup after loading the view.
[self pickerview:self];
}

 #pragma mark -  picker view Custom Method
 -(void)pickerview:(id)sender{
  UIPickerView *pickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
pickerView.showsSelectionIndicator = YES;
pickerView.dataSource = self;
pickerView.delegate = self;

// set change the inputView (default is keyboard) to UIPickerView
self.chooseCurrencyTxtFldRef.inputView = pickerView;

// add a toolbar with Cancel & Done button
UIToolbar *toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
toolBar.barStyle = UIBarStyleBlackOpaque;

UIBarButtonItem *doneButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(doneTouched:)];
UIBarButtonItem *cancelButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(cancelTouched:)];
// the middle button is to make the Done button align to right
[toolBar setItems:[NSArray arrayWithObjects:cancelButton, [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil], doneButton, nil]];
self.chooseCurrencyTxtFldRef.inputAccessoryView = toolBar;
}
 #pragma mark - doneTouched
- (void)cancelTouched:(UIBarButtonItem *)sender{
// hide the picker view
[self.chooseCurrencyTxtFldRef resignFirstResponder];
 }
  #pragma mark - doneTouched
- (void)doneTouched:(UIBarButtonItem *)sender{
// hide the picker view
[self.chooseCurrencyTxtFldRef resignFirstResponder];
// perform some action
 }
#pragma mark - The Picker Challenge
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
return 1;
}
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
return [availableCurreniesArray count];
}
- (nullable NSString *)pickerView:(UIPickerView *)pickerView titleForRow: (NSInteger)row forComponent:(NSInteger)component{
return availableCurreniesArray[row];
}

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
self.chooseCurrencyTxtFldRef.text = availableCurreniesArray[row];
}

Answer 3

Since iOS 3.2, UITextField supports the inputView property to assign a custom view to be used as a keyboard, which provides a way to display a UIPickerView:

You could use the inputView property of the UITextField, probably combined with the inputAccessoryView property. You assign your pickerView to the inputView property, and, to dismiss the picker, a done button to the inputAccessoryView property.

UIPickerView *myPickerView = [[UIPickerView alloc] init];
//myPickerView configuration here...
myTextField.inputView = myPickerView;

Like that. This will not give you a direct way to dismiss the view since your UIPickerView has no return button, which is why I recommend to use the inputAccessoryView property to display a toolbar with a done button (the bar is just for aesthetics, you might as well just use a UIButton object):

UIToolbar *myToolbar = [[UIToolbar alloc] initWithFrame:
 CGRectMake(0,0, 320, 44)]; //should code with variables to support view resizing
UIBarButtonItem *doneButton =
 [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone
 target:self action:@selector(inputAccessoryViewDidFinish)];
 //using default text field delegate method here, here you could call
 //myTextField.resignFirstResponder to dismiss the views
[myToolbar setItems:[NSArray arrayWithObject: doneButton] animated:NO];
myTextField.inputAccessoryView = myToolbar;

Answer 4

Swift:

internal var textFieldHandlerToolBar: UIToolbar = {
    let tb = UIToolbar.init(frame: CGRect.init(origin: .zero, size: CGSize.init(width: UIScreen.main.bounds.width, height: 44.0)))
    let doneBarButton = UIBarButtonItem.init(title: "Done", style: UIBarButtonItemStyle.done, target: self, action: #selector(actionDonePickerSelection))
    tb.setItems([doneBarButton], animated: false)
    return tb
}()

internal var pickerView: UIPickerView = {
    let pv = UIPickerView.init()
    return pv
}()

@objc internal func actionDonePickerSelection() {
     textField.resignFirstResponder()
}

override func viewDidLoad() {
    super.viewDidLoad()
    self.pickerView.delegate = self
    self.pickerView.datasource = self
}

Use it like this:

textField.inputAccessoryView = self.textFieldHandlerToolBar
textField.inputView = self.pickerView

Answer 5

http://tmblr.co/ZjkSZteCOUBS

I have the code and everything laid out in my blog to do this exactly. But below, I have the basic concept laid out.

Basically the solution involves an opensource project called ActionSheetPicker on github, and implementing the function textFieldShouldBeginEditing on the UITextFieldDelegate. You can dismiss the keyboard there and provide a UIPickerView instead. The basic code is listed here:

- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField {
    // We are now showing the UIPickerViewer instead

    // Close the keypad if it is showing
    [self.superview endEditing:YES];

    // Function to show the picker view
    [self showPickerViewer :array :pickerTitle];

    // Return no so that no cursor is shown in the text box
    return  NO;
}

Answer 6

I use this and find this a lot cleaner than adding a subview and animating the UIPicker

- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField {
responder = textField;

    if ([textField isEqual:self.txtBirthday]) {
    UIDatePicker *datepicker = [[UIDatePicker alloc] initWithFrame:CGRectZero];
    [datepicker setDatePickerMode:UIDatePickerModeDate];

    textField.inputView = datepicker;
    }

    return YES;
}