Jetpack Compose Glimmer se basa en Jetpack Compose e incluye elementos que admiten composición, componentes, comportamientos y un tema que están diseñados para lentes de IA con una pantalla. Con Glimmer, puedes compilar una IU nativa para lentes de IA con Compose, lo que hace que las experiencias de tu app cobren vida con menos código, herramientas potentes y APIs intuitivas de Kotlin.
Elementos que admiten composición de Jetpack Compose Glimmer
Jetpack Compose Glimmer proporciona @Composable funciones diseñadas para pantallas de lentes de IA
, como Text, Button y ListItem. Estas son algunas características únicas de los elementos que admiten composición 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 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 IA. 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:
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 específica y personalizada que desees compilar.
Modificadores de Jetpack Compose Glimmer
Los modificadores de Jetpack Compose Glimmer funcionan de forma idéntica a los modificadores de Compose , lo que te permite aumentar los elementos que admiten composición personalizando su diseño, apariencia y comportamiento. Jetpack Compose Glimmer puede introducir modificadores específicos o aplicar valores predeterminados únicos para el rendimiento y los comentarios visuales específicos de los lentes.
Profundidad de Jetpack Compose Glimmer
Los componentes de Jetpack Compose Glimmer usan la 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 IA es la combinación de la ubicación en el espacio z y las sombras. Para la mayoría de los componentes de alto nivel, como los elementos de la 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 de profundidad en
Modifier.surface o Modifier.depth.
Tema de Jetpack Compose Glimmer
Jetpack Compose Glimmer incluye un sistema de temas dedicado para lentes de IA.
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 IA. Todos los componentes de Jetpack Compose Glimmer están diseñados para la integración automática con los métodos de entrada específicos de los lentes de IA. El tema de Jetpack Compose
Glimmer se expone con la clase GlimmerTheme.
Al igual que otros temas en Jetpack Compose, GlimmerTheme incluye varios
subsistemas: colores, formas, tipografía e íconos (simbolografía). El tema de Jetpack
Compose Glimmer también incluye componentes de Jetpack Compose Glimmer
que puedes personalizar.
Colores
El sistema de colores de Jetpack Compose Glimmer incluye siete colores en su paleta optimizada, diseñados para la máxima visibilidad y concisión en las pantallas de lentes de IA en las que no se renderizan los valores negros.
GlimmerTheme.Ten en cuenta que los colores "On ..." no se exponen a través de GlimmerTheme. El sistema calcula automáticamente estos colores en función del color de fondo.
Estos colores se exponen a través de GlimmerTheme.colors.primary, con
valores para cada rol de color, como se describe en la siguiente tabla:
Rol de color |
Configuración predeterminada |
|---|---|
primary |
#9BBFFF |
secondary |
#4C88E9 |
positivo |
#63FEA8 |
negativo |
#FFA7A0 |
surface |
#262626 |
outline |
#606460 |
outlineVariant |
#42434A |
Ten en cuenta que, si bien surface, outline y outlineVariant están
marcados como personalizables, te recomendamos encarecidamente que no personalices estos
valores.
Formas
El sistema de formas de Jetpack Compose Glimmer define un conjunto de tratamientos de esquinas estándar y formas geométricas para los componentes, diseñados para crear un lenguaje visual coherente y minimalista en las IUs de lentes de IA, con todas las formas expuestas a través de GlimmerTheme.shapes.
Tipografía
El sistema de tipografía de Jetpack Compose Glimmer incluye seis estilos de tipografía para la legibilidad y la concisión en las pantallas de lentes de IA. 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.
Í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 lentes de IA, y suele aprovechar formas redondeadas como Material Symbols Rounded para una legibilidad óptima.