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







Compartir Compartir Compartir Compartir




Thebestandroide Indice Thebestandroide Ejercicio anterior Thebestandroide Siguiente ejercicio

0 comentarios:

Publicar un comentario