Generalidades

Jetpack Compose: componentes de fondo | de Zhang Chen | marzo de 2022

Jetpack Compose componentes de fondo de Zhang Chen

Mapa de Googles siempre ha sido una de mis aplicaciones favoritas. El diseño de dos niveles es conveniente para que los usuarios encuentren detalles mientras navegan por el mapa. Las extensiones en la interfaz facilitan el flujo de información y los gestos de arrastre hacen que los usuarios se sientan como magos. 🙂

Como desarrollador de Android, siempre me he preguntado cuánto trabajo de ingeniería se requiere detrás de escena para que la magia suceda.Esto podría ser cierto para los Android más antiguos Vista XML sistema.pero recientemente me sumergí en composición de mochila propulsora Cambié de opinión por completo, ahora la implementación mágica de dos niveles es casi gratuita para todos nosotros. composición de mochila propulsora.

Mi empresa es un proveedor de espacio de trabajo flexible. Su aplicación actualmente presenta el descubrimiento como pantalla de inicio, con la exploración del mapa en la parte superior y el desplazamiento por la habitación en la parte inferior.sala de navegación puede Solo admite desplazamiento horizontalSin embargo, nuestros usuarios comerciales (parte de nuestra base de usuarios) solo usan una ubicación de oficina, por lo que no están realmente interesados ​​en navegar por el mapa. Sin embargo, todos querían que el desplazamiento vertical de la lista de habitaciones fuera más fácil de detectar.

Jetpack Compose componentes de fondo de Zhang Chen
Actualmente se desplaza solo horizontalmente

Entonces, la pregunta es, ¿cómo convertir el diseño de interfaz de usuario actual en desplazamiento vertical de pantalla completa? Nuestro equipo de producto y diseño nos pidió que hiciéramos un prototipo rápido para explorar la viabilidad. asombrosamente, composición de mochila propulsora Realmente proporcionado un Una solución lista para usar llamada andamio de fondoEste es el resultado de una prueba de concepto.Para fines de demostración, cambié el caso de uso por Cine Navegar, pero es la misma idea.

1648691498 916 Jetpack Compose componentes de fondo de Zhang Chen
Prototipo con diseño de 2 niveles y desplazamiento vertical

Aquí está el repositorio del código fuente para cualquier persona interesada: https://github.com/chenzhang2006/TheaterFinder

Muy fácil de personalizar andamio de fondo Sigue la referencia. Pero aquí hay algunas notas rápidas que aprendí del POC para acelerar un poco la curva de aprendizaje.

Color de las mallas delanteras

Este parámetro define más que solo el color de la malla.si pasas color.sin especificarel efecto «máscara» se eliminará de la capa frontal en revelado estado, para que pueda interactuar con la capa frontal con gestos personalizados. Si no se proporciona este parámetro, el comportamiento predeterminado será «bloquear». revelado El estado y cualquier evento táctil activarán la capa frontal para atraer oscuro condición.

animación

Todas las animaciones en esta pantalla de muestra giran en torno a Estado de andamiaje de fondoEl siguiente fragmento de código es la actualización del estado del controlador para mostrar la capa inferior:

Inicie un efecto de rutina para animar la capa posterior.

Esta parte calcula el valor alfa cuando se observa la actualización de estado:

Calcula alfa basado en backgroundState.offset

mapa para escribir

acompañamiento de composición

Uso esta biblioteca para ocultar la barra de estado del sistema para maximizar mapa diseño.

Ejemplo de código fuente

andamio de fondo Se puede aplicar a muchos otros casos de uso en los que tiene sentido un diseño de búsqueda detallada o de lista a sublista.También es un gran ejemplo de lo poderoso y eficiente que puede ser. composición de mochila propulsora Poder.

aprender acerca composición de mochila propulsora En sí, me encantaría hacer un seguimiento con más publicaciones para compartir algunos detalles y consejos. ¡Estén atentos y feliz aprendizaje!

LEER  Cifrado de datos en Android Room DB | Autor: Nitin Verma | Junio ​​de 2021

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba