Implementación de Tracking de Ubicación en Pantalla de Mapas con JetPack Compose

Comenzar el desarrollo de una pantalla principal para aplicaciones de mapas en Android implica definir cuidadosamente entradas y salidas a través del uso de Intents y estados. Este enfoque facilita la gestión clara y organizada dentro de la aplicación utilizando Jetpack Compose, como veremos detalladamente.

¿Qué es un Intent y por qué es importante en nuestra aplicación?

Un Intent en Android es una acción o intención del usuario expresada dentro de una pantalla. Específicamente, trabajamos con Tracking Intent, que define acciones como iniciar, pausar y resumir un proceso de rastreo:

• Iniciar: Primera acción para comenzar el rastreo.
• Pausar: Acción de pausa temporal del rastreo.
• Resumir: Reanudar un rastreo que ya había sido comenzado anteriormente.

Si aún no estás familiarizado con este término, se recomienda consultar previamente cursos básicos como los de Jetpack Compose o MVVM en Android.

¿Cómo definimos los estados para nuestra interfaz de mapa?

En Jetpack Compose utilizaremos una dataclass denominada Tracking Location State para manejar las diferentes situaciones o salidas visuales en nuestra pantalla del mapa. Este estado incluirá:

• isTracking: Indica si actualmente se realiza el rastreo (boolean, false inicialmente).
• isPaused: Estado de la pausa del rastreo (boolean, false inicialmente).
• currentLocation: Ubicación actual (inicia en null**).
• selectedLocation: Localización seleccionada que incluye una marca de tiempo (para uso futuro todavía no implementado).
• trackingDataSegments: Lista que almacena segmentos de datos de localización (inicializa vacía).

Este esquema estructurado permite una gestión ágil y clara de la información durante el uso de la app.

¿Cómo implementamos una pantalla básica en Jetpack Compose?

La pantalla principal denominada MapScreen es una función composable, no una clase, permitiendo su integración sencilla y dinámica en la aplicación. La construcción básica implica:

• Crear un Scaffold que contendrá elementos de UI.
• Insertar un Floating Action Button ubicado en una posición central (FabPosition.Center).
• Cambiar el ícono del botón según el estado actual (Play o Pause):
• Si se encuentra pausado, mostrará el ícono de playa indicando que se puede continuar.
• Si está activo, el botón mostrará el ícono de pausa.

FloatingActionButton(onClick = { /* acción pendiente */ }) {
    if (state.isPaused) {
        Image(imageVector = Icons.Default.PlayArrow,
              modifier = Modifier.size(36.dp))
    } else {
        Image(imageVector = Icons.Default.Pause,
              modifier = Modifier.size(36.dp))
    }
}

Utilizamos PaddingValues para evitar superposición del contenido con la barra de estado y navegación, ajustando la interfaz para una mejor experiencia de usuario.

Box(modifier = Modifier.fillMaxSize().padding(paddingValues)) {
    MapSection(
        currentLocation = state.currentLocation,
        isTrackingFinish = false,
        localizaciones = state.trackingDataSegments,
        modifier = Modifier.fillMaxSize()
    )
}

La implementación adecuada de estos elementos contribuye a un mayor orden y eficiencia en el desarrollo práctico con Jetpack Compose.

¿Te interesa compartir tu experiencia o tienes alguna pregunta específica sobre este proceso en Jetpack Compose? ¡Coméntanos y sigue aprendiendo!