iOS : Ejercicio 9. Aplicando a Tabla UINavigationController

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.

Indice

Ejercicio anterior

Siguiente ejercicio

Categories: instantiateViewControllerWithIdentifier identifier, instantiateViewControllerWithIdentifier label text, loadView, UITableView, UITableView UINavigationController

iOS : Ejercicio 6. UINavigationCotroller

Blog >Lista ejercicios >  Ejercicio 6


Hola desarrolladores! Hoy seguimos con el tutorial de ejercicios básicos, hoy vamos a trabajar por primera vez con UIViewController:

 Ejercicio 6: UINavigationController básico 

Creamos un nuevo proyecto de la forma habitual, file - new - proyect -single view application.
Borramos el view Controller por defecto e insertamos un Navigation Controller, y salen 2 vistas. Por el lado izquierdo sale el Navigation Controller que es el que va a manejar el rollo de moverse por las vistas, y a la derecha borramos la tableView,y arrastramos un View Controller en su lugar donde antes estaba el Table View.

Pulsamos sobre el navigation controller pulsando control y arrastramos hacia el de la derecha, entre las opciones que aparecen, pulsaremos la de Relationship - Root View Controller, así le decimos que el Navigation Controller es el de la izquierda.

Ahora a esta nueva ViewController le asignamos la clase View Controller en el Custom Class.Esta clase se nos crea por defecto en el proyecto cuando le creamos.Le ponemos para distinguirle un título, un botón y un label.

No nos perdamos, tenemos dos pantallas : un Navigation Controller a la izquierda y un View Controller a la derecha, pues ahora hay que añadir otro nuevo View Controller y le asignamos algun label o ImageView o lo que querais.

Creamos una nueva clase Objetive-C que llamamos MuestraViewController que herede de UIViewController y lo linkamos al nuevo View Controller que hemos colocado.

Es imprescindible también el Identifier, en este caso pondremos IDMuestra.(Cuarta pestañita del panel de propiedades de objetos, sección View Controller - Identifier,a partir de XCODE 5.0 estará en la tercera pestaña como Storyboard ID) 

Arrastramos una imagen al proyecto, y en este último controlador que hemos puesto, colocamos una imágen, arrastrando una ImageView al lienzo y en la cuarta pestañita del panel de propiedades de los objetos en la opcion image la elegimos quedando así :

Más o menos que está ya todo echo lo relacionado con la interfad, vamos a empezar la navegación. Vamos al storyboard y cambiamos la vista a la que señala "Assistant Editor" teniendo a un lado el storyboard y a otro el View Controller.h pusamos ctrl+click boton sobre el boton, lo arrastramos hasta el ViewController.h para que nos cree la acción, aparecerá un panel como el que se ve a continuación : 

 Ahora, tenemos que en nuestro archivo View Controller.m se nos ha creado esta función :

- (IBAction)cambiar:(idsender{
}
@end

Bien, lo que hay que hacer en ese método que se ejecutará cuando se pulse el botón, es crear un objeto MuestraViewController que referenciará al ViewController de la imagen, esto quedaría así :

- (IBAction)cambiar:(idsender{
 MuestraViewController *vista = [self.storyboard instantiateViewControllerWithIdentifier:@"IDVista"];
 [self.navigationController:vista animated:YES];
}
@end

Vualá, ahora ya tenemos una vista con un botón que nos llevará a nuestra MuestraViewController, y además en ella arriba tenemos un botón con el nombre de la View Controller anterior, que hace la función de "atras". Ya para finalizar, supongamos que queremos un botón que vaya hacia atrás en la View como el que anteriormente he mencionado, pues en storyboard de la imagen, arrastramos un botón, y hacemos la misma operación que en el botón del View Controller principal pero esta vez en el MuestraViewController.h:

Seguidamente en el MuestraViewController.m aparecerá esta función (dependiendo como habremos llamado a la acción (No olvidar que hay que seleccionar Action, no IBOutlet). A la mía la he llamado atrás.

- (IBAction)Atras:(idsender{
 //LE DECIMOS QUE VUELVA ATRAS
 [self.navigationController popViewControllerAnimated:YES];
 // SI NAVEGAMOS ENTRE MUCHAS PANTALLAS PODEMOS USAR LO SIGUIENTE QUE NOS DEVOLVERIA A NUESTRA PANTALLA ROOT
        // [self.navigationController popToRootViewControllerAnimated:YES];
}
@end

Indice

Ejercicio anterior

Siguiente ejercicio

Categories: instantiateViewControllerWithIdentifier identifier, Navigation Controller, Navigation Controller Identifier View Controller, Navigation Controller Storyboard ID, UINavigationController