Aprende a programar para iOS: Usando un PickerView

programar ios iphone ipad apple xcode

Os traemos otra entrega de nuestro curso de programación para iOS. Esta vez enseñaremos cómo usar un PickerView y cómo cargarle una base de datos. Para ello, primero explicaremos por encima el proceso, y después os dejaremos con el vídeo y el código fuente del proyecto que hemos hecho.

En primer lugar, ¿qué es un PickerView? Es una pregunta que os habréis realizado muchos. Un PickerView es la típica ruleta que nos aparece generalmente en la parte inferior de la pantalla con múltiples opciones a elegir. Lo normal es que cada celda lleve consigo una acción, que se ejecuta al seleccionarla. En esta entrega de nuestro curso de programación aprenderemos cómo crear un PickerView y una base de datos, la cual cargaremos en él para asignarle un nombre a cada una de sus celdas. Además, aprenderemos a asignarle acciones a sus celdas, las cuales se ejecutarán al seleccionar su celda correspondiente.

Pero, ¿qué es eso de una base de datos? En programación, hay unas especie de bases de datos o contenedores de valores llamados array. Cuando declaramos un array, al principio está vacío. Por eso tenemos que cargarle valores, los cuales volcaremos en el PickerView o cualquier otro elemento gráfico para asignarle dichos valores a sus celdas (en inglés rows). Para cargarle datos o valores a un array, primero debemos declararlo en el archivo de cabecera (.h).

NSMutableArray *array;

En este caso no haría falta crear la propiedad y posteriormente sintetizarla, con la declaración bastaría. NSMutableArray es el la propiedad array en el lenguaje Objective-C. Si habéis estudiado otros lenguajes como JavaScript o C++, la propiedad es array, sin más. Ahora vamos a proceder a cargarle datos. Para ello, deberemos ir a nuestro archivo de implementación (.m) y buscar la función viewDidLoad, que recordemos que eran la que nos permitía cargar una serie de acciones o métodos automáticamente al inicializar la vista. Una vez encontrado, tenemos que poner lo siguiente:

array=[[NSMutableArray alloc]initWithObjects:@”Primer valor”, @”Segundo valor”, @”Tercer Valor”, nil];

Con este código establecemos que la puntero array (que hace referencia a NSMutableArray) lo aloquemos en memoria para que iOS le reserve un espacio de memoria. A continuación, establecemos que se inicialize con una serie de objetos, que son los que ponemos nosotros. Siempre hay que poneros entre dobles comillas y con una @ (arroba) delante. Cuando hayamos terminado, ponemos nil, lo cual indica que no hay más objetos en ese array. Una vez que tenemos el array cargado, tenemos que crear el PickerView y volcar la base de datos en sus celdas. Para ello, vamos a proceder a declararlo en el archivo de cabecera (.h).

IBOutlet UIPickerView *pickerView;

En este caso, debemos poner IBOutlet delante ya que posteriormente vamos a enlazarlo en StoryBoard. Ahora tenemos que realizar una cosa que no habíamos aprendido hasta ahora: Establecer una vista como delegada de un elemento. Esto sirve para que sea la vista la encargada de procesarlo. Aunque es una excepción, ya que sólo se realiza con unos pocos elementos que veremos más adelante. Para establecer la vista como delegada del PickerView, tenemos que buscar la primera línea de código después del código en verde, llamado comentarios, que veremos en otra ocasión y de las importaciones. Una vez localizada, tenemos que añadirle lo siguiente:

@interface ViewController : UIViewController <UIPickerViewDelegate, UIPickerViewDataSource> {

El código en negrita es lo que hay que añadir. Una vez hecho, creamos la propiedad del PickerView y vamos al archivo de implementación (.m). Ahora sintetizamos la propiedad que acabamos de crear y añadimos estas cuatro funciones:

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView;
{

}

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{

}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component;
{

}

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component;
{

}

La primera sirve para determinar el número de componentes del PickerView. Como vamos a hacer uno sencillo, será de un componente. Para ello escribimos dentro de la función return 1; La segunda sección sirve para asignarle una acción a cada celda. Para ello usaremos una estructura llamada if anidado, que explicamos cómo funciona en el vídeo. La tercera función nos pide el número de celdas del PickerView. Para no ponerlo de forma manual, ponemos return [array count]; de forma que se establezca automáticamente el número de objetos de nuestro array. Y la cuarta y última nos pide el nombre de cada celda. Para ello ponemos return [array objectAtIndex:row]; para que establezca el nombre de los valores de nuestro array.

Ya sólo resta añadirlo a StoryBoard. Para ello, buscamos un PickerView y lo arrastramos a nuestra vista. Seleccionamos la propiedad de nuestra vista y nos vamos al apartado de conexiones y enlazamos nuestro PickerView con su elemento gráfico. A continuación, seleccionamos el PickerView y en sus conexiones, enlazamos DataSource y Delegate con la propiedad de nuestra vista. Una vez hecho, ejecutamos la aplicación y lo veremos en nuestro simulador de iPhone. A continuación, os dejamos con el vídeo donde realizamos todo este proceso:

Para asegurarse de que no os habéis perdido en ningún paso, os podéis descargar el código fuente de este proyecto desde aquí.

Esto ha sido todo. Esperamos que os haya gustado. Os adelantamos que nuestro próximo curso trataremos con las hojas de acciones o Action Sheet, como manejarlas y añadirle datos y acciones a sus botones.

Maquecitos | Canal Youtube

2 pensamientos en “Aprende a programar para iOS: Usando un PickerView

Deja un comentario