Assurer la compatibilité avec la navigation via le clavier

Essayer Compose
Jetpack Compose est le kit d'outils d'UI recommandé pour Android. Découvrez comment utiliser la saisie tactile et les entrées dans Compose.
Focus →

En plus des méthodes de saisie logicielle (comme les claviers à l'écran), Android est compatible avec les claviers physiques connectés à l'appareil. Un clavier offre un mode pratique pour saisir du texte et permet aux utilisateurs de parcourir votre application et d'interagir avec elle. Bien que la plupart des appareils portables tels que les téléphones utilisent le mode tactile comme mode d'interaction principal, les tablettes et les appareils similaires sont populaires, et de nombreux utilisateurs aiment y connecter des accessoires de clavier.

De plus en plus d'appareils Android offrent ce type d'expérience. Il est donc important d'optimiser votre application pour qu'elle soit compatible avec les interactions au clavier. Ce document explique comment améliorer la navigation au clavier.

Tester votre application

Les utilisateurs peuvent peut-être déjà parcourir votre application à l'aide d'un clavier, car le système Android active la plupart des comportements nécessaires par défaut.

Tous les widgets interactifs fournis par le framework Android, tels que Button et EditText, sont focusables. Cela signifie que les utilisateurs peuvent naviguer à l'aide de dispositifs de contrôle tels qu'un pavé directionnel ou un clavier, et que chaque widget brille ou change d'apparence lorsqu'il reçoit le focus d'entrée.

Pour tester votre application, procédez comme suit :

  1. Installez votre application sur un appareil doté d'un clavier matériel.

    Si vous ne disposez pas d'un appareil physique avec clavier, connectez un clavier Bluetooth ou USB.

    Vous pouvez également utiliser l'émulateur Android :

    1. Dans AVD Manager, cliquez sur New Device (Nouvel appareil) ou sélectionnez un profil existant, puis cliquez sur Clone (Cloner).
    2. Dans la fenêtre qui s'affiche, assurez-vous que les options Clavier et Pavé directionnel sont activées.
  2. Pour tester votre application, utilisez uniquement la touche Tabulation pour parcourir votre interface utilisateur. Assurez-vous que chaque commande d'interface utilisateur est sélectionnée comme prévu.

    Recherchez les cas où la sélection se déplace de manière inattendue.

  3. Recommencez depuis le début de votre application et parcourez son interface utilisateur à l'aide des commandes de direction, comme les touches fléchées du clavier. À partir de chaque élément pouvant être sélectionné dans votre UI, appuyez sur Haut, Bas, Gauche et Droite.

    Recherchez les cas où la sélection se déplace de manière inattendue.

Si vous rencontrez des cas où la navigation avec la touche Tabulation ou les commandes de direction ne fonctionne pas comme prévu, spécifiez où la mise au point doit se trouver dans votre mise en page, comme indiqué dans les sections suivantes.

Gérer la navigation par onglet

Lorsqu'un utilisateur parcourt votre application à l'aide de la touche de tabulation du clavier, le système transmet le focus d'entrée entre les éléments en fonction de l'ordre dans lequel ils apparaissent dans la mise en page. Si vous utilisez une mise en page relative, par exemple, et que l'ordre des éléments à l'écran est différent de celui du fichier, vous devrez peut-être spécifier manuellement l'ordre de mise au point.

Par exemple, dans la mise en page suivante, deux boutons sont alignés sur le côté droit et un champ de texte est aligné à gauche du deuxième bouton. Pour passer le focus du premier bouton au champ de texte, puis au deuxième bouton, la mise en page doit définir explicitement l'ordre de focus pour chacun des éléments pouvant être sélectionnés avec l'attribut android:nextFocusForward.

<androidx.constraintlayout.widget.ConstraintLayout ...>
    <Button
        android:id="@+id/button1"
        android:nextFocusForward="@+id/editText1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        ... />
    <Button
        android:id="@+id/button2"
        android:nextFocusForward="@+id/button1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button1"
        ... />
    <EditText
        android:id="@id/editText1"
        android:nextFocusForward="@+id/button2"
        app:layout_constraintBottom_toBottomOf="@+id/button2"
        app:layout_constraintRight_toLeftOf="@id/button2
        ...  />
    ...
</androidx.constraintlayout.widget.ConstraintLayout>

Désormais, au lieu de passer de button1 à button2, puis à editText1, la mise au point se déplace correctement en fonction de l'apparence à l'écran : de button1 à editText1, puis à button2.

Gérer la navigation directionnelle

Les utilisateurs peuvent également parcourir votre application à l'aide des touches fléchées d'un clavier, ce qui fonctionne de la même manière que la navigation avec un pavé directionnel ou une trackball. Le système fournit une "meilleure estimation" de la vue sur laquelle se concentrer dans une direction donnée en fonction de la mise en page des vues à l'écran. Cependant, il arrive que le système se trompe.

Si le système ne transmet pas le focus à la vue appropriée lors de la navigation dans une direction donnée, spécifiez la vue qui doit recevoir le focus à l'aide des attributs suivants :

Chaque attribut désigne la prochaine vue à recevoir le focus lorsque l'utilisateur navigue dans cette direction, comme spécifié par l'ID de la vue. Ce processus est illustré dans l'exemple suivant :

<Button
    android:id="@+id/button1"
    android:nextFocusRight="@+id/button2"
    android:nextFocusDown="@+id/editText1"
    ... />
<Button
    android:id="@id/button2"
    android:nextFocusLeft="@id/button1"
    android:nextFocusDown="@id/editText1"
    ... />
<EditText
    android:id="@id/editText1"
    android:nextFocusUp="@id/button1"
    ...  />

Ressources supplémentaires

Consultez les ressources associées suivantes :