Integración de galería fotográfica en mapas con Jetpack Compose
Clase 29 de 33 • Curso de Android: Integración de APIs nativas
Resumen
En esta sesión aprenderás a incorporar componentes de interfaz (UI components) en tus pantallas de mapa para mostrar las fotos tomadas con la cámara integrada. Utilizando Jetpack Compose, implementarás marcadores interactivos que mostrarán imágenes tomadas desde ubicaciones específicas, incrementando así la funcionalidad visual y la interacción con tus mapas.
¿Qué son tracking intents y cómo agregarlos fácilmente?
El primer paso consiste en añadir dos nuevos intents al tracking intent
. Estos facilitarán la interacción con los marcadores creados al hacer clic sobre ellos:
- Mostrar diálogo: permite visualizar fotos guardadas en una localización específica.
- Dismiss dialog: elimina el diálogo al finalizar la visualización.
Es recomendable utilizar copiado desde el repositorio del proyecto para garantizar la correcta y rápida integración de estos elementos.
¿Cómo crear clusters para tus fotos en mapas con Compose?
Para ofrecer un panorama claro de la cantidad de fotos tomadas en un punto determinado del mapa, se utiliza un componente denominado photo cluster
. Este componente muestra, además del número de imágenes, una vista de la primera fotografía en forma circular o un ícono si no encuentra fotografía válida.
Los pasos clave a seguir incluyen:
- Crear un archivo denominado
photo cluster
. - Agregar un composable que recibe una localización con una lista de fotos.
- Mostrar un pequeño distintivo (badge) indicando la cantidad de fotos.
- Manejo adecuado para visualizar imágenes usando funciones de extensión ya disponibles.
- Mostrar un ícono simple si no se puede cargar la foto.
Estos clusters se organizan en una sección propia (Cluster section
) y son rápidamente generados mediante código reutilizable del repositorio.
¿De qué manera se construye una galería interactiva con Compose?
Para visualizar claramente las imágenes guardadas, se establece una galería interactiva denominada photo gallery
. Al hacer clic en un marcador específico, activará la galería de fotos correspondiente usando Jetpack Compose:
- Creación de una sección independiente de galería (
photo gallery
). - Usar componentes como
horizontal pager
. - Incorporar funciones propias para visualizar imágenes mediante bitmaps.
- Al hacer clic en una foto, maximiza su visualización agregando opciones como el botón cerrar.
¿Cómo integrar diálogos a tu interfaz de Maps?
Complementando la interfaz actual, se agregan diálogos que permiten mostrar y ocultar fácilmente la galería de fotos:
- La optimización incluye diálogos específicos para manejar visualización y cierre fluidamente.
- Determinar claramente las acciones del usuario mediante dismiss dialog
y actualización del estado correspondiente.
¿Cómo probar en el emulador tu aplicación con marcadores y diálogos?
Al completar la integración, haz pruebas en el emulador siguiendo estos pasos:
- Activa una ruta en tu app.
- Toma fotos utilizando la cámara integrada.
- Pausa el seguimiento durante la captura.
- Observa cómo se crean marcadores exclusivos.
- Revisa las imágenes visualizadas al tocar los marcadores creados.
Al realizar la prueba, notarás que al cerrar la aplicación el registro se reinicia completamente. Para solucionar esto, se abordarán técnicas avanzadas como el uso de servicios, permitiendo que tu aplicación continúe guardando rutas e imágenes en segundo plano.
Este ejercicio ofrece fundamentos sólidos y prácticos para combinar la localización, captura fotográfica e interacción visual dentro de una misma aplicación móvil.