En este artículo aprenderemos como navegar entre diferentes escenas mediante WatchKit, algo que necesitaremos en cualquier app que abordemos.
Introducción
En este artículo aprenderemos como realizar una navegación entre las diferentes escenas que componen nuestra app. Veréis que hay mucha similitud con respecto a la misma operativa con apps para iOS.
Navegando entre escenas
Al igual que cuando trabajamos con disposivos como iPhone o iPad, muchas veces necesitamos incluir en nuestra app varias pantallas, entre las cuales navegar cuando el usuario va accediendo a unas u otras funcionalidades.
En WatchKit tambien podemos hacer transiciones entre una y otra pantalla, utilizando los denominados Segues.
Existen dos tipos de segues en WatchKit:
- Push segues
- Modal segues
En ambos casos podemos hacer uso de estas transiciones a través de código o bien configurarlas visualmente desde nuestro Storyboard.
Trabajando con transiciones de tipo push
Al igual que en iOS, las transiciones de tipo push utilizan un sistema de pilas, donde podemos ir acumulando las diferentes pantallas que contiene una navegación. Cada vez que hacemos push de una nueva pantalla, esta se incorpora al primer plano, y la que allí se encontraba, pasa a la pila.
WatchKit nos permitirá disponer automáticamente de un botón atrás para navegar hacia anteriores pantallas.
Visualmente las pantallas a abandonar se esconden por la izquierda, y las nuevas a aparecer lo hacen por la derecha.
Si queremos hacer una navegación de tipo push desde código lo haremos muy facilmente como se indica en el siguiente ejemplo:
|
1 2 3 |
pushControllerWithName("DetalleViewController", context: nil) |
Cuando lo que queremos es abandonar la pantalla actual, para volver a la inmediatamente anterior, lo haremos mediante la acción pop:
|
1 2 3 |
popController() |
En este caso no es necesario indicar a qué controlador deseamos navegar, ya que será el inmediantamente anterior en la pila de navegación.
Si lo que necesitamos es navegar directamente a la primera pantalla de la pila, descartando todas las intermedias desde la que nos encontramos, podemos hacerlo haciendo uso del siguiente método:
|
1 2 3 |
popToRootController() |
Trabajando con transiciones de tipo modal
Una transición modal lo que hará será interrumpir la pantalla actual temporalmente, con una nueva ventana que en este caso se mostrará desde la parte inferior de la pantalla.
Estas ventanas modales, normalmente son utilizadas para mostrar información de configuración, o ventanas de confirmación para el usuario.
Si queremos hacer una transición modal desde código podemos hacerlo al igual que vimos anteriormente, con un método específico que WatchKit pone a nuestra disposición:
|
1 2 3 |
presentControllerWithName("ConfiguracionViewController", context: nil) |
Cuando queramos que la ventaja que hemos presentado modalmente desaparezca, y el usuario vuelva al lugar donde se encontraba, podemos destartar dicha ventana de la siguiente forma:
|
1 2 3 |
dismissController() |
Pongamonos a navegar
Para entender todo esto y ponerlo en práctica en un ejemplo, vamos a crear un nuevo controlador en nuestro Storyboard, al que navegaremos a través desde un botón situado bajo el botón “Calcula número” que creamos anteriormente.
En primer lugar vamos a crear un nuevo controlador, buscando el objeto Interface Controller en nuestra librería de objetos, y arrastrandolo al Storyboard.
A continuación, arrastraremos un nuevo botón al cual pondremos de nombre Configuración, y seleccionandolo y dejando pulsada la tecla Ctrl arrastraremos y soltaremos sobre el Interface Controller que acabamos de añadir. Esto nos mostrará un pequeño menú contextual donde podremos definir el tipo de transición que deseemos accionar al pulsar en dicho botón. En nuestro caso elegiremos la opción push.
Ahora que ya tenemos todo configurado correctamente, vamos a ejecutar el simulador y comprobaremos que al pulsar el botón Configuración, se produce automaticamente una navegación a la nueva ventana. Al haber seleccionado una transición de tipo push, esta navegación se produce de derecha a izquierda, y aparece automáticamente un botón para poder volver atrás.
Aunque cuando hemos creado nuestra transición hemos elegido que fuera de tipo push, esto es algo que podemos modificar en cualquier momento seleccionando la flecha e icono de la transición.
Una vez seleccionado, veremos en la parte derecha de la pantalla, que podemos configurar el Segue y cambiarlo en este caso a Modal.
Si volvemos a ejecutar el simulador, y pulsamos sobre el botón Configuración, veremos que la transición ha cambiado, y ahora la nueva ventana se visualiza desde la parte inferior de la pantalla hacia arriba. Además, aparece un nuevo botón Cancel, que al pulsarlo nos permite eliminar esta ventana y visualizar la que estaba debajo.
Ahora que ya sabemos como hacer facilmente transiciones entre Interface Controllers de forma visual, vamos a hacer lo mismo pero por código. Para ello, en primer lugar seleccionaremos la transición que hemos creado y la borraremos.
Ahora, dado que vamos a implementar estas trasnsiciones pero desde código, vamos a necesitar que el Interface Controller destino tenga un nombre que nos permita identificarle univocamente. Para ello, seleccionaremos el Interface Controller y en la parte derecha de la pantalla, dentro de la pestaña Attributes Inspector le configuraremos un Identifier.
Ya teniendo nuestro controlador identificado, podemos crear un IBAction para nuestro botón Configuración, tal y como hicimos anteriormente con Calcula número, es decir a través de la vista Assistant editor. En nuestro caso llamaremos configuración a la acción.
Hecho esto, podemos irnos al archivo InterfaceController.swift, que corresponde al código de nuestro primer controlador, e incluir el siguiente código dentro del método IBAction configuración:
|
1 2 3 4 5 |
@IBAction func configuracion() { pushControllerWithName("ConfiguracionViewController", context: nil) } |
Vemos que al ejecutar el simulador, el comportamiento que se produce es exactamente el mismo que cuando hemos implementado esta lógica visualmente. Si ahora, convertimos la transición en modal, veremos que de nuevo el comportamiento es el mismo:
|
1 2 3 4 5 |
@IBAction func configuracion() { presentControllerWithName("ConfiguracionViewController", context: nil) } |
Como véis, es muy sencillo tanto visualmente como desde código, crear navegación entre las diferentes pantallas o controladores que componen nuestra app para Apple Watch.
Conclusión
WatchKit, junto con Swift nos abren un nuevo universo de posibilidades, que tenéis a vuestro alcance con muy poquito esfuerzo. En el siguiente artículo hablaremos de como presentar grandes cantidades de información utilizando listados o tablas.
Swift
Si os hacéis un lío con el código Swift de este artículo, es porque aún no conocéis nuestro Curso Swift en español.
Podéis aprovecharos de nuestro nuevo precio con un descuento del 50% en la siguiente dirección:
https://www.udemy.com/swift-en-espanol/?couponCode=WATCHKIT
¡Disfrutarlo y nos vemos en el siguiente artículo!
Gracias Miguel por el artículo y por incluir cómo hacer las cosas tanto por código como usando InterfaceBuilder 🙂 Seguiremos pendientes de tus artículos