Jetpack Compose: componentes de fondo | de Zhang Chen | marzo de 2022
Implementar un diseño de dos niveles
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.
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.
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:
Esta parte calcula el valor alfa cuando se observa la actualización de estado:
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!
