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'IA

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 d'entrée standards semblables à celles des téléphones, comme un appui ou un balayage sur le pavé tactile des lunettes d'IA. Ils sont également compatibles avec les commandes d'entrée spécifiques au matériel des lunettes d'IA, comme les boutons de l'appareil photo et de l'écran. Les composants Glimmer de Jetpack Compose gèrent automatiquement les événements d'entrée nécessaires. Pour les composants personnalisés, vous pouvez utiliser des 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, l'entrée du pointeur peut affecter le focus :

• Appuyer : interaction directe pour activer un élément. Le focus se déplace vers un élément lorsqu'un utilisateur interagit avec lui.
• Balayer : 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 entrée directe du pointeur.

(Exigence temporaire) Activer l'indicateur d'entrée requis:

À l'aide d'une fonctionnalité de Jetpack Compose, le système peut définir automatiquement le focus initial sur le tout premier élément pouvant être mis en focus lorsque l'écran se charge, ce qui correspond souvent à l'élément en haut à gauche de l'écran. Cette fonctionnalité est encore en développement et n'est pas activée par défaut. Pour l'activer, définissez l' isInitialFocusOnFocusableAvailable indicateur sur true dans la méthode onCreate() de votre activité.

class GlassesActivityExample : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        @OptIn(ExperimentalComposeUiApi::class)
        ComposeUiFlags.isInitialFocusOnFocusableAvailable = true
        super.onCreate(savedInstanceState)
    }
}

Comportement et ordre de navigation

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

Mouvement du focus

Sur un conteneur déroulant, le focus se déplace en continu avec un balayage sur 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()
        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, pour éviter toute confusion dans la navigation et 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, son contenu principal calcule la couleur de contenu de cette surface et les icônes sont GlimmerTheme.colors.primary.

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

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