Focus dans Jetpack Compose Glimmer

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

Tous les composants Glimmer de Jetpack Compose sont conçus pour fonctionner avec des méthodes de saisie standards, comme un appui ou un balayage sur le pavé tactile des lunettes. Ils sont également réceptifs aux commandes de saisie de niveau inférieur spécifiques au matériel des lunettes d'affichage. Les composants Glimmer de Jetpack Compose gèrent automatiquement les événements de saisie nécessaires.

Pour les actions standards telles que le défilement et le glissement, utilisez les composants Glimmer de Jetpack Compose afin de proposer une expérience cohérente. Toutefois, pour les composants personnalisés ou les comportements d'interaction sur mesure, vous pouvez utiliser les API Compose existantes, telles que Modifier.draggable ou Modifier.scrollable.

Saisie au pointeur et focus

Sur les lunettes d'affichage, la saisie au pointeur peut affecter le focus :

  • Appui : interaction directe pour activer un élément. Le focus se déplace vers un élément lorsqu'un utilisateur interagit avec lui.
  • Balayage : utilisé pour la navigation et le défilement. Les gestes de balayage non gérés se traduisent automatiquement par des mouvements de focus, ce qui permet une navigation fluide dans l'interface utilisateur sans saisie directe au pointeur.

Le mouvement et l'ordre du focus changent lorsqu'un utilisateur navigue dans votre application.

Mouvement du focus

Dans un conteneur déroulant, le focus se déplace en continu lorsque vous balayez le pavé tactile. Pour les éléments discrets, comme une ligne de boutons, chaque balayage déplace le focus d'un élément à la fois.

Ordre du focus

Comme dans Jetpack Compose, Jetpack Compose Glimmer utilise une recherche de focus unidimensionnelle. Pour en savoir plus sur l'ordre de navigation du focus, consultez Modifier l'ordre de navigation du focus.

Pour modifier l'élément initialement mis en focus, vous pouvez ajouter un Modifier.focusGroup() et spécifier un onEnter focusProperty personnalisé :

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        // Prevent focus from exiting the group
        cancelFocusChange()
    }
}
.focusGroup()

Conteneurs déroulants

Pour une expérience utilisateur optimale, les conteneurs déroulants tels que les listes doivent être le seul composant majeur d'un écran. Évitez de placer une liste déroulante directement au-dessus ou en dessous d'autres éléments interactifs, tels que des boutons, afin d'éviter toute confusion dans la navigation et de favoriser un mouvement de focus fluide et prévisible.

États de focus par défaut

Jetpack Compose Glimmer implémente des états de focus par défaut dans ses composants interactifs, y compris les surfaces, les cartes et les éléments de liste, ce qui favorise un retour visuel cohérent et clair lors de l'interaction de l'utilisateur.

Figure 1. Trois états de focus dans Jetpack Compose Glimmer, qui se distinguent par un retour visuel basé sur un contour.

  • Par défaut : la couleur d'arrière-plan du bouton est dérivée de GlimmerTheme.colors.surface, et son contenu principal calcule la couleur de contenu de cette surface.

  • Focus : la largeur de la bordure est augmentée pour indiquer le focus.

  • Focus + Appui : l'arrière-plan est défini sur GlimmerTheme.colors.surface avec une opacité accrue pour indiquer son état sélectionné.