Integración de intents y estados en pantalla mapa con Compose

Curso de Android: Integración de APIs nativas

Contenido del curso

Introducción a la Integración Nativa en Android

Google Maps SDK

Servicios de Localización

Integración Maps con Localización

Manejo de permisos

Integración cámara

Servicios en Android

Transmisiones en Android (Broadcast)

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:05

Integración de intents y estados en pantalla mapa con Compose

Curso de Android: Integración de APIs nativas

Clase 17 de 33

Clase 17 / 33

Recursos

La integración efectiva de intents y estados con Jetpack Compose permite a los desarrolladores Android crear aplicaciones más claras y fáciles de mantener. En particular, trabajar con mapas y seguimiento de ubicación requiere un diseño específico en términos de entradas (intencciones o acciones del usuario) y salidas (estado de la pantalla y localizaciones actuales). Aquí aprenderás cómo estructurar correctamente estas interfaces.

¿Qué son los intents y cómo usarlos en la pantalla mapa?

Un intent representa una acción específica del usuario que interactúa directamente con la interfaz. En esta implementación, contamos con tres acciones principales:

Iniciar rastreo: para arrancar por primera vez el seguimiento.
Pausar rastreo: permite detener temporalmente el seguimiento.
Reanudar rastreo: continúa un seguimiento previamente pausado.

Estos intents se definen en una interfaz específica, ayudando así a organizar claramente las diferentes acciones disponibles para los usuarios.

¿Qué información maneja el estado del rastreo en nuestra pantalla?

El estado (state) es representado por una data class llamada tracking location state. Esta clase permite gestionar información diversa, como:

isTracking: indica si el seguimiento de ubicación está activo (Booleano, inicializado en false).
isPaused: señala si actualmente está pausado el seguimiento (Booleano, inicializado en false).
currentLocation: almacena la ubicación actual del usuario (puede iniciar como null).
selectedLocation: captura la ubicación seleccionada con marca de tiempo para funcionalidades futuras (inicia como null).
trackingDataSegments: lista de listas que almacenan los segmentos de recorrido en seguimiento (inicialmente vacía).

Mantener esta información organizada y accesible permite que la aplicación responda de manera adecuada a las acciones del usuario y gestione correctamente su estado interno.

¿Cómo construir la pantalla mapa en Jetpack Compose?

Crear la interfaz gráfica implica construir una función composable llamada map screen.

Definición básica del composable

Este composable recibe dos elementos principales:

Una función lambda onAction, encargada de enviar las acciones realizadas por el usuario.
Un tracking location state, representando el estado actual de la pantalla.

Diseño con Scaffold y botones flotantes

El layout se organiza dentro de un Scaffold, facilitando añadir elementos como botones flotantes, barras y espaciados internos:

Utilizamos un Floating Action Button con posición central.
Este botón cambia su imagen de acuerdo al estado actual del rastreo:
- Ícono "play" cuando el rastreo está pausado.
- Ícono "pausa" mientras el seguimiento está activo.

Implementación del mapa visual

En un contenedor Box, utilizamos paddingValues para garantizar que los contenidos no interfieran con la barra de notificaciones o navegación. Dentro del Box ubicamos la sección del mapa (mapSection) que refleja:

La ubicación actual según el estado proporcionado.
Los segmentos del seguimiento actualmente activos.

El uso del modificador fillMaxSize asegura que el mapa ocupe toda la pantalla disponible, proporcionando así una experiencia óptima a los usuarios.

Comenta tus dudas y comparte cómo aplicas estas implementaciones en tu proyecto actual.

Resumen

¿Qué son los intents y cómo usarlos en la pantalla mapa?

Un intent representa una acción específica del usuario que interactúa directamente con la interfaz. En esta implementación, contamos con tres acciones principales:

Iniciar rastreo: para arrancar por primera vez el seguimiento.
Pausar rastreo: permite detener temporalmente el seguimiento.
Reanudar rastreo: continúa un seguimiento previamente pausado.

Estos intents se definen en una interfaz específica, ayudando así a organizar claramente las diferentes acciones disponibles para los usuarios.

¿Qué información maneja el estado del rastreo en nuestra pantalla?

El estado (state) es representado por una data class llamada tracking location state. Esta clase permite gestionar información diversa, como:

isTracking: indica si el seguimiento de ubicación está activo (Booleano, inicializado en false).
isPaused: señala si actualmente está pausado el seguimiento (Booleano, inicializado en false).
currentLocation: almacena la ubicación actual del usuario (puede iniciar como null).
selectedLocation: captura la ubicación seleccionada con marca de tiempo para funcionalidades futuras (inicia como null).
trackingDataSegments: lista de listas que almacenan los segmentos de recorrido en seguimiento (inicialmente vacía).

Mantener esta información organizada y accesible permite que la aplicación responda de manera adecuada a las acciones del usuario y gestione correctamente su estado interno.

¿Cómo construir la pantalla mapa en Jetpack Compose?

Crear la interfaz gráfica implica construir una función composable llamada map screen.

Definición básica del composable

Este composable recibe dos elementos principales:

Una función lambda onAction, encargada de enviar las acciones realizadas por el usuario.
Un tracking location state, representando el estado actual de la pantalla.

Diseño con Scaffold y botones flotantes

El layout se organiza dentro de un Scaffold, facilitando añadir elementos como botones flotantes, barras y espaciados internos:

Utilizamos un Floating Action Button con posición central.
Este botón cambia su imagen de acuerdo al estado actual del rastreo:
- Ícono "play" cuando el rastreo está pausado.
- Ícono "pausa" mientras el seguimiento está activo.

Implementación del mapa visual

La ubicación actual según el estado proporcionado.
Los segmentos del seguimiento actualmente activos.

El uso del modificador fillMaxSize asegura que el mapa ocupe toda la pantalla disponible, proporcionando así una experiencia óptima a los usuarios.

Comenta tus dudas y comparte cómo aplicas estas implementaciones en tu proyecto actual.

Introducción a la Integración Nativa en Android

API nativas de Android con Kotlin y Compose

Configuración inicial de proyecto Android con Kotlin DSL y Hilt

Google Maps SDK

Configuración de API key de Google Maps para Android

Creación de marcadores personalizados en Google Maps con Compose

Cómo dibujar polilíneas en mapas con Jetpack Compose

Centrado automático de mapas con Camera Update Factory

Servicios de Localización

Kotlin Flows para medir tiempo en Android

Simulación de ubicación GPS en emulador y dispositivo Android

Modelos de localización propios con Clean Architecture

Callbacks de Android convertidos en Flows

Inyección de dependencias para observar localización en Android

LocationTracker con StateFlow para rastreo en Android

State Flows para controlar localización y tiempo en Kotlin

Configuración y pruebas de Location Tracker en Android

Integración Maps con Localización

Integración de ubicación actual en mapas interactivos

Creación de polilíneas con datos reales en mapas de Android

Integración de intents y estados en pantalla mapa con Compose

TrackingMapViewModel con Hilt y StateFlow

Manejo de permisos

Permisos de Android en tiempo de ejecución

Creación de diálogos de permisos reutilizables en Android

Gestión de permisos de localización y notificaciones en Android

Implementación de solicitud de permisos con LaunchedEffect en Compose

Integración cámara

Cómo guardar fotos en Android con PhotoHandler

Conversión de Bitmaps a Byte Arrays con Extension Functions

CameraViewModel con Hilt y StateFlow

Configuración de métodos del ViewModel para gestión de cámara

Integración de CameraX con Jetpack Compose en Android

Creación de pantalla de previsualización de fotos con Jetpack Compose

Galería de fotos en marcadores del mapa

Servicios en Android

Servicios en segundo plano en Android

Configuración de foreground services y notificaciones en Android

Transmisiones en Android (Broadcast)

Broadcast Receivers para escuchar eventos del sistema en Android

Prueba completa de aplicación Android con cámara y localización

Integración de intents y estados en pantalla mapa con Compose