O Jetpack Compose Glimmer é criado com base no Jetpack Compose e inclui elementos combináveis, componentes, comportamentos e um tema projetados para óculos de IA com uma tela. Com o Glimmer, é possível criar uma interface nativa para óculos com IA usando o Compose, dando vida às experiências no app com menos código, ferramentas eficientes e APIs Kotlin intuitivas.
Componíveis do Jetpack Compose Glimmer
O Glimmer do Jetpack Compose oferece funções @Composable personalizadas para telas de óculos de IA, como Text, Button e ListItem. Confira
algumas características exclusivas dos combináveis do Glimmer do Jetpack Compose:
- Estilo simplificado: os componentes
Surface, por exemplo, usam planos de fundo pretos ou transparentes por padrão para otimização de exibição óptica. - Padrões de cores otimizados: o Glimmer do Jetpack Compose calcula a cor do conteúdo com base na cor de segundo plano por padrão. Assim, os desenvolvedores raramente precisam definir manualmente as cores do texto, melhorando a legibilidade sem trabalho extra.
Foco diferenciado: o foco é indicado usando feedback visual baseado em contorno em vez do efeito de ondulação, o que promove uma visibilidade clara.
Figura 1. Três estados de foco no Glimmer do Jetpack Compose, que são diferenciados usando feedback visual baseado em contorno. Elevação otimizada: o Glimmer do Jetpack Compose usa box-shadows limitados para separação visual.
Figura 2. Cinco níveis de elevação no Glimmer do Jetpack Compose, que são diferenciados usando box-shadows limitados.
Componentes de brilho do Jetpack Compose
O Glimmer do Jetpack Compose tem um conjunto próprio de componentes personalizados, semelhante aos componentes do Jetpack Compose, mas otimizado especificamente para as demandas visuais e interativas exclusivas dos óculos com IA. Os componentes de brilho do Jetpack Compose são personalizáveis com o tema do brilho do Jetpack Compose e criados com recursos do Compose de nível inferior para oferecer suporte a métodos de entrada do usuário, como toque e deslize por padrão.
Para saber mais sobre como usar um componente específico, consulte os guias a seguir:
Se um desses componentes de alto nível não funcionar para seu caso de uso, use um surface para criar um componente personalizado. As superfícies são o elemento básico mais básico do Glimmer do Jetpack Compose: uma tela em branco para qualquer design ou interação específica e personalizada que você queira criar.
Modificadores de brilho do Jetpack Compose
Os modificadores no Glimmer do Jetpack Compose funcionam de maneira idêntica aos modificadores do Compose, permitindo aumentar os elementos combináveis personalizando o layout, a aparência e o comportamento deles. O Glimmer do Jetpack Compose pode introduzir modificadores específicos ou aplicar padrões únicos para feedback visual e desempenho específicos dos óculos.
Profundidade do brilho do Jetpack Compose
Os componentes Glimmer do Jetpack Compose usam profundidade para representar a hierarquia, o que ajuda a distinguir visualmente os elementos que aparecem acima (em cima) de outros cards. A profundidade nos óculos com IA é a combinação de posicionamento no espaço z e sombras. Para a maioria dos componentes de alto nível, como itens de lista, a profundidade é aplicada automaticamente com base no estado de foco. Quando um componente é focado, ele ganha profundidade. Quando perde o foco, ele volta ao estado normal. No entanto, para trabalhar com componentes personalizados, use o parâmetro de profundidade em Modifier.surface ou Modifier.depth.
Tema do Glimmer do Jetpack Compose
O Glimmer do Jetpack Compose tem um sistema de temas dedicado para óculos com IA.
O tema do Glimmer no Jetpack Compose implementa uma paleta simplificada e otimizada de
cores, tipografia e formas. Isso promove a máxima visibilidade e concisão para os óculos com IA. Todos os componentes do Glimmer do Jetpack Compose foram projetados para integração automática com métodos de entrada específicos dos óculos com IA. Jetpack Compose
O tema do Glimmer é exposto usando a classe GlimmerTheme.
Assim como outros temas no Jetpack Compose, o GlimmerTheme inclui vários
subsistemas: cores, formas, tipografia e ícones (simbolografia). O tema do Glimmer do Jetpack
Compose também inclui componentes do Glimmer do Jetpack Compose
que podem ser personalizados.
Cores
O sistema de cores do Glimmer para Jetpack Compose inclui sete cores na paleta otimizada, projetada para máxima visibilidade e concisão em telas de óculos com IA em que os valores pretos não são renderizados.
GlimmerTheme.As cores "Em ..." não são expostas pelo GlimmerTheme. Essas cores são calculadas automaticamente pelo sistema com base na cor de fundo.
Essas cores são expostas por GlimmerTheme.colors.primary, com valores para cada função de cor, conforme descrito na tabela a seguir:
Papel de cor |
Padrões |
|---|---|
principal |
#9BBFFF |
secundário |
#4C88E9 |
positivo |
#63FEA8 |
negativo |
#FFA7A0 |
superfície |
#262626 |
outline |
#606460 |
outlineVariant |
#42434A |
Embora surface, outline e outlineVariant sejam marcados como personalizáveis, recomendamos que você não mude esses valores.
Formas
O sistema de formas do Glimmer do Jetpack Compose define um conjunto de tratamentos de cantos e formas geométricas padrão para componentes, projetados para criar uma linguagem visual consistente e minimalista nas interfaces de óculos com IA, com todas as formas expostas por GlimmerTheme.shapes.
Tipografia
O sistema tipográfico do Glimmer do Jetpack Compose inclui seis estilos de tipografia para legibilidade e concisão em telas de óculos com IA. Esses estilos foram criados para maximizar o contraste e melhorar a legibilidade do texto com pesos mais ousados, espaçamento entre letras mais amplo e alturas de linha adequadas. Esses estilos são expostos por
GlimmerTheme.typography.
Ícones
O sistema de ícones do Glimmer para Jetpack Compose foi projetado para se integrar de maneira coerente à linguagem visual simplificada das interfaces de óculos com IA, geralmente usando formas arredondadas, como Material Symbols Rounded, para legibilidade ideal.