Curso de iOS7: Navigation Controller , Segues (II)

Esta es la segunda parte del tema de Navigation Controller.  Una vez que tenemos la pantalla de Añadir y la de Listado es necesario añadir una nueva escena de detalle. Realizamos el mismo proceso que hicimos con la escena de añadir.
Agregamos un nuevo botón a la barra de navegación pero esta vez lo colocamos a la izquierda del título:

Colocamos un nuevo view controller en el storyboard:
Y conectamos el botón de detalle con el nuevo View Controller mediante un segue de tipo push:
Y como vemos en la captura ya tenemos enlazado el detalle.
Repetimos el mismo proceso con la escena de Editar, pero esta vez la enlazamos desde un botón colocado en la escena de Detalle. Por lo que el storyboard debería quedar más o menos así.
Como podemos ver tenemos prácticamente todas las pantallas referentes a la aplicación.

Forzar la vuelta en la Navegación

Ahora tendríamos que gestionar los formularios correspondientes al Añadir y al Editar. Por la simplificación de la explicación nos centraremos en la gestión de la información correspondientes a los segues.
En las pantallas de los formularios es normal que al pulsar el botón de guardar volvamos a la anterior pantalla. Intentaremos realizar que mediante código, o programáticamente,  realizar esa vuelta a la anterior pantalla.
Vemos cómo se haría en el ejemplo
En la pantalla del Añadir colocamos un botón que nos permita guardar:
Relacionamos la acción del Touch Up Inside del botón con un método IBAction, tal como vimos anteriormente:
  • Creamos una nueva clase que herede de UIViewController, llamada por ejemplo, AnadirViewController
  • Asignamos esa clase como Custom Class de la escena del Añadir
  • Dividimos el Editor, dejando a la derecha el fichero de cabecera de la clase
  • Arrastramos con el control pulsado desde el botón al código
  • Seleccionamos Action
  • Escribimos el nombre del método, por ejemplo, guardar
  • y Pulsamos en Connect
Por lo que tendremos un método similar a este en la implementación:
– (IBAction)guardar:(id)sender {
}
Ahora tenemos dos opciones:
  • Volver a la anterior escena
  • Volver a la escena principal (Root View Controller)
En el primer caso deberemos hacer uso del método popViewControllerAnimated , el método quedaría de la siguiente manera:
– (IBAction)guardar:(id)sender {
        //volver a la anterior escena
        [self.navigationController popViewControllerAnimated:YES];
}
En el segundo caso utilizaremos el método popToRootViewControllerAnimated y el método quedaría así:
– (IBAction)guardar:(id)sender {
    //volver a la primera escena después del Navigation Controller o el Root View Controller
    [self.navigationController popToRootViewControllerAnimated:YES];
}

Pasar datos entre Escenas mediante Segues

Ahora es Cuando debemos pasar información entre escenas. Imaginemos la aplicación que estamos haciendo. En la escena de detalle debemos presentar datos que deben de ser pasados desde la vista del listado. El salto entre escenas lo estamos haciendo mediante un segue de tipo push.
Veamos un detalle del inspector de atributos del segue en cuestión:

Como se puede ver en la captura le hemos colocado un identificador al Segue, de esta manera desde la programación podemos realizar acciones antes de que se realice el salto a la nueva escena, mediante el método prepareForSegue.

Antes de colocar el método debemos asegurarnos que tanto la escena del listado como la del detalle tienen asignada una clase, mediante el Custom Class.

Ahora debemos asegurarnos que la clase del detalle dispone de una propiedad que nos permita pasar el dato que necesitamos, por simplicidad incluiremos un NSString, que luego utilizaremos para presentarlo en una Label.

Por lo que incluiremos en la escena del detalle una Label, y la enlazaremos con una propiedad IBOutlet en la cabecera de la clase de detalle.

También incluiremos la propiedad NSString, por lo que el fichero de cabecera de la clase de Detalle quedará de la siguiente manera:

@property (strong, nonatomic) IBOutlet UILabel *etiqueta;

@property (nonatomic, strong) NSString *cadena;

Ahora ya podemos incluir el método en la implementación en la clase del listado. como necesitamos hacer uso de la clase del Detalle deberemos importar la clase:

#import “DVDetalleViewController.h”

y ahora podemos implementar el método:

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{
    NSLog(@”prepareForSegue: %@”, segue.identifier);
    if([segue.identifier isEqualToString:@”Detalle”])
    {
        DVDetalleViewController *detalleVC = segue.destinationViewController;
        detalleVC.cadena = @”Datos traspadados”;
    }

 

}

Como podemos ver en los parámetros nos pasan tanto el segue como el elemento que ha disparado el salto, en este caso el botón que pulsamos para realizar el salto.
Fijémonos en la primera linea:
NSLog(@”prepareForSegue: %@”, segue.identifier);
El identificador del segue está disponible como una propiedad de la clase, llamado identifier de esta manera podemos distinguir unos segues de otros dentro de una misma escena. Así si realizamos más de un salto desde una misma escena podemos filtrar entre ellos. Después tenemos el if donde nos aseguramos que estamos trabajando con el segue correcto que nos lleva a la escena del detalle. Y acto seguido recuperamos un objeto de la vista de detalle mediante el método destinationViewController . Con esto tenemos la instancia del objeto de la escena de destino y luego podemos modificar la propiedad cadena, que utilizaremos para almacenar el valor que necesitamos traspasar de una escena a otra.

Por otra parte en el DetalleViewController necesitaremos modificar el método viewDidLoad para hacer que según se cargue la vista ponga el dato en la etiqueta que añadimos anteriormente:

– (void)viewDidLoad
{
    [super viewDidLoad];
    etiqueta.text=cadena;

 

}

De esta manera al ejecutar la aplicación y pulsar en el botón del listado tendremos la escena de detalle pero en la etiqueta tendrá el texto traspasado:

 

Forzar un salto en la Navegación programáticamente

Una de las necesidades en la programación es que dependiendo de determinadas condiciones debemos realizar un salto entre escenas desde código.  Para ello deberemos utilizar el método  pushViewController del atributo navigationController del View Controller que estemos manejando con la navegación.
Vemos un ejemplo de código:
DVDetalleViewController *detalleVC = [self.storyboard instantiateViewControllerWithIdentifier:@”Detalle”];
    [self.navigationController pushViewController:vc animated:YES];
Como podemos ver en el ejemplo podemos inicializar nosotros el View Controller de destino utilizando el identificador de la escena del storyboard como parámetro y forzamos el salto push.

 

Licencia Creative Commons

Curso de iOS7: Navigation Controller, Segues (I)

La mayor parte de las aplicaciones iOS disponen de varias escenas. Por lo que necesitamos mecanismos que nos permitan navegar entre esas escenas. Una de las maneras de realizar estos cambios entre escenas es el Navigation Controller (UINavigationController):

Para poder hacer uso de este componente, vamos a tener en mente una aplicación CRUD. Es decir una aplicación que sea capaz de realizar las típicas acciones de la gestión de datos. Es decir:

  • Listar: En este caso por simplificar el ejemplo utilizaremos una sola label que pretenderá ser el listado de datos y par de botones que nos lleven a otras escenas.
  • Añadir: la escena que permite añadir nuevos elementos, por lo tanto un formulario con un botón de guardar.
  • Detalle: escena que permite la visualización de la información de un elemento.
  • Editar: Escena que permite editar un elemento, un formulario con los datos.
  • Borrar: esta acción deberá borrar un elemento, en este ejemplo estará localizada en el detalle.
Para poder seguir el ejemplo crearemos un nuevo proyecto de single view application.
Donde en el storyboard veremos esa escena:

Seleccionamos el view controller de la escena y lo borramos pulsando el botón de Borrar atrás. Por lo que nos quedará una storyboard vacío.

A continuación arrastramos el Navigation Controller al Storyboard, nos deberíamos encontrar con algo parecido a esto:

Como podemos ver tenemos dos nuevas escenas en el storyboard. La primera es la correspondiente al Navigation Controller y está así seleccionada con la flecha inicial.
Si seleccionamos sólo el Navigation Controller podemos ver en la vista de Atributos lo siguiente:

Especialmente importantes son las dos secciones de esta captura. Primero vemos el apartado del Navigation Controller, que nos permitirá configurar si es visible o no la Barra de Navegación. Y por otro lado el Initial Scene, que está marcado, por lo que el la escena del Navigation Controller será la primera escena de la App.

Por otro lado vemos también que tenemos una segunda escena con un Table View Controller ya incorporado:

Como podemos ver en la captura nos indica que es el Root View Controller. Esto significa que será la escena principal tras pasar a través del Navigation Controller. Por lo que dispondrá de la barra de navegación y será mostrada en primer lugar, una vez haya pasado por el Navigation Controller.
Y ahora tenemos el Segue:

Los Segues son las conexiones con la navegación, son los elementos visuales dentro del storyboard que nos permitirán realizar cambios entre escenas.
Este tipo de segue es especial ya que permite establecer la escena principal o Root View Controller para el Navigation Controller.
Si queremos hacer que otra escena sea la Root View Controller debemos arrastrar con el control pulsado desde el Navigation Controller hasta otro View Controller y al soltar nos aparecerá un diálogo similar al siguiente:

Como podemos ver nos aparecen todos los tipos de Segue:

  • push: para la navegación
  • modal: saltos entre escenas sin navegación
  • custos: saltos personalizados
  • root view: para establecer root view controller con los Navigation Controller y Tab View Controller (como veremos más adelante).
Elegimos el root view y la nueva escena será la nueva Root View Controller.

Si ejecutamos la aplicación vemos lo siguiente:

Como puede verse disponemos del tableview y además de la barra de navegación arriba. Por lo que ya tenemos disponible la escena del Listar.

Para cambiar el título de la barra de navegación deberemos hacerlo desde la escena del Root View Controller, haciendo doble click en el título. A efectos prácticos funciona como una Label:

Lo cambiamos y ponemos Listado. Si lo volvemos a ejecutar veremos que ya está cambiado el título:

 

Añadir

Ahora coloquemos una nuevo View Controller para el Añadir. Arrastrando el View Controller al storyboard. Ahora para crear el salto entre escenas necesitamos incluir un nuevo botón que permita que al pulsarlo nos lleve a la nueva escena. En este caso vamos a escoger un nuevo tipo de botón que se utiliza para las barras de navegación, el Bar Button Item:

Este tipo especial de botón lo podemos colocar en la barra de navegación, y al ser más sencillo dispone de menos eventos asociados. Al arrastrarlo a la barra de navegación del Listado y cambiar el título quedará mas o menos así:

Ahora es cuando debemos colocar un nuevo segue para enlazar el botón de añadir con la nueva escena. Para ello debemos con el control pulsado tirar una línea desde el botón hasta la nueva escena:

Al soltar el botón del ratón nos aparecerá un nuevo diálogo contextual a la operación:

Para que funcione apropiadamente el segue y nos mantenga la navegación seleccionamos push y eso hará que aparezca el segue de tipo push entre las dos escenas:

Si pulsamos sobre él podemos ver que en el inspector de atributos aparece lo siguiente:

Lo importante de esta captura es que podemos elegir el Style, que son los distintos tipos de segue que hemos visto anteriormente y el Identificador del segue. Este identificador nos permitirá modificar por programación aquellas cosas que queramos modificar del View Controller que arranquemos. De momento nos sirve desde el diseño del Storyboard sin necesidad de programar nada hacer el salto entre escenas.

Por supuesto en la escena de Añadir aparecerá la barra de navegación y podemos modificar su título:

Si ejecutamos la aplicación veremos que efectivamente al arrancar la aplicación y pulsar el botón de añadir nos lleva a la siguiente escena:

Como puede verse en la captura al entrar en la escena de Añadir, aparece la barra de navegación y el botón que permite Volver a la anterior escena, como el título de la anterior escena es el de Listado esto es lo que aparece en el botón que nos permite volver.

En el siguiente tema veremos como ir añadiendo nuevas pantallas a nuestro CRUD.

Licencia Creative Commons

Si estás interesado en seguir formándote tenemos una serie de cursos gratuitos: http://cursosdedesarrollo.com/cursos/

También disponemos de algunos cursos de pago por si son de tu interés: https://cursosdedesarrollo.com/tienda/

Curso de Angular: https://cursosdedesarrollo.com/tienda/angular/

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies