La manera default en iOS para que un usuario escoga en una de “n” opciones es mostar un UIPickerView con cada una de las opciones, y una opcion que se ve muy elegante es mostrar el UIPickerView en un UIActionSheet, sin embargo necesitamos hacer un pequeno tweak para agregar el UIPickerView dentro (sobre?) del UIActionSheet. Lo que hacemos es agregar el UIPickerView como una sub-vista del UIActionSheet.
Primero debemos decirle a nuestra clase que “hablamos” los protocolos UIActionSheetDelegate, UIPickerViewDelegate, UIPickerViewDataSource para manejar los eventos de cada uno de los objetos, y esto lo hacemos de la siguiente manera, en nuestro header file (.h) colocamos:
1 | @interface MainViewController : UIViewController <UIActionSheetDelegate, UIPickerViewDelegate, UIPickerViewDataSource> |
No vamos a implementar todos los metodos de los protocolos, solamente los que nos interesan:
Para UIActionSheetDelegate:
1 | - (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex; |
Para UIPickerViewDelegate:
1 | - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component; |
Para UIPickerViewDataSource:
1 2 | - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component; - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView; |
Para este tutorial vamos a utilizar un IBAction de un UIButton para mostrar el UIActionSheet:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | - (IBAction)showPicerViewClicked:(id)sender { //Creamos el UIActionSheet y lo configuramos con 2 botones, el primero para cancelar y ocultar el UIActionSheet y y el segundo para utiliar el dato seleccionado en el UIPicerView UIActionSheet *menu = [[UIActionSheet alloc] initWithTitle:nil delegate:self cancelButtonTitle:nil destructiveButtonTitle:@"Cancelar" otherButtonTitles:@"Seleccionar",nil]; //Agregamos el UIPicerView como una subView [menu addSubview:self.myPickerView]; [menu showInView:self.view]; //Modificamos el frame de el UIActionSheet para que quepa bien el UIPickerView + los botones CGRect menuRect = menu.frame; CGFloat orgHeight = menuRect.size.height; menuRect.origin.y -= 214; menuRect.size.height = orgHeight+214; menu.frame = menuRect; //Modificamos el frame del UIPickerView para que se ajuste dentro del UIActionSheet CGRect pickerRect = self.myPickerView.frame; pickerRect.origin.y = orgHeight; self.myPickerView.frame = pickerRect; [menu release]; } |
Vos Iv, pero donde esta creado el UIPicerView?
Excacto! el codigo anterior agrega una property llamada “myPickerView”, esto es porque de alguna manera debemos saber cual es el valor que el usuario selecciono en el UIPickerView, pero si no tenemos referencia al objeto, no hay manera de obtener el dato seleccionado. Por lo que debemos crear la propiedad “myPickerView, y esto lo hacemos en nuestro header file(.h) de la siguiente manera:
1 | @property (nonatomic, retain) UIPickerView *myPickerView; |
Vamos a decirle al compilador que nos cree el getter y setterde nuestra propiedad:
1 | @synthesize myPickerView; |
Pero voy a sobreescribir el getter porque quiero agregarle unas opciones:
1 2 3 4 5 6 7 8 9 | - (UIPickerView *)myPickerView{ if (!myPickerView) { myPickerView = [[UIPickerView alloc] init]; myPickerView.delegate = self; myPickerView.dataSource = self; myPickerView.showsSelectionIndicator = YES; } return myPickerView; } |
Ahora cuando el usuario presione el botón “Seleccionar” del UIActionSheet, simplemente voy a colocar en un UILabel el texto que el usuario seleccione, obteniendo el dato que fue seleccionado en el UIPickerView:
1 2 3 4 5 6 7 8 9 10 11 12 | - (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex{ switch (buttonIndex) { case 0: break; case 1:{ self.datoLabel.text = [self.datos objectAtIndex:[self.myPickerView selectedRowInComponent:0]]; break; } default: break; } } |
El resultado:
Bueno, espero les sirva.