Lorsqu'un utilisateur interagit avec votre application, il le fait souvent en appuyant sur des éléments de son écran. Cependant, ce n'est pas la seule forme d'interaction. Voici d'autres formes d'interactions:
- Un utilisateur de ChromeOS peut utiliser les touches fléchées de son clavier physique pour parcourir l'écran.
- Une personne jouant à un jeu peut utiliser la manette de jeu associée pour parcourir le menu du jeu.
- Un utilisateur de l'application mobile peut faire défiler les éléments à l'aide du clavier à l'écran.
Dans ces cas, il est important de suivre quel composant est actif à un moment donné, ce que nous appelons la attention. Les éléments à l'écran doivent être axés dans un ordre logique. Jetpack Compose propose une méthode par défaut de gestion de l'objectif qui est correcte dans la plupart des cas. Toutefois, dans certains cas, vous devrez peut-être modifier ce comportement par défaut.
Les pages suivantes décrivent comment utiliser le focus dans votre application:
- Modifier l'ordre de sélection par défaut: explique comment modifier l'ordre de sélection par défaut, ajouter des groupes de sélection et désactiver le curseur d'un composable.
- Modifier le comportement de sélection: décrit comment demander, capturer et libérer la sélection, et comment rediriger la sélection lorsque l'utilisateur accède à un écran.
- Réagir à la mise au point: explique comment réagir aux changements de mise au point, ajouter des repères visuels aux éléments et comprendre l'état de focalisation d'un élément.
Ordre de balayage du curseur par défaut
Avant d'examiner le comportement par défaut de la recherche ciblée, il est important de comprendre le concept de niveau dans la hiérarchie: d'une manière générale, nous pouvons dire que deux Composables sont au même niveau lorsqu'ils sont frères, ce qui signifie qu'ils ont les mêmes parents. Par exemple, les éléments d'une Column se trouvent au même niveau. Revenir à un niveau signifie passer d'un enfant à son parent Composable, ou, en conservant le même exemple, revenir d'un élément à un Column qui le contient. Passer d'un niveau à l'autre est l'inverse, du parent Column aux éléments contenus. Ce concept peut être appliqué à chaque Composable pouvant contenir d'autres Composables.
La navigation dans l'interface utilisateur peut s'effectuer de plusieurs manières, dont la plupart des utilisateurs le connaissent déjà:
- TAB: navigation unidimensionnelle, avancer ou revenir en arrière La navigation TAB fait avancer le curseur vers l'élément suivant ou précédent dans la hiérarchie. Par défaut, Compose suit la déclaration de
Composables. La navigation unidirectionnelle peut être effectuée via la touchetabd'un clavier ou le contour rotatif d'une montre. Ce type de recherche ciblée permet d'accéder à chaque élément à l'écran. - Touches fléchées: navigation en deux dimensions, en direction à gauche, à droite, en haut ou en bas La navigation en deux dimensions peut être effectuée à l'aide d'un pavé directionnel sur un téléviseur ou de touches fléchées sur un clavier, et son ordre de balayage ne permet de parcourir que les éléments d'un niveau donné. Vous pouvez utiliser le centre du pavé directionnel et le bouton "Retour" pour descendre et remonter à un autre niveau.
Prenons l'exemple de la capture d'écran ci-dessous. Elle comporte quatre boutons, l'un en dessous de l'autre, et vous souhaitez les faire défiler par ordre d'apparition.
Jetpack Compose propose ce comportement prêt à l'emploi: le kit d'outils vous permet de parcourir chaque composable dans l'ordre vertical à l'aide de la touche tab, ou de déplacer le curseur en appuyant sur la flèche haut ou bas.
Lorsque vous passez à un autre type de mise en page, les choses changent un peu. Si votre mise en page comporte plusieurs colonnes, comme la mise en page ci-dessous, Jetpack Compose vous permet de les parcourir sans avoir à ajouter de code. Si vous appuyez sur la touche tab, Jetpack Compose met automatiquement en surbrillance les éléments dans l'ordre de leur déclaration, de la première à la quatrième. Utilisez les touches fléchées du clavier pour que la sélection suive la direction souhaitée dans l'espace 2D.
Column {
Row {
TextButton({ }) { Text("First field") }
TextButton({ }) { Text("Second field") }
}
Row {
TextButton({ }) { Text("Third field") }
TextButton({ }) { Text("Fourth field") }
}
}
Les Composables sont déclarés dans deux Rows, et les éléments de sélection sont déclarés dans l'ordre, du premier au quatrième. Lorsque vous appuyez sur la touche tab, l'ordre de sélection est le suivant:
Dans l'extrait ci-dessous, vous déclarez les articles dans Columns plutôt que dans Rows:
Row {
Column {
TextButton({ }) { Text("First field") }
TextButton({ }) { Text("Second field") }
}
Column {
TextButton({ }) { Text("Third field") }
TextButton({ }) { Text("Fourth field") }
}
}
Cette mise en page balaie les éléments verticalement, de haut en bas, du début de l'écran vers la fin:
Bien que les deux exemples précédents diffèrent en termes de navigation unidirectionnelle, ils offrent la même expérience en matière de navigation à deux dimensions. Cela est généralement dû au fait que les éléments affichés à l'écran ont le même emplacement géographique dans les deux exemples. La navigation vers la droite à partir de la première Column déplace le curseur sur la seconde, et la navigation vers le bas à partir du premier Row déplace le curseur vers le niveau inférieur.
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Modifier le comportement de sélection
- ConstraintLayout dans Compose
- Mises en page de flux dans Compose