Jetpack Compose Glimmer se basa en Jetpack Compose e incluye elementos componibles, componentes, comportamientos y un tema diseñados para lentes con IA con una pantalla. Con Glimmer, puedes compilar una IU nativa para lentes de visualización con Compose, lo que permite que las experiencias de tu app cobren vida con menos código, herramientas potentes y APIs intuitivas de Kotlin.
Elementos componibles de Jetpack Compose Glimmer
Jetpack Compose Glimmer proporciona @Composable funciones diseñadas para pantallas de lentes con IA
, como Text, Button y ListItem. Estas son algunas características únicas de los elementos componibles de Jetpack Compose Glimmer:
- Estilo simplificado: Los componentes
Surface, por ejemplo, usan fondos negros o transparentes de forma predeterminada para la optimización de la pantalla óptica. - Valores predeterminados de color optimizados: Jetpack Compose Glimmer calcula el color del contenido en función del color de fondo de forma predeterminada, por lo que los desarrolladores rara vez necesitan configurar los colores del texto de forma manual, lo que mejora la legibilidad sin ningún trabajo adicional.
Enfoque diferenciado: El enfoque se indica con comentarios visuales basados en contornos en lugar del efecto de ondulación, lo que promueve una visibilidad clara.
Figura 1. Tres estados de enfoque en Jetpack Compose Glimmer, que se diferencian con comentarios visuales basados en contornos. Elevación optimizada: Jetpack Compose Glimmer usa sombras de cuadro limitadas para la separación visual.
Figura 2: Cinco niveles de elevación en Jetpack Compose Glimmer, que se diferencian con sombras de cuadro limitadas.
Componentes de Jetpack Compose Glimmer
Jetpack Compose Glimmer incluye su propio conjunto de componentes diseñados de forma personalizada, similares a los componentes de Jetpack Compose, pero optimizados específicamente para las demandas visuales e interactivas únicas de los lentes de visualización. Los componentes de Jetpack Compose Glimmer se pueden personalizar con el tema de Jetpack Compose Glimmer y se basan en funciones de Compose de nivel inferior para admitir métodos de entrada del usuario , como tocar y deslizar, de forma predeterminada.
Para obtener más información sobre el uso de un componente específico, consulta las siguientes guías:
- Botones
- Tarjetas
- Pagers horizontales
- Íconos
- Botones de íconos
- Listas
- Elementos de listas
- Plataformas
- Texto
- Botones de activación
- Chips de título
- Pilas verticales
- Indicador de entrada de voz
Si uno de estos componentes de alto nivel no funciona para tu caso de uso, puedes
usar un surface para compilar un componente personalizado. Las superficies son el componente básico más elemental en Jetpack Compose Glimmer: un lienzo en blanco para cualquier diseño o interacción específica y personalizada que quieras compilar.
Modificadores de Jetpack Compose Glimmer
Los modificadores de Jetpack Compose Glimmer funcionan de forma idéntica a los modificadores de Compose, que te permiten aumentar los elementos componibles personalizando su diseño, apariencia y comportamiento. Jetpack Compose Glimmer incluye modificadores y valores predeterminados únicos para el rendimiento y los comentarios visuales específicos de los lentes.
Tema de Jetpack Compose Glimmer
Jetpack Compose Glimmer incluye un sistema de temas dedicado para lentes de visualización.
El tema de Jetpack Compose Glimmer implementa una paleta simplificada y optimizada de colores, tipografía y formas. Esto promueve la máxima visibilidad y concisión para los lentes de visualización. Todos los componentes de Jetpack Compose Glimmer están diseñados para la integración automática con métodos de entrada específicos de los lentes. El tema de Jetpack Compose
Glimmer se expone con la clase GlimmerTheme.
Al igual que otros temas en Jetpack Compose, GlimmerTheme incluye varios
subsistemas que se describen brevemente en las siguientes secciones junto con sus
atributos personalizables:
- Colores
- Tipografía
- Valores de espaciado de componentes
- Formas
- Niveles de efecto de profundidad
- Tamaños de íconos
Colores
El sistema de colores de Jetpack Compose Glimmer está diseñado para pantallas aditivas
y entornos reales. A diferencia de los temas estándar de Android, los GlimmerTheme
Colors priorizan los fondos oscuros con semitransparencia y acentos vibrantes
para garantizar que el contenido sea legible en condiciones de iluminación impredecibles del mundo real.
El sistema usa una paleta de tres partes con colores primarios, secundarios y neutros. Los colores neutros suelen servir como las superficies físicas de la IU espacial, mientras que los colores primarios y secundarios proporcionan indicaciones visuales claras para la interacción y la marca.
GlimmerTheme.Tipografía
El sistema de tipografía de Jetpack Compose Glimmer incluye varios estilos de tipografía para la legibilidad y la concisión en los lentes de visualización. Estos estilos están diseñados para maximizar el contraste y mejorar la legibilidad del texto a través de pesos más audaces, un espaciado entre letras más amplio y alturas de línea adecuadas. Estos estilos se exponen a través de
GlimmerTheme.typography.
Valores de espaciado de componentes
Estos valores se usan para garantizar un espaciado coherente en los componentes de Jetpack Compose Glimmer. Esto incluye los padding de los componentes, el espaciado entre componentes y otros elementos de espaciado. Ten en cuenta que cambiar estos valores afecta el tamaño predeterminado de la mayoría de los componentes.
Formas
El sistema de formas de Jetpack Compose Glimmer define un conjunto de tratamientos de esquinas
y formas geométricas estándar para los componentes, diseñados para crear un lenguaje visual coherente
y minimalista en las IUs de los lentes de visualización, con todas las formas expuestas
a través de GlimmerTheme.shapes.
Niveles de efecto de profundidad
Los componentes de Jetpack Compose Glimmer usan profundidad para representar la jerarquía, lo que ayuda a distinguir visualmente los elementos que se muestran arriba (sobre) otras tarjetas. La profundidad en los lentes de visualización es la combinación de la ubicación en el espacio z y las sombras. En la mayoría de los componentes de alto nivel, como los elementos de lista, la profundidad se aplica automáticamente según el estado de enfoque. Cuando un componente está enfocado, gana profundidad; cuando pierde el enfoque, vuelve a su estado normal. Sin embargo, para
trabajar con componentes personalizados, puedes usar el depthEffect parámetro en
Modifier.surface o depthEffect.
Tamaños de íconos
El sistema de íconos de Jetpack Compose Glimmer está diseñado para integrarse de forma coherente con el lenguaje visual simplificado de las IUs de los lentes de visualización, y suele aprovechar formas redondeadas como los símbolos de Material Rounded para una legibilidad óptima.