iOS : Ejercicio 9. Aplicando a Tabla UINavigationController ~ THE BEST ANDROIDE

Blog >Lista ejercicios > Ejercicio 9

Hola amiguetes programadores, hoy continuamos con el paso final del UITableView :

Ejercicio 9 : UITableView con UINavigationController.

Ya vimos en el ejercicio 8 como crear un TableView y aplicar muy poquita funcionalidad, lo podeis ver aquí.
Después en el ejercicio 9 vimos como personalizar nuestra tabla a antojo creando nosotros mismos las celdas con sus label o imagenes de forma dinámica ayudandonos de un array que también lo podreis ver desde aquí, pues bien, empezamos desde ahi, donde lo dejamos.

NOTA : Si eres novat@, necesitarás hacer los ejercicios 7 y 8 para empezar con este :

Dando funcionalidad a nuestra UITableView con UINavigationController.

Comenzamos arrastrando un UINavigationController al storyboard, borrando la pantalla de la derecha con la tabla y clickando en el NavigationControler+Ctrl arrastramos hacia nuestra tabla personalizada, ahi soltamos y elegimos la opción de Root View :

Aparecen entonces 2 flechas, la que sale de la nada es porque señala que es la primera vista que se ejecuta cuando iniciamos la aplicación, la segunda es para el Navigation Controller.
Pues bien, esto hay que cambiarlo, para que la flecha que sale de la nada apunte lo primero al NavigationController, esto se hace seleccionando este, y en inspector de atributos, en la cuarta pestañita, donde está la sección View Controller, hay un check box que dice Is Initial View Controller, seleccionamos y listo.

Como recordareis, en el método didSelectRowAtIndexPath teníamos el código necesario para que saltara un Alert Dialog con el nombre de la fila que habiamos seleccionado, pues bien, borramos el interior del método.

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{

}
@end

Ahora creamos otra View Controller donde mostraremos los detalles del item de la tabla que se ha seleccionado, la personalizamos con 2 label y una imagen, además de crear una clase que llamamos detallesViewController que herede de UIViewController, además de asignarle un identificador.

El identifier en versiones anteriores de Xcode 5.0 está en la sección View Controller de la cuarta pestañita del inspector de atributos, a partir de esta versión en adelante se haya en la tercera pestañita bajo el nombre de StoryBoard ID, que en este caso será IDDetalle.

Abrimos la vista de "Assistant Editor" y teniendo en una ventana el storyboard y en otra el DetalleViewController.h clickamos en cada uno de los elementos+Ctrl y los arrastramos ahi, quedando la clase así :

@interface DetalleViewController:UIViewController
@property (weak, nonatomic) IBOutlet UILabel *Desc
@property (weak, nonatomic) IBOutlet UIImageView *img
@property (weak, nonatomic) IBOutlet UILabel *Nomb
}
@end

//NO OLVIDAR LOS @Synthesize DE LOS ELEMENTOS EN EL DetalleViewController.m

Y ahora vamos a darle la funcionalidad para que al seleccionar un item de la tabla, vaya hasta el DetalleViewControler, lo hacemos mediante la función en la que hemos quitado antes código, pero no olvidar importar la nueva clase (DetalleViewController) en el ViewController.m.

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
DetalleViewController *Vista=[self.storyboard instantiateViewControllerWithIdentifier:@"IDDetalle"];
[self.navigationController pushViewController:Vista animated:YES];
}
@end

Podeis ejecutar la aplicación, y vais a ver que la funcionalidad del Navigation Controller sobre nuestra tabla personalizada ya está echa, pero vemos que los label y la imagen no cambian, y son los que se han puesto por defecto, así que vamos a darles funcionalidad para que cambien a los de nuestros items :

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
//HACEMOS UN OBJETO DE LA VISTA DETALLE
DetalleViewController *Vista=[self.storyboard instantiateViewControllerWithIdentifier:@"IDDetalle"];
//HACEMOS OBJETO PERSONAJE DONDE ALMACENAMOS EL OBJETO DEL ARRAY
Personaje *elemento = [[Personaje alloc] init];
elemento=[items objectAtIndex:indexPath.row];
//RELLENAMOS LOS ITEMS
[Vista.Desc setText:elemento.Descripcion];
[Vista.img setImage:elemento.imagen];
[Vista.Nomb setText:elemento.Nombre];
//CARGAMOS LA VISTA
[self.navigationController pushViewController:Vista animated:YES];
}
@end

Ejecutamos la aplicación....
¿Pero que ocurre? No funciona!! ¡Los items de nuestro DetalleViewController no cambian! esto se debe a que falta una linea, vamos al coñazo que da Objetive C siempre con las versiones, hasta versiones de XCode anteriores a la 5.1 funcionaba así, pero a partir de estas versiones para adelante, hay que ponerla...

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
//HACEMOS UN OBJETO DE LA VISTA DETALLE
DetalleViewController *Vista=[self.storyboard instantiateViewControllerWithIdentifier:@"IDDetalle"];
//ESTA ES LA PUÑETERA LINEA SIN LA CUAL NO FUNCIONA
[Vista loadView];
//HACEMOS OBJETO PERSONAJE DONDE ALMACENAMOS EL OBJETO DEL ARRAY
Personaje *elemento = [[Personaje alloc] init];
elemento=[items objectAtIndex:indexPath.row];
//RELLENAMOS LOS ITEMS
[Vista.Desc setText:elemento.Descripcion];
[Vista.img setImage:elemento.imagen];
[Vista.Nomb setText:elemento.Nombre];
//CARGAMOS LA VISTA
[self.navigationController pushViewController:Vista animated:YES];
}
@end

He querido tener en cuenta esta linea : [Vista loadView] porque me ha llevado más de un rato intentar solucionarlo, y la explicación la cuento a continuación :

Los elementos a los que se referencia mediante la instrucción DetalleViewController *Vista=[self.storyboard instantiateViewControllerWithIdentifier:@"IDDetalle"]; como pueden ser los label que hay dentro o la imagen, son nulos (nil) porque se ha instanciado el controlador, pero no se ha cargado la vista.
La vista del controlador se carga la primera vez que se ha solicitado su acceso, pero ninguna más, por eso no se cargan los datos. Con [Vista loadView] cargamos la vista y se nos va el problema.