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.