Jetpack Compose Glimmer est basé sur Jetpack Compose et inclut des composables, des composants, des comportements et un thème conçus pour les lunettes optimisées par l'IA avec écran. Avec Glimmer, vous pouvez créer une interface utilisateur native pour les lunettes optimisées par l'IA à l'aide de Compose, et donner vie à vos expériences d'application avec moins de code, des outils puissants et des API Kotlin intuitives.
Composables Jetpack Compose Glimmer
Jetpack Compose Glimmer fournit des fonctions @Composable adaptées aux écrans des lunettes optimisées par l'IA
, telles que Text, Button et ListItem. Voici quelques caractéristiques uniques des composables Jetpack Compose Glimmer :
- Style simplifié : les composants
Surface, par exemple, sont définis par défaut sur des arrière-plans noirs ou transparents pour optimiser l’affichage optique. - Couleurs par défaut optimisées : Jetpack Compose Glimmer calcule la couleur du contenu en fonction de la couleur d'arrière-plan par défaut. Les développeurs ont donc rarement besoin de définir manuellement les couleurs du texte, ce qui améliore la lisibilité sans aucun travail supplémentaire.
Mise au point différenciée : la mise au point est indiquée à l'aide d'un retour visuel basé sur un contour au lieu de l'effet d'ondulation, ce qui favorise une visibilité claire.
Figure 1. Trois états de mise au point dans Jetpack Compose Glimmer, qui sont différenciés à l'aide d'un retour visuel basé sur un contour. Élévation optimisée : Jetpack Compose Glimmer utilise des ombres portées limitées pour la séparation visuelle.
Figure 2. Cinq niveaux d'élévation dans Jetpack Compose Glimmer, qui sont différenciés à l'aide d'ombres portées limitées.
Composants Jetpack Compose Glimmer
Jetpack Compose Glimmer propose son propre ensemble de composants conçus sur mesure, semblables à ceux de Jetpack Compose, mais spécifiquement optimisés pour les exigences visuelles et interactives uniques des lunettes optimisées par l'IA. Les composants Jetpack Compose Glimmer sont personnalisables avec le thème de Jetpack Compose Glimmer et s'appuient sur des fonctionnalités Compose de niveau inférieur pour prendre en charge les méthodes de saisie utilisateur telles que le toucher et le balayage par défaut.
Pour en savoir plus sur l'utilisation d'un composant spécifique, consultez les guides suivants :
Si l'un de ces composants de haut niveau ne fonctionne pas pour votre cas d'utilisation, vous pouvez
utiliser un surface pour créer un composant personnalisé. Les surfaces sont le bloc de construction le plus élémentaire de Jetpack Compose Glimmer : un canevas vierge pour tous les designs ou interactions spécifiques et personnalisés que vous souhaitez créer.
Modificateurs Jetpack Compose Glimmer
Les modificateurs de Jetpack Compose Glimmer fonctionnent de la même manière que les modificateurs Compose, ce qui vous permet d'augmenter les composables en personnalisant leur mise en page, leur apparence et leur comportement. Jetpack Compose Glimmer peut introduire des modificateurs spécifiques ou appliquer des valeurs par défaut uniques pour le retour visuel et les performances spécifiques aux lunettes.
Profondeur Jetpack Compose Glimmer
Les composants Jetpack Compose Glimmer utilisent la profondeur pour représenter la hiérarchie, ce qui permet de distinguer visuellement les éléments qui s'affichent au-dessus (au-dessus) d'autres fiches. La profondeur sur les lunettes optimisées par l'IA est la combinaison du placement dans l'espace Z et des ombres. Pour la plupart des composants de haut niveau, tels que les éléments de liste, la profondeur est automatiquement appliquée en fonction de l'état de mise au point. Lorsqu'un composant est mis au point, il gagne en profondeur. Lorsqu'il perd la mise au point, il revient à son état normal. Toutefois, pour
travailler avec des composants personnalisés, vous pouvez utiliser le paramètre de profondeur sur
Modifier.surface ou Modifier.depth.
Thème Jetpack Compose Glimmer
Jetpack Compose Glimmer propose un système de thèmes dédié aux lunettes optimisées par l'IA.
Le thème de Jetpack Compose Glimmer implémente une palette simplifiée et optimisée de couleurs, de typographie et de formes. Cela favorise une visibilité et une concision maximales pour les lunettes optimisées par l'IA. Tous les composants Jetpack Compose Glimmer sont conçus pour une intégration automatique aux méthodes de saisie spécifiques des lunettes optimisées par l'IA. Le thème de Jetpack Compose
Glimmer est exposé à l'aide de la GlimmerTheme classe.
Comme les autres thèmes de Jetpack Compose, GlimmerTheme inclut plusieurs
sous-systèmes : couleurs, formes, typographie et icônes (symbolographie). Le thème de Jetpack
Compose Glimmer inclut également des composants Jetpack Compose Glimmer
que vous pouvez personnaliser.
Couleurs
Le système de couleurs de Jetpack Compose Glimmer inclut sept couleurs dans sa palette optimisée, conçues pour une visibilité et une concision maximales sur les écrans des lunettes optimisées par l'IA où les valeurs noires ne sont pas affichées.
GlimmerTheme.Notez que les couleurs "On ..." ne sont pas exposées via GlimmerTheme. Ces couleurs sont calculées automatiquement par le système en fonction de la couleur d'arrière-plan.
Ces couleurs sont exposées via GlimmerTheme.colors.primary, avec
des valeurs pour chaque rôle de couleur, comme décrit dans le tableau suivant :
Rôle de couleur |
Valeurs par défaut |
|---|---|
principale |
#9BBFFF |
secondaire |
#4C88E9 |
positif |
#63FEA8 |
négatif |
#FFA7A0 |
surface |
#262626 |
outline |
#606460 |
outlineVariant |
#42434A |
Notez que même si surface, outline et outlineVariant sont
marqués comme personnalisables, nous vous recommandons vivement de ne pas personnaliser ces
valeurs.
Formes
Le système de formes de Jetpack Compose Glimmer définit un ensemble de traitements d'angle
et de formes géométriques standards pour les composants, conçus pour créer un langage visuel cohérent
et minimaliste sur les interfaces utilisateur des lunettes optimisées par l'IA, toutes les formes étant exposées
via GlimmerTheme.shapes.
Typographie
Le système de typographie de Jetpack Compose Glimmer inclut six styles de typographie pour la lisibilité et la concision sur les écrans des lunettes optimisées par l'IA. Ces styles sont conçus pour maximiser le contraste et améliorer la lisibilité du texte grâce à des épaisseurs plus audacieuses, un espacement plus large entre les lettres et des hauteurs de ligne appropriées. Ces styles sont exposés via
GlimmerTheme.typography.
Icônes
Le système d'icônes de Jetpack Compose Glimmer est conçu pour s'intégrer de manière cohérente au langage visuel simplifié des interfaces utilisateur des lunettes optimisées par l'IA, en utilisant souvent des formes arrondies comme Material Symbols Rounded pour une lisibilité optimale.