Transmisión de datos entre dos ViewController a través de prepareForSegue

Logotipo de iOS

Cuando se realiza una aplicación móvil, es muy probable que esta necesite más de una pantalla. Seguramente muchas. Sin embargo, en muchas ocasiones no es necesario que el número pantallas o ventanas sea igual al número de elementos que se quieran mostrar. Por ejemplo, si se tiene una galería con 100 fotos no se deberán hacer 100 archivos de tipo ViewController, uno por cada imagen. Simplemente se pueden tener dos vistas, donde la primera le mande algún dato a la segunda para que esta muestre la información correspondiente.

En este ejemplo se va a mostrar la comunicación entre estas dos vistas, revisando los siguientes temas:

  • Creación de un segundo ViewController.
  • Creación de un segue.
  • Insertar un Navigation Controller.
  • Crear un nuevo documento .swift
  • uso de la función prepareForSegue.

Elaboración del documento

En Xcode, ya sea desde el menú File o desde la ventana Welcome to Xcode, crea un nuevo proyecto de Xcode. En la ventana donde pide seleccionar el tipo de plantilla, elige de la sección Application en iOS la opción Single View Application.

prepareforsegue01

En la siguiente ventana, el nombre del proyecto se llamará DosVentanas. El nombre de Organización y el identificador puede ser lo que desees. Lo importante es que el lenguaje sea Swift. Para este ejemplo no importa definir un tipo de dispositivo específico, así que se quedará como Universal.

Ventana para definir la plantilla del proyecto de Xcode

En la siguiente pantalla, para definir donde se va a guardar el proyecto, puedes seleccionar donde gustes.




Creación de un segundo ViewController

Al crearse el proyecto, ve a Main.storyboard para añadir los elementos. De la misma forma que se puede añadir un botón o un campo de texto, dentro de la biblioteca de objetos se puede añadir una segunda vista. Incluso es el primer elemento que aparece.

Botón para seleccionar un View Controller

Para este ejemplo, necesitamos un View Controller básico. Para otras situaciones hay controladores especializados, como un Table View Controler, los cuales requieren más elementos. También es importante mencionar que sea el de color amarillo y no confundirlo con el elemento View, que es gris y que solo es una parte de una ventana.

Al arrastrarlo, basta con ponerlo en cualquier parte del storyboard, excepto encima del View Controller que ya existe.

Si la pantalla de la computadora es muy pequeña, no se podrán ver completamente los dos elementos. Para visualizarlos, haz click derecho y selecciona una opción de zoom.

Opciones de zoom en el storyboard

Ya contando con más espacio, es posible arreglar los view controllers del modo que se nos antoje. Vale la pena que, sin importar si el nuevo elemento lo ponemos a la izquierda del que ya existía, no por eso va a lanzarse primero. La flecha gris que tiene el view controller que ya estaba creado indica que es el inicia. Incluso se puede decir que hasta este momento la nueva ventana que acabamos de poner nunca aparecería en el proyecto. Se necesita poner una conexión entre ellos, pero antes de llegar a esa parte vamos a poner elementos. En el primer view controller, el de la flecha gris, coloca un botón. Y en el segundo, coloca un sabe.

Si no puedes colocar los elementos en este momento, es normal. Xcode solo permite que se puedan colocar los elementos cuando el zoom está al 100%. ¿Por qué? Es algo que yo también me pregunto.

Para este ejemplo recomiendo que los elementos se pongan lo más a la izquierda de la ventana y no muy pegados a la parte superior. Esto evitará que tengamos que hacer algunos ajustes de diseño.




Creación del segue

Si lo único que necesitas hacer es pasar de una vista a otra, la acción es muy simple. Incluso no necesita código. Lo único que hace falta es hacer un segue, que no es otra cosa que definir una transición de una ventana a otra.

Desde el botón del primer View Controller, aprieta ctrl y arrastra la línea que se crea hasta el segundo View Controller, no tiene que ser necesariamente en el label. Puede ser en cualquier parte del fondo. Al soltar el mouse, aparece una ventana para definir qué tipo de transición se realizará. En este caso selecciona Show de las opciones que están en Action Segue.

Opciones de Action Segue

Una vez que se hizo el segue, debe aparecer este ícono entre las dos ventanas, indicando que ya están conectadas.

Botón de segue

¡Listo! Es lo único que hace falta para ir de una ventana a otra. Puedes revisarlo,  apretando el botón de Build para que cree la prueba en el simulador, o en un dispositivo real si es que ya cuentas con una licencia de desarrollador.

Botón de Build

Al crearse la aplicación, al darle click al botón hará que la ventana dos aparezca. Si seleccionaste la opción show, la transición la hará de abajo hacia arriba.

El primer problema que se tiene ahora es que no hay forma de regresar a la primera ventana. Aunque se podría crear un segundo botón para repetir de manera inversa, entre las recomendaciones de diseño para aplicaciones de Apple se recomienda usar un Navigation Controller.

Anidación de un Navigation Controller

Este tipo de controlador permite que nos movamos a través de elementos que llevan una jerarquía, como es el caso de los que tenemos ahora. Se puede crear arrastrándolo desde Object Library, pero esta opción es recomendable cuando estamos empezando el proyecto. Ahora que ya llevamos camino avanzado, existe otra opción.

Seleccionando en el storyboard al primer ViewController, elige desde el menú Editor la opción Embed In, y después Navigation Controller.

Menu para crear un Navigation Controller

Con esto se creará un tercer controlador, el cual es meramente un visor de los dos que ya tenemos. Gráficamente solo pondrá una barra en la parte superior, en la que se colocarán los botones de navegación cuando hagan falta.

Al probar la aplicación, cuando estamos en la segunda ventana, se crea el botón de regreso a la primera.

prepareforsegue08

Ahora lo que falta es pasar datos de un lado a otro. Para ello, debemos ponerle cerebro a la segunda ventana, la cual hasta ahora es solamente un objeto de diseño.

Creación de un nuevo archivo .swift

Cuando creamos en el storyboard la segunda ventana, esta solamente existe de manera gráfica. Para la siguiente parte necesitamos decirle que haga algo en cuanto se dispare la función viewDidLoad, lo cual será asignarle texto al label. Pero para todo esto el View Controller necesita de un archivo .swift en donde poner todo eso y no se hace de manera automática. Se debe crear el archivo y después vincularlo con el View Controller que está en el storyboard.

Para crear el archivo, selecciona desde el menú File la opción New y después New File.

Menú para seleccionar un nuevo archivo

Aunque pudiera parecer obvio que la opción siguiente a elegir debería ser un documento de Swift, esto nos daría un archivo con muy poco código. Para tener algo más acabado, selecciona Cocoa Touch Class dentro de la opción Source de iOS.

Selección de un archivo de Cocoa Touch Class

En la siguiente ventana, es importante que el archivo sea subclase de UIViewController. El nombre del archivo lo vamos a llamar Dos, y el lenguaje debe ser Swift.

Opciones del archivo de Cocoa Touch

En la siguiente ventana, indica que el lugar para crear el archivo sea la carpeta DosVistas, donde se encuentran los demás archivos .swift del proyecto.

Carpeta para guardar el archivo nuevo

Ya tenemos un nuevo documento, Dos.swift, pero este no tiene todavía relación con el segundo View Controller. Para vincularlos, regresa al storyboard. Selecciona a la ventana que creaste, de preferencia en la barra de la parte superior, y desde el panel de Utilities elige el tercer botón, el cual es el inspector de identidad (Identity Inspector). El primer menú nos permite vincular una clase con la vista. De las opciones que se muestran, selecciona la clase que acabamos de hacer: Dos.

Opción para vincular la clase

Ya con esto nuestro elemento gráfico está vinculado al archivo Dos.swift. Ahora lo que sigue es empezar a programar.

Creación de una propiedad

La funcionalidad de este ejercicio será la siguiente. Al darle click al botón, disparará una función llamada prepareForSegue, la cual ya tiene idea de hacia qué View Controller se dirige. Como ya sabe quién es, puede leer sus propiedades. En una de ellas, una que vamos a crear, guardará la información que queremos que se ponga en el label. Antes de hacer esta función, conviene preparar la clase Dos.swift para que tenga la propiedad y también para que al cargar la ventana, la muestre en el label.

Todavía en el story board, realiza una conexión desde el label para crear una variable en el archivo. Esto se puede hacer rápidamente seleccionando el editor asistente.

Boton de editor asistente

Con esto se debe mostrar una segunda ventana al lado del storyboard. Si se tiene seleccionado al View Controller que hicimos, esta segunda ventana debe mostrar al archivo Dos.swift

Editor asistente

Parecido a como se hizo el segue, apretando ctrl y arrastrando desde el label hacia el archivo .swift, debe aparecer una línea. Apúntala a la parte superior de la clase (arriba de las funciones y abajo de la declaración de la clase), al soltar debe mostrar una ventana para poner los valores de la variable que debemos poner. En el campo Name, escribe miLabel. La ventana debe quedar de la siguiente manera.

Ventana para definir la variable miLabel

Después de darle click al botón Connect, debe escribir el siguiente código:

@IBOutlet weak var miLabel: UILabel!

El resto del ejercicio ya no necesita del storyboard, así que podemos regresar al editor standard para tener más espacio. También es buena idea crecer un poco el label, para que al recibir el texto se pueda leer bien.

Dentro del archivo Dos.swift, debajo de la variable que acabas de hacer, crea una variable que se va a llamar info. Como vamos a pasar un texto, basta con decirle que empiece con una cadena vacía.

var info = ""

Dentro de la función viewDidLoad(), asigna al texto del label el valor de info.

// Do any additional setup after loading the view.

miLabel.text = info

Lo último que falta es llenar a la variable con algún texto, pero esto será desde el otro documento.

Uso de prepareForSegue()

En el archivo ViewController.swift, declara la función prepareForSegue(). Esta forma parte de la clase ViewController y de todas las que la extienden, así que para usarla basta con escribirla. No es necesario hacer ninguna delegación o importar algo extra.

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {

}

Esta función, como ya lo había mencionado antes, se dispara previamente a la transición hacia el nuevo controller, pero ya sabe hacia dónde se dirige. Esa información la tiene en el parámetro segue, en específico en la propiedad destinationViewController. Lo único que tenemos que hacer es crear una variable de esa clase a la que vamos a ir, y ya teniendo eso podemos acceder a sus propiedades, incluyendo la que acabamos de hacer: info. Dentro de esa propiedad vamos a escribir algún texto.

La función quedará de la siguiente forma:

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {

        let destino = segue.destinationViewController as! Dos

        destino.info = "Texto desde View Controller"

 }

Prueba la aplicación. Al apretar al botón debe llevarnos a la otra ventana, y al llegar ahí el label debe de mostrar lo que acabamos de escribir: Texto desde View Controller.

Este ejemplo manda algo fijo y sencillo como una cadena, pero sirve como base para posteriormente pasar datos más complejos.




Archivos finales

ViewController.swift

//

//  ViewController.swift

//  DosVistas

//

//  Created by Alejandro Mena on 7/19/16.

//  Copyright © 2016 Argot Training. All rights reserved.

//
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view, typically from a nib.

    }
    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

        // Dispose of any resources that can be recreated.

    }
    

    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {

        let destino = segue.destinationViewController as! Dos

        destino.info = "Texto desde View Controller"

    }

}

Dos.swift

//

//  Dos.swift

//  DosVistas

//

//  Created by Alejandro Mena on 7/19/16.

//  Copyright © 2016 Argot Training. All rights reserved.

//

import UIKit

class Dos: UIViewController {

    @IBOutlet weak var miLabel: UILabel!

    var info = ""

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view.

        miLabel.text = info

    }

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

        // Dispose of any resources that can be recreated.

    }

    

    /*

    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation

    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {

        // Get the new view controller using segue.destinationViewController.

        // Pass the selected object to the new view controller.

    }

    */

}

 

Descarga el archivo final.

Be the first to comment

Leave a Reply

Your email address will not be published.


*