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 crear IU nativas para lentes con IA usando Compose, lo que permite que tus experiencias en la 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 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 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 e interactivas únicas de los lentes con IA. 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:
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 bloque de compilación más básico en Glimmer de Jetpack Compose: un lienzo en blanco para cualquier diseño o interacción personalizados 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, lo que te permite aumentar los elementos componibles personalizando su diseño, apariencia y comportamiento. Jetpack Compose Glimmer podría introducir modificadores específicos o aplicar valores predeterminados únicos para el rendimiento y la retroalimentación visual específicos de los lentes.
Profundidad del brillo de Jetpack Compose
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 lentes con IA es la combinación de la ubicació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 se enfoca un componente, 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 Glimmer de Jetpack Compose
Jetpack Compose Glimmer incluye un sistema de temas exclusivo para los lentes con 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 con IA. 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 con IA. 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: colores, formas, tipografía e íconos (simbología). El tema de Jetpack Compose Glimmer también incluye componentes de Jetpack Compose Glimmer que puedes personalizar.
Colores
El sistema de color de Glimmer de Jetpack Compose incluye siete colores en su paleta optimizada, diseñados para brindar la máxima visibilidad y concisión en las pantallas de lentes con IA en las que no se renderizan los valores negros.
GlimmerTheme.Ten en cuenta que los colores "En…" 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 |
#A8C7FA |
secondary |
#4C88E9 |
positivo |
#4CE995 |
negativo |
#F57084 |
surface |
#000000 |
outline |
#606460 |
outlineVariant |
#42434A |
Ten en cuenta que, si bien surface, outline y outlineVariant están marcados como personalizables, te recomendamos que no personalices estos valores.
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 los lentes con IA, con todas las formas expuestas a través de GlimmerTheme.shapes.
Tipografía
El sistema de tipografía de Glimmer de Jetpack Compose incluye seis estilos de tipografía para mejorar la legibilidad y la concisión en las pantallas de los lentes con IA. 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.
Í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 los lentes con IA, y suele aprovechar formas redondeadas, como Material Symbols Rounded, para una legibilidad óptima.