Navegación en Android con Nav Host Controller y Ordenamiento de Tareas

Clase 14 de 19Curso de Jetpack Compose en Android

Resumen

¿Cómo integrar pantallas utilizando Android Navigation?

Al desarrollar aplicaciones móviles en Android, una funcionalidad crucial es permitir la navegación entre diferentes pantallas. Para lograr esto, Android ofrece herramientas poderosas a través de las librerías de Nap Host y Nap Controller. Estas son las piezas clave para gestionar de forma eficiente la transición entre distintas vistas dentro de una aplicación.

¿Qué es Nap Host Controller y cómo se configura?

El Nap Host Controller actúa como el controlador central que gestiona las rutas y las transiciones entre pantallas. Para comenzar, se debe incluir el Nap Host Controller dentro de nuestro Navigation Root Composable.

val navController = rememberNavController()
Composable {
    NavHost(
        navController = navController,
        startDestination = "home"
    ) {
        composable("home") { HomeScreen() }
        composable("tasks") { TaskScreen() }
    }
}
  • Modifier.fillMaxSize: Asegura que el elemento ocupe toda la pantalla o el espacio disponible.
  • Start Destination: Indica el punto de inicio donde el usuario accederá primero.

¿Cómo definir destinos con clases serializadas?

Para una navegación moderna y limpia, es recomendable evitar el uso de strings y, en su lugar, utilizar clases serializadas. Así garantizamos seguridad tipo en las rutas de navegación.

  • Etiqueta @Serializable: Cada destino se marca como serializable.

  • Clases Destino: Definimos una clase para cada pantalla, por ejemplo, HomeScreenDestination y TaskScreenDestination.

    @Serializable object HomeScreenDestination

    @Serializable object TaskScreenDestination

¿Cómo navegar entre pantallas mediante acciones?

Para pasar de una pantalla a otra, es vital definir las acciones y los eventos de clic que desencadenen la navegación.

  1. Definir lambda para navegación: Crear una función lambda que maneje el evento de clic y realice la transición deseada.

    fun navigateToTaskScreen() { navController.navigate("tasks") }

  2. Integrar en el botón: En el botón encargado de la acción, vincular la lambda para que al hacer clic redirija a la pantalla prevista.

    FloatingActionButton( onClick = { navigateToTaskScreen() } ) { Text(text = "+") }

¿Cómo volver a la pantalla anterior?

Para regresar a una pantalla previa, como desde la vista de Task a Home, implementamos una función de navegación hacia atrás.

  • Navigate Back: Permite limpiar el stack y retornar al destino principal.

    fun navigateBack() { navController.navigateUp() }

  • Intercepción de eventos: A través de when, capturamos cuando se requiere volver y aplicamos la navegación adecuada.

    when(action) { HomeScreenAction.OnAddTask -> navigateToTaskScreen() else -> navigateBack() }

¿Cómo ordenar las tareas por fecha?

Gestionar y ordenar las tareas creadas en la aplicación es esencial para ofrecer una buena experiencia al usuario. A través de la implementación de un campo de fecha, se puede clasificar eficientemente las tareas.

¿Cómo añadir y usar un campo de fecha?

  1. Agregar fecha a la tarea: Incorporamos un nuevo campo de tipo LocalDateTime a las tareas.

    data class Task( val title: String, val description: String, val date: LocalDateTime = LocalDateTime.now() )

  2. Ordenar tareas por fecha: Usamos la función sortByDescending para listar de forma ordenada las tareas, con las más recientes en primer lugar.

    val sortedTasks = tasks.sortedByDescending { it.date }

Al implementar estas técnicas, conseguimos una navegación fluida entre pantallas y una gestión óptima del contenido mostrado al usuario. Con la navegación configurada y las tareas organizadas, estamos listos para avanzar en la mejora de la interactividad y funcionalidad de nuestra aplicación.