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 IA
En savoir plus sur les types d'appareils XR

Tous les composants Glimmer de Jetpack Compose sont conçus pour fonctionner avec les méthodes d'entrée standards, comme un appui ou un balayage sur le pavé tactile des lunettes d'IA, tout en étant réceptifs aux commandes d'entrée de niveau inférieur spécifiques au matériel des lunettes d'IA. Les composants Jetpack Compose Glimmer gèrent automatiquement les événements d'entrée nécessaires. Pour les composants personnalisés, vous pouvez utiliser les API Compose existantes, telles que Modifier.draggable ou Modifier.scrollable, pour implémenter des comportements d'interaction spécifiques.

Sur les lunettes d'IA avec écran, la saisie au pointeur peut affecter la mise au point :

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

Le mouvement et l'ordre de la sélection changent à mesure que l'utilisateur navigue dans votre application.

Déplacement de la sélection

Sur un conteneur à défilement, la sélection se déplace en continu avec un balayage sur le pavé tactile. Pour les éléments discrets, comme une rangée de boutons, chaque balayage déplace la sélection d'un élément à la fois.

Ordre de sélection

Tout comme dans Jetpack Compose, Jetpack Compose Glimmer utilise la recherche de focus unidimensionnelle. Pour en savoir plus sur l'ordre de navigation au clavier, consultez Modifier l'ordre de navigation au clavier.

Pour modifier l'élément initialement sélectionné, vous pouvez ajouter un Modifier.focusGroup() de premier niveau et spécifier un onEnter focusProperty personnalisé :

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        cancelFocusChange()
    }
}
.focusGroup()

Conteneurs de défilement

Pour une expérience utilisateur optimale, les conteneurs de défilement 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, pour éviter toute confusion dans la navigation et favoriser un déplacement fluide et prévisible de la sélection.

États de sélection par défaut

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

Figure 1. Trois états de sélection dans Jetpack Compose Glimmer, qui sont différenciés à l'aide d'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, son contenu principal calcule la couleur du contenu de cette surface et les icônes sont GlimmerTheme.colors.primary.

  • Sélectionné : la largeur de la bordure est augmentée pour indiquer que l'élément est sélectionné.

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