1. Antes de comenzar
¡Felicitaciones! Compilaste tu primera app en Jetpack Compose con navegación entre varias pantallas. Ya puedes poner en práctica lo que aprendiste.
Este ejercicio se centra en la creación de los componentes necesarios para agregar navegación a una app con varios elementos de pantalla que admiten composición. El material amplía lo que aprendiste en el codelab Cómo navegar entre pantallas con Compose y te permite aplicar ese conocimiento para agregar navegación a una app existente.
El código de la solución estará disponible al final, pero intenta resolver los ejercicios antes de comprobar las respuestas. Considera la solución como una forma de implementar la app.
Requisitos previos
- El curso Aspectos básicos de Android en Compose a través del codelab Cómo navegar entre pantallas con Compose
Requisitos
- Una computadora con acceso a Internet y Android Studio instalado
- El código de partida para la app de Lunch Tray
Qué compilarás
En estos problemas prácticos, agregarás navegación para completar la app de Lunch Tray. La app de Lunch Tray es una app interactiva con tres pantallas para pedir almuerzos. Cada pantalla representa uno de los tres tipos de platos del menú que puedes seleccionar: un plato principal, una guarnición y un acompañamiento.
Los problemas prácticos se dividen en secciones, en las que harás lo siguiente:
- Crear una referencia para cada pantalla en la que navegue el usuario
- Inicializar un controlador de navegación
- Crear una barra superior que muestre el título de la pantalla y los botones de navegación (si corresponde)
- Configurar un host de navegación que determine el enrutamiento de una pantalla a la siguiente
La app final se verá de la siguiente manera:
2. Prepárate
Descarga el código de inicio
- En Android Studio, abre la carpeta
basic-android-kotlin-compose-training-lunch-tray. - Abre el código de la app de Lunch Tray en Android Studio.
3. Enum de pantalla
En esta sección, crearás una clase enum a fin de conservar constantes para cada una de las siguientes pantallas de la app de Lunch Tray:
- Inicio
- Menú de platos principales
- Menú de guarniciones
- Menú de acompañamientos
- Confirmación de la compra
Cada pantalla debe tener un título asociado en forma de string. Las cadenas están disponibles en el código de partida como recursos.
4. Inicialización y controlador de navegación
En esta sección, crearás el controlador de navegación. También inicializarás la entrada de la pila de actividades y el nombre de la pantalla actual.
El nombre de la pantalla actual debe ser el nombre de la pantalla inicial o el nombre de la pantalla de destino (si existe).
5. AppBar
Crea un elemento de componibilidad para la AppBar del elemento de componibilidad Scaffold. La AppBar debería mostrar el título de la pantalla actual. Si es posible, el botón de navegación hacia atrás adecuado también debería aparecer en la pantalla. La navegación hacia atrás no debe estar disponible en la pantalla Inicio.
Captura de pantalla final
Las siguientes capturas de pantalla muestran dos ejemplos de la AppBar: una sin el botón Arriba y otra con el botón.
Especificaciones de IU
Usa el ícono Icons.Filled.ArrowBack para el botón de navegación hacia atrás.
6. Host de navegación
En este ejercicio, compilarás el enrutamiento de navegación para la app de Lunch Tray con el host de navegación.
En el siguiente diagrama, se muestra el flujo de navegación de la app de Lunch Tray:
- El botón Start Order de la pantalla Start navega a la pantalla Entree menu.
- El botón Siguiente en la pantalla Menú de platos principales navega a la pantalla Menú de guarniciones.
- El botón Siguiente de la pantalla Menú de guarniciones navega a la pantalla Menú de acompañamiento.
- El botón Siguiente en la pantalla Menú de acompañamiento navega a la pantalla Pagar.
- El botón Enviar en la pantalla Pagar navega a la pantalla Inicio.
- En cualquier pantalla, el botón Cancelar permite regresar a la pantalla Inicio.
Resultado final
Una vez finalizada la implementación, el flujo de navegación de tu app debería verse de la siguiente manera:
