O Glimmer do Jetpack Compose é criado no Jetpack Compose e inclui elementos combináveis, componentes, comportamentos e um tema que são projetados para óculos de IA com uma tela. Com o Glimmer, é possível criar uma interface nativa para óculos de exibição usando o Compose, dando vida às experiências do app com menos código, ferramentas avançadas e APIs Kotlin intuitivas.
Elementos combináveis do Glimmer do Jetpack Compose
O Glimmer do Jetpack Compose oferece @Composable personalizadas para telas de óculos de IA
, como Text, Button e ListItem. Confira algumas características exclusivas dos elementos combináveis do Glimmer do Jetpack Compose:
- Estilo simplificado: os componentes
Surface, por exemplo, são definidos como planos de fundo pretos ou transparentes para otimização da tela ó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 nenhum 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 caixas de sombra limitadas para separação visual.
Figura 2. Cinco níveis de elevação no Glimmer do Jetpack Compose, que são diferenciados usando caixas de sombra limitadas.
Componentes do Glimmer do Jetpack Compose
O Glimmer do Jetpack Compose apresenta um conjunto próprio de componentes personalizados, semelhantes aos componentes do Jetpack Compose, mas otimizados especificamente para as demandas visuais e interativas exclusivas dos óculos de exibição. Os componentes do Glimmer do Jetpack Compose são personalizáveis com o tema do Glimmer do Jetpack Compose e são baseados em recursos de nível inferior do Compose 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 seguintes guias:
- Buttons
- Cards
- Icons
- Icon buttons
- Listas
- List items
- Surfaces
- Texto
- Botões ativar
- Title Chips
- Vertical stacks
Se um desses componentes de alto nível não funcionar no seu caso de uso, você poderá
usar um surface para criar um componente personalizado. As superfícies são o elemento básico no Glimmer do Jetpack Compose: uma tela em branco para designs ou interações específicos e personalizados que você quer criar.
Modificadores do Glimmer do Jetpack Compose
Os modificadores no Glimmer do Jetpack Compose funcionam de maneira idêntica aos modificadores do Compose, que permitem aumentar os elementos combináveis personalizando o layout, a aparência e o comportamento deles. O Glimmer do Jetpack Compose inclui modificadores e padrões exclusivos para feedback visual e desempenho específicos dos óculos.
Tema do Glimmer do Jetpack Compose
O Glimmer do Jetpack Compose apresenta um sistema de temas dedicado para óculos de exibição.
O tema do Glimmer do 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 exibição. Todos os componentes do Glimmer do Jetpack Compose são projetados para integração automática com métodos de entrada específicos dos óculos. O tema do Glimmer do Jetpack Compose
é exposto usando a classe GlimmerTheme.
Como outros temas no Jetpack Compose, GlimmerTheme inclui vários
subsistemas que são brevemente descritos nas seções a seguir, juntamente com os
atributos personalizáveis:
- Cores
- Tipografia
- Valores de espaçamento de componentes
- Formas
- Níveis de efeito de profundidade
- Tamanhos de ícones
Cores
O sistema de cores do Glimmer do Jetpack Compose foi projetado para telas aditivas
e ambientes reais. Ao contrário dos temas padrão do Android, o GlimmerTheme
Colors prioriza planos de fundo escuros com acentos semitransparentes e vibrantes
para garantir que o conteúdo seja legível em iluminação imprevisível do mundo real.
O sistema usa uma paleta de três partes com cores primárias, secundárias e neutras. As cores neutras geralmente servem como as superfícies físicas da interface espacial, enquanto as cores primárias e secundárias fornecem pistas visuais claras para interação e marca.
GlimmerTheme.Tipografia
O sistema de tipografia do Glimmer do Jetpack Compose inclui vários estilos de tipografia para legibilidade e concisão em óculos de exibição. Esses estilos são projetados para maximizar o contraste e melhorar a legibilidade do texto usando pesos mais ousados, espaçamento de letras mais amplo e alturas de linha adequadas. Esses estilos são expostos por meio de
GlimmerTheme.typography.
Valores de espaçamento de componentes
Esses valores são usados para garantir um espaçamento consistente entre os componentes do Glimmer do Jetpack Compose. Isso inclui preenchimentos de componentes, espaçamento entre componentes e outros elementos de espaçamento. A alteração desses valores afeta o tamanho padrão da maioria dos componentes.
Formas
O sistema de formas do Glimmer do Jetpack Compose define um conjunto de tratamentos de canto padrão e formas geométricas para componentes, projetados para criar uma linguagem visual consistente e minimalista nas interfaces de óculos de exibição, com todas as formas expostas por meio de GlimmerTheme.shapes.
Níveis de efeito de profundidade
Os componentes do Glimmer do Jetpack Compose usam profundidade para representar a hierarquia, o que ajuda a distinguir visualmente os elementos que aparecem acima (na parte de cima) de outros cards. A profundidade nos óculos de exibição é 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á focado, ele ganha profundidade. Quando ele perde o foco, retorna ao estado normal. No entanto, para
trabalhar com componentes personalizados, você pode usar o depthEffect parâmetro em
Modifier.surface ou depthEffect.
Tamanhos de ícones
O sistema de ícones do Glimmer do Jetpack Compose foi projetado para se integrar de maneira coerente com a linguagem visual simplificada das interfaces de óculos de exibição, geralmente aproveitando formas arredondadas como Símbolos Arredondados do Material Design para otimizar a legibilidade.