Jetpack Compose Glimmer se basa en Jetpack Compose y contiene elementos componibles, componentes, comportamientos y un tema diseñados para lentes con IA y pantalla. Con Glimmer, puedes compilar IU nativas para anteojos inteligentes 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 Glimmer de Jetpack Compose
Jetpack Compose Glimmer proporciona funciones @Composable diseñadas para pantallas de lentes con IA, como Text, Button y ListItem. Estas son algunas características únicas de los elementos componibles de Glimmer de Jetpack Compose:
- Diseño simplificado: Los componentes de
Surface, por ejemplo, tienen fondos negros o transparentes de forma predeterminada para la optimización de la visualización óptica. - Colores predeterminados optimizados: De forma predeterminada, Jetpack Compose Glimmer calcula el color del contenido en función del color de fondo, por lo que los desarrolladores rara vez necesitan establecer manualmente los colores del texto, lo que mejora la legibilidad sin trabajo adicional.
Enfoque diferenciado: El enfoque se indica con comentarios visuales basados en esquemas en lugar del efecto en cadena, lo que promueve una visibilidad clara.
Figura 1: Tres estados de enfoque en Jetpack Compose Glimmer, que se diferencian con comentarios visuales basados en esquemas. Elevación optimizada: Glimmer de Jetpack Compose usa sombras de caja limitadas para la separación visual.
Figura 2: Cinco niveles de elevación en Jetpack Compose Glimmer, que se diferencian con sombras de caja limitadas.
Componentes de Glimmer de Jetpack Compose
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 y de interacción únicas de los lentes de pantalla. Los componentes de Glimmer de Jetpack Compose se pueden personalizar con el tema de Glimmer de Jetpack Compose y se basan en funciones de Compose de nivel inferior para admitir métodos de entrada del usuario, como toques y deslizamientos, de forma predeterminada.
Para obtener más información sobre el uso de un componente específico, consulta las siguientes guías:
- Botones
- Tarjetas
- Íconos
- Botones de ícono
- Listas
- Elementos de lista
- Superficies
- Texto
- Botones de activación
- Chips de título
- Apilamiento vertical
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 en Jetpack Compose Glimmer, un lienzo en blanco para cualquier diseño o interacción personalizados y específicos que desees compilar.
Modificadores de Glimmer de Jetpack Compose
Los modificadores en 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 Glimmer de Jetpack Compose
Jetpack Compose Glimmer incluye un sistema de temas exclusivo para lentes de visualización.
El tema de Glimmer de Jetpack Compose 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 Glimmer de Jetpack Compose están diseñados para integrarse automáticamente con los métodos de entrada específicos de los lentes. El tema de Glimmer de Jetpack Compose 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 del efecto de profundidad
- Tamaños de íconos
Colores
El sistema de color de Glimmer de Jetpack Compose 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 con la iluminación impredecible del mundo real.
El sistema usa una paleta de tres partes con colores primarios, secundarios y neutros. Los colores neutros suelen servir como 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 Glimmer de Jetpack Compose incluye varios estilos de tipografía para mejorar 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 con pesos más gruesos, 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 todos los componentes de Glimmer de Jetpack Compose. Esto incluye el 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 Glimmer de Jetpack Compose 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 IU de lentes de visualización, con todas las formas expuestas a través de GlimmerTheme.shapes.
Niveles del efecto de profundidad
Los componentes de Glimmer de Jetpack Compose usan la profundidad para representar la jerarquía, lo que ayuda a distinguir visualmente los elementos que se muestran sobre otras tarjetas. La profundidad en los anteojos de pantalla es la combinación de la colocación en el espacio Z y las sombras. En el caso de 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 parámetro depthEffect 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 IU de lentes de visualización, y suele aprovechar formas redondeadas, como Material Symbols Rounded, para una legibilidad óptima.