En este módulo trataremos la Navegación con JetPack Compose.
Video Navigation with JetPack Compose
Lecturas y enlaces relacionados:
- Repaso: Revisar Flujo de datos unidireccional en Jetpack Compose
- Principios de navegación
- Navegación
- Cómo navegar con Compose
- How to navigate using Jetpack Compose Navigation with examples (sencillo y al grano)
- Understand Jetpack Compose Navigation in 3 Minutes
- Navigation Drawer in Jetpack Compose
- Drawer Navigation using Material 3 in Jetpack Compose
Navegación básica
Cupcacke: Introducción a la Navegación:
Unidad 4 : Ruta 2 Navegación y arquitectura de la app -> TRAINING ->ANDROID BASICS WITH COMPOSE -> NAVIGATION AND ARCHITECTURE -> ARCHITECTURE
TODO: Realizar el codelab en Cómo navegar entre pantallas con Compose –> Codelab
En GitHub :
Cupcake starter branch
Cupcake codelab branch
Cupcake Ejercicios branch
Hemos tratado:
- Nevegación: Navigation Host, Navigation Controller, Destinations.
- Navigation Host (NavHost) : Es un objeto de Android que alojará los distintos objetos composables por los que podemos navegar. En principio aloja el inicial StartDestination y conforme navegamos va cambiando el composable que muestra. Los composables que forman parte de la navegación se añaden al navigation host NavGraphBuilder, que es el último parámetro del objeto Navigation Host.
- Navigation Controller (NavController): Es el gestror de la navegación. Controlará que destino (composable) se mostrará en el NavHost (de entre los declarados en el NavGraphBuilder (contenido del NavHost))
- Destinations: Son los distintos composables a los que vamos a poder navegar a través del NavController y que se mostrarán en el NavHost. De hecho se declaran en él gracias a la función Composable genérica.
Cada Composable obtiene una ruta por parámetro (el nombre de un composable) que los tenemos definidos en una enum. El content de cada composable al que navegamos incluye un composable que bien definimos en ese momento o llamamos a la función que lo define, como es el caso. Tenemos definidos 3 composables a los que navegar en distintos ficheros: StartOrderScreen.kt, SelectOptionScreen.kt y SummaryScreen.kt.
Aunque el composable SelectOptionScreen se utiliza en dos Destinations distintos, por lo que en total tenemos 4 “pantallas” (destinations) - BackStack y BackStackEntry
TODO: Ejercicio:
A partir del resultado del codelab, modificar el código para que la barra superior muestre: la cantidad y la “pantalla” en la que estamos, excepto en la “pantalla” inicial. Ver las siguientes capturas para hacerse una idea
TODO: Ejercicio:
Modificar el código para que en la pantalla de resumen, cuando enviamos el pedido a otra aplicación, aparezca un único botón con el texto “New Order” que nos lleva a la “pantalla” inicial. Ver captura de pantalla.
Lunch Tray: Compose Navigation – Practica:
Unidad 4 : Ruta 2 Navegación y arquitectura de la app -> TRAINING ->ANDROID BASICS WITH COMPOSE -> NAVIGATION AND ARCHITECTURE -> ARCHITECTURE
TODO: Realizar el codelab en Práctica: Cómo agregar navegación –> Codelab
Revisar el Starter que he subido en mi GitHub puesto que se ha simplificado el Git y se ha modificado la estructura del proyecto.
TODO: Revisar y analizar la nueva estructura de proyecto.
TODO: Ejercicio : En la última pantalla “CheckOut” cuando se realiza el supuesto envío (botón Submit) lanzar un Toast para indicar que se ha enviado el pedido.
En GitHub :
Lunch Tray starter branch
Lunch Tray codelab branch
Hemos tratado:
- Lanzar un Toast con Compose.
- Navegación:
Obtener el navController – Obtener la cima del BackStack – De ésta, obtener el nombre de su ruta – Creamos el NavHost – Definimos en él todos los Destinos via la función composable() - Estructura de la la App, organizamos lo más posible para tener componentes reutilizables y separamos la lógica de negocio de la Interfaz de usuario. Agrupamos las pantallas en flujos de pantallas por casos de uso.
Navegación Adaptativa
Reply: App adaptable con navegación dinámica
Unidad 4 : Ruta 3 Adáptate a diferentes tamaños de pantalla -> TRAINING ->ANDROID BASICS WITH COMPOSE -> NAVIGATION AND ARCHITECTURE -> ARCHITECTURE
TODO: Realizar el codelab en Compila una app adaptable con navegación dinámica –> Codelab
En GitHub :
Hemos tratado:
Sports: Práctica: Compila una app de deportes
Unidad 4 : Ruta 3 Adáptate a diferentes tamaños de pantalla –> TRAINING ->ANDROID BASICS WITH COMPOSE -> NAVIGATION AND ARCHITECTURE -> ARCHITECTURE
TODO: Realizar el codelab en Práctica: Compila una app de deportes –> Codelab
En GitHub :
Hemos tratado:
MyCity: Proyecto: Crea una app de tu ciudad
Unidad 4 : Ruta 3 Adáptate a diferentes tamaños de pantalla –> TRAINING ->ANDROID BASICS WITH COMPOSE -> NAVIGATION AND ARCHITECTURE -> ARCHITECTURE
TODO: Realizar el codelab en Proyecto: Crea una app llamada My city –> Codelab
En GitHub :
Hemos tratado: