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 tela. Com o Glimmer, você pode criar uma interface nativa para óculos de IA usando o Compose, dando vida às experiências do seu app com menos código, ferramentas poderosas 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 da exibição óptica. - Padrões de cores otimizados: o Jetpack Compose Glimmer 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 Glimmer 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 de IA. Os componentes Glimmer do Jetpack Compose são personalizáveis com o tema do Glimmer do Jetpack Compose e criados com base em recursos de nível inferior do Compose para oferecer suporte a métodos de entrada do usuário, como toque e deslizar 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 bloco de construção mais básico do Jetpack Compose Glimmer: 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 na função 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 de 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 está em foco, 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 Jetpack Compose Glimmer tem um sistema de temas dedicado para óculos de IA.
O tema do Glimmer no Jetpack Compose implementa uma paleta simplificada e otimizada de
cores, tipografia e formas. Isso promove o máximo de visibilidade e concisão para óculos de IA. Todos os componentes Glimmer do Jetpack Compose foram projetados para
integração automática com métodos de entrada específicos dos óculos de 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 Jetpack
Compose Glimmer também inclui componentes do Jetpack Compose Glimmer
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 de 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:
Função de cor |
Padrões |
|---|---|
principal |
#A8C7FA |
secundário |
#4C88E9 |
positivo |
#4CE995 |
negativo |
#F57084 |
superfície |
#000000 |
outline |
#606460 |
outlineVariant |
#42434A |
Embora surface, outline e outlineVariant sejam marcados como personalizáveis, recomendamos que você não personalize 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 de IA, com todas as formas expostas por GlimmerTheme.shapes.
Tipografia
O sistema de tipografia do Glimmer do Jetpack Compose inclui seis estilos de tipografia para
legibilidade e concisão em telas de óculos de 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 do Jetpack Compose foi projetado para se integrar de maneira coerente à linguagem visual simplificada das interfaces de óculos de IA, geralmente usando formas arredondadas, como Material Symbols Rounded, para legibilidade ideal.