Navigation: Primeros pasos - Tutorial de Kotlin

El componente Navigation de Android te ayudará a establecer más fácilmente la navegación entre las diferentes pantallas de tu aplicación, sobre todo en los escenarios más complicados. Veámoslo con un ejemplo. Aquí tenemos un proyecto que emula la aplicación para un banco. Aunque ahora mismo no hace nada, nos sirve para explicar su estructura, ya que tiene varias pantallas. Tiene un Fragment como pantalla de login, tiene otro para crear una cuenta, tiene la pantalla principal y otro para crear transacciones. Vamos a comenzar por las dependencias de Navigation. Tenemos las dependencias para Java, las dependencias para Kotlin, la dependencia para trabajar con módulos y la dependencia para Test. Una vez tenemos las dependencias, vamos a crear nuestro grafo de navegación. Para ello, en el directorio res haremos clic derecho y seleccionamos New, Android Resource File. Aquí elegimos el nombre del archivo. Por ejemplo, «nav_graph». En Resource type seleccionamos Navigation y OK. Esto nos crea una carpeta navigation con nuestro archivo, además Android Studio abre el editor de navegación con él. En este, al igual que en el resto de archivos XML, podemos trabajar en código o en modo diseño. Vamos a añadir destinos a nuestro grafo. Un destino es cada una de las vistas a las que el usuario puede navegar, en nuestro caso están representadas por Fragments. Pulsamos el icono de nuevo destino, representado por un rectángulo y un signo más verde. Ahora el editor de navegación nos da varias opciones. Si todavía no tenemos nuestras vistas preparadas, podríamos crearlas ahora pulsando Create new destination. También podemos poner un placeholder que luego sustituiremos por un Fragment o una Activity. Por último, podemos seleccionar un Fragment o Activity que ya tengamos. en este caso voy a hacer eso, voy a seleccionar el Fragment de login, que será el primero al que acceda el usuario. Aquí podemos ver de qué está compuesto cada destino. Tiene el ID, el nombre, una etiqueta y el layout. Vamos a añadir el resto de nuestros destinos. Más, el Fragment de crear cuenta, más el principal, más el de transacciones. Como puedes ver, podemos mover nuestros destinos para formar un flujo visual. Lo siguiente que tendríamos que hacer es indicar cuál de los destinos es el destino inicial por el que vamos a iniciar la navegación. En nuestro caso es la pantalla de login y, como es la primera que hemos añadido, el editor de navegación lo ha puesto por nosotros. Puedes ver el icono de una casa en él. Si quisiéramos cambiarlo, seleccionaríamos otro y pulsaríamos el icono de la casa en la barra de herramientas. También podemos hacer clic derecho sobre el destino y seleccionar Set as Start Destination. Si vamos al código, también podemos ver en app startDestination nuestro destino inicial. Ahora que ya tenemos todos nuestros destinos, vamos a conectarlos. Los destinos se conectan mediante acciones y estas se representan con flechas. Las acciones normalmente conectan destinos, pero también se pueden crear acciones globales que nos lleven siempre a un determinado destino sin importar dónde estemos. Para crear la conexión, nos ponemos sobre el lado derecho de la vista origen hasta que aparece un círculo. Hacemos clic en el círculo y lo arrastramos hasta el destino al que queremos navegar. Con esto decimos que una de las posibles navegaciones de nuestra aplicación es un usuario que va de la pantalla de login a la pantalla de crear cuenta. Esta flecha representa la acción. Si vamos al código, vemos que se ha añadido la acción a la que se le ha dado un ID. Esta acción pertenece al origen y tiene un destino. Una vez tuviéramos todas nuestras conexiones, una parte importante es añadir el NavHost, que será el contenedor encargado de hospedar nuestros destinos y donde ocurrirá la acción. Vamos a añadirlo a nuestra Activity, para ello vamos a su layout. Aquí vamos a añadir el NavHostFragment. En app navGraph tenemos el nombre de nuestro grafo. Y con app defaultNavHost true nos aseguramos de que se intercepta el botón de retroceso. Con esto estaría todo configurado para navegar entre nuestra pantalla de login y la de creación de cuenta, pero todavía nos falta indicar en nuestro código el punto en el que hacerlo.