Sélectionner dans Compose

Lorsqu'un utilisateur interagit avec votre application, il le fait souvent en touchant des éléments à l'écran. Toutefois, ce n'est pas la seule forme d'interaction. Voici d'autres formes d'interaction possibles :

• Un utilisateur de ChromeOS peut utiliser les touches fléchées de son clavier physique pour parcourir l'écran.
• Un joueur peut utiliser sa manette de jeu connectée pour parcourir le menu du jeu.
• Un utilisateur d'application mobile peut parcourir les éléments à l'aide du clavier à l'écran.

Dans ces cas, il est important de suivre le composant actif à un moment donné, ce que nous appelons le focus. Les éléments à l'écran doivent être ciblés dans un ordre logique. Jetpack Compose dispose d'une méthode par défaut de gestion du focus 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 balayage du focus : explique comment modifier l'ordre par défaut du focus, ajouter des groupes de focus et désactiver le focus d'un composable.
• Modifier le comportement du focus : décrit comment demander, capturer et libérer le focus, et comment le rediriger lorsque vous accédez à un écran.
• Réagir au focus : explique comment réagir aux modifications du focus, ajouter des repères visuels aux éléments et comprendre l'état du focus d'un élément.

Ordre de balayage du focus par défaut

Avant d'aborder le comportement par défaut de la recherche du focus, il est important de comprendre le concept de niveau dans la hiérarchie : en règle générale, nous pouvons dire que deux Composables sont au même niveau lorsqu'ils sont frères, c'est-à-dire qu'ils ont les mêmes parents. Par exemple, les éléments d'une Column sont au même niveau. Monter d'un niveau signifie passer d'un enfant à son parent Composable ou, pour reprendre le même exemple, revenir d'un élément à une Column qui le contient. Descendre d'un niveau est l'inverse : passer du parent Column aux éléments contenus. Ce concept peut être appliqué à chaque Composable pouvant contenir d'autres Composables.

**Remarque** : Pour en savoir plus sur le contrôle manuel de l'ordre du focus, consultez Contrôler l'ordre de balayage.

La navigation dans l'interface utilisateur peut s'effectuer de plusieurs manières, dont certaines sont déjà connues de la plupart des utilisateurs :

• TAB : navigation unidimensionnelle, vers l'avant ou vers l'arrière. La navigation par tabulation fait passer le focus à l'élément suivant ou précédent de la hiérarchie. Par défaut, Compose suit la déclaration des Composables. La navigation unidirectionnelle peut être effectuée à l'aide de la touche tab d'un clavier ou de la lunette rotative d'une montre. Ce type de recherche du focus permet de parcourir chaque élément de l'écran.
• Touches fléchées : navigation bidimensionnelle, vers la gauche, la droite, le haut ou le bas. La navigation bidimensionnelle peut être effectuée à l'aide d'un pavé directionnel sur un téléviseur ou des touches fléchées d'un clavier. Son ordre de balayage ne visite que les éléments d'un niveau donné. Vous pouvez utiliser le bouton central du pavé directionnel et le bouton "Retour" pour descendre et remonter à un autre niveau.

Prenons l'exemple de la capture d'écran ci-dessous, où vous avez quatre boutons les uns en dessous des autres et vous souhaitez les parcourir tous dans l'ordre d'apparition. Jetpack Compose offre ce comportement prêt à l'emploi : le kit d'outils vous permet de parcourir chaque composable dans l'ordre vertical de haut en bas à l'aide de la touche tab, ou de déplacer le focus en appuyant sur la flèche haut ou bas.

Figure 1. Liste de boutons affichés dans un petit format

Lorsque vous passez à un autre type de mise en page, les choses changent un peu. Si votre mise en page comporte plusieurs colonnes, comme celle 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 déclaration, du premier au quatrième. L'utilisation des touches fléchées de votre clavier permet à la sélection de suivre 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") }
    }
}
FocusSnippets.kt

Les Composables sont déclarés dans deux Rows, et les éléments de focus sont déclarés dans l'ordre, du premier au quatrième. Lorsque vous appuyez sur la touche tab, l'ordre de focus suivant est généré :

Figure 2. Liste de boutons placés côte à côte dans deux colonnes dans un plus grand format

Dans l'extrait ci-dessous, vous déclarez les éléments dans des Columns plutôt que dans des Rows :

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Cette mise en page parcourt les éléments verticalement, de haut en bas, du début à la fin de l'écran :

Figure 3. Liste de boutons placés côte à côte dans deux colonnes dans un plus grand format

Les deux exemples précédents, bien que différents dans la navigation unidirectionnelle, offrent la même expérience en matière de navigation bidimensionnelle. Cela est généralement dû au fait que les éléments à 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 focus vers la deuxième, et la navigation vers le bas à partir de la première Row déplace le focus vers celle qui se trouve en dessous.

Remarque : Les propriétés du focus sont un cas particulier, dans lequel les parents gagnent toujours en cas de collision ou de doublon. Il est important de garder cela à l'esprit lorsque vous travaillez avec le focus.