Mostrar un UIPickerView con un botón para cerrarlo desde un UITextField

Hoy vamos a ver como crear un campo UITextField que, al tocarlo, nos muestre un UIPickerView donde seleccionar el dato que queremos introducir. Además, los UIPickerView no disponen de ningún botón para cerrarlos, lo cual puede ser un problema. Vamos a ver una forma de añadir uno.

El resultado final va a ser algo así:

Lo primero que hay que hacer es crear el UITextField y establecer el ViewController en el que está como su delegate. Esto lo podemos hacer "cableando" en el Storyboard o en el Interface Builder. Pulsamos con el botón derecho el UITextField y arrastramos hasta el ViewController. En el menú que se despliega seleccionamos Delegate y listo.

Ahora debemos añadir el protocolo UITextFieldDelegate. Todos los métodos de este protocolo son opcionales. En este caso vamos a implementar el siguiente:

 - (BOOL)textFieldShouldBeginEditing:(UITextField *)textField

{

    [self showPickerWithDoneButton:textField];

    return YES;

}

Con esto, cuando toquemos el campo texto para introducir datos, llamaremos al showPickerWithDoneButton:(UITextField *)textField, que es donde vamos a abrir el UIPickerView. Para manejar UIPickerView debemos añadir sus protocolos UIPickerViewDataSource y UIPickerViewDelegate. Su implementanción en este caso es muy sencilla, así que os lo dejo como deberes.

- (void)showPickerWithDoneButton:(UITextField *)sender

{

    UITextField *textField = sender;

    

    // Creamos UIPickerView como una vista personalizada de un keyboard View

    UIPickerView *pickerView = [[UIPickerView alloc] init];

    [pickerView sizeToFit];

    pickerView.autoresizingMask = (UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);

    pickerView.delegate = self;  

    pickerView.dataSource = self;

    pickerView.showsSelectionIndicator = YES;

    

    self.pickerView = pickerView;  //UIPickerView

    

    //Asignamos el pickerview al inputView de nuestro texfield

    textField.inputView = self.pickerView;

    

    // Preparamos el botón 

    UIToolbar* keyboardDoneButtonView = [[UIToolbar alloc] init];

    keyboardDoneButtonView.barStyle = UIBarStyleBlack;

    keyboardDoneButtonView.translucent = YES;

    keyboardDoneButtonView.tintColor = nil;

    [keyboardDoneButtonView sizeToFit];

    

    UIBarButtonItem *doneButton = [[UIBarButtonItem alloc] initWithTitle:         NSLocalizedString(@"Done", @"Button")                                                                                    style:UIBarButtonItemStyleBordered target:self                                                                 action:@selector(pickerHechoClicked:)];

    doneButton.tintColor = [UIColor redColor];

    

    //Para ponerlo a la derecha del todo voy a crear un botón de tipo Fixed Space

    UIBarButtonItem *fixedSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace                                                                                    target:nil action:nil];        

                                                                    

    fixedSpace.width = keyboardDoneButtonView.frame.size.width - 70;    

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

    

    // Finalmente colocamos la keyboardDoneButtonView  en el text field...

    textField.inputAccessoryView = keyboardDoneButtonView;     

}

Solo nos queda implementar el pickerHechoClicked, que es es el método que se va a ejecutar cuando se pulse el botón.  Lo único que tendremos que hacer es mandar el mensaje resignFirstResponder al textfield que ha mostrado el picker View para cerrarlo.