Contenu de Jetpack Compose Glimmer

Appareils XR concernés
Ces conseils vous aident à créer des expériences pour ces types d'appareils XR.
Lunettes d'affichage

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 d'IA avec écran. Avec Glimmer, vous pouvez créer une interface utilisateur native pour les lunettes d'affichage à 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 @Composable fonctions adaptées aux écrans des lunettes d'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 l'optimisation de 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 d'affichage. 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 d'entrée utilisateur telles que le toucher et le balayage par défaut.

Figure 3. Jetpack Compose Glimmer inclut différents composants pour vous aider à créer des expériences d'application optimisées pour les lunettes d'affichage.

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 composant de base 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, qui vous permettent d'augmenter les composables en personnalisant leur mise en page, leur apparence et leur comportement. Jetpack Compose Glimmer inclut des modificateurs et des valeurs par défaut uniques pour le retour visuel et les performances spécifiques aux lunettes.

Thème de Jetpack Compose Glimmer

Jetpack Compose Glimmer propose un système de thèmes dédié aux lunettes d'affichage. 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 d'affichage. Tous les composants Jetpack Compose Glimmer sont conçus pour une intégration automatique aux méthodes de saisie spécifiques aux lunettes. 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 qui sont brièvement décrits dans les sections suivantes, ainsi que leurs attributs personnalisables :

  • Couleurs
  • Typographie
  • Valeurs d'espacement des composants
  • Formes
  • Niveaux d'effet de profondeur
  • Tailles des icônes

Couleurs

Le système de couleurs de Jetpack Compose Glimmer est conçu pour les écrans additifs et les environnements réels. Contrairement aux thèmes Android standards, les GlimmerTheme Colors privilégient les arrière-plans sombres avec une semi-transparence et des accents vifs pour garantir la lisibilité du contenu dans des conditions d'éclairage réelles imprévisibles.

Le système utilise une palette en trois parties avec des couleurs primaires, secondaires et neutres. Les couleurs neutres servent souvent de surfaces physiques à l'interface utilisateur spatiale, tandis que les couleurs primaires et secondaires fournissent des repères visuels clairs pour l'interaction et la marque.

Figure 4. Présentation des couleurs dans GlimmerTheme.

Typographie

Le système de typographie de Jetpack Compose Glimmer inclut différents styles de typographie pour la lisibilité et la concision sur les lunettes d'affichage. Ces styles sont conçus pour maximiser le contraste et améliorer la lisibilité du texte grâce à des graisses plus épaisses, un espacement plus large entre les lettres et des hauteurs de ligne appropriées. Ces styles sont exposés via GlimmerTheme.typography.

Figure 5. Exemple des six styles de typographie de Jetpack Compose Glimmer.

Valeurs d'espacement des composants

Ces valeurs permettent d'assurer un espacement cohérent entre les composants Jetpack Compose Glimmer. Cela inclut les marges intérieures des composants, l'espacement entre les composants et d'autres éléments d'espacement. Notez que la modification de ces valeurs affecte la taille par défaut de la plupart des composants.

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 d'affichage, toutes les formes étant exposées via GlimmerTheme.shapes.

Figure 6. Exemple de formes grandes, moyennes et petites dans Jetpack Compose Glimmer.

Niveaux d'effet de profondeur

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 d'autres fiches. La profondeur sur les lunettes d'affichage 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 depthEffect paramètre sur Modifier.surface ou depthEffect.

Tailles des 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 d'affichage, en utilisant souvent des formes arrondies comme les symboles Material Rounded pour une lisibilité optimale.