Assurer la compatibilité avec la navigation via le clavier

En plus des modes de saisie virtuel, tels que les claviers à l'écran, Android est compatible avec les claviers physiques connectés à l'appareil. Un clavier offre un mode pratique de saisie de texte et un moyen pour les utilisateurs de naviguer et d'interagir avec votre application. Bien que la plupart des appareils portables tels que les téléphones utilisent le toucher comme mode d'interaction principal, les tablettes et les appareils similaires sont populaires et de nombreux utilisateurs aiment leur attacher des accessoires pour clavier.

Étant donné que de plus en plus d'appareils Android offrent ce type d'expérience, il est important d'optimiser votre application pour qu'elle prenne en charge les interactions via un clavier. Ce document explique comment améliorer la navigation avec un clavier.

Tester votre application

Les utilisateurs peuvent déjà naviguer dans 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 sélectionnables. Cela signifie que les utilisateurs peuvent naviguer avec des périphériques de commande tels qu'un pavé directionnel ou un clavier, et chaque widget s'illumine ou modifie son apparence lorsqu'il est sélectionné.

Pour tester votre application, procédez comme suit:

  1. Installez votre application sur un appareil équipé d'un clavier physique.

    Si vous ne disposez pas d'un périphérique matériel avec clavier, connectez un clavier Bluetooth ou USB.

    Vous pouvez également utiliser Android Emulator:

    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, vérifiez que les options Keyboard (Clavier) et DPad (DPad) sont activées.
  2. Pour tester votre application, utilisez uniquement la touche Tabulation pour naviguer dans l'interface utilisateur. Assurez-vous que chaque commande d'interface utilisateur est sélectionnée comme prévu.

    Recherchez les instances dans lesquelles le focus se déplace de manière inattendue.

  3. Recommencez depuis le début de votre application et naviguez dans l'interface utilisateur à l'aide de commandes d'orientation, comme les touches fléchées du clavier. À partir de chaque élément sélectionnable de votre UI, appuyez sur Up (Haut), Down (Bas), Left (Gauche) et Right (Droite).

    Recherchez les instances dans lesquelles le focus se déplace de manière inattendue.

Si vous rencontrez des cas où la navigation avec la touche Tabulation ou les commandes d'orientation ne fonctionne pas comme prévu, spécifiez l'emplacement du focus dans votre mise en page, comme indiqué dans les sections suivantes.

Gérer la navigation par onglet

Lorsqu'un utilisateur navigue dans votre application à l'aide de la touche Tabulation du clavier, le système transmet le ciblage des entrées 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 sur l'écran est différent de l'ordre dans le 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 à droite et un champ de texte à gauche du deuxième bouton. Pour que le curseur soit placé du premier bouton vers le champ de texte, puis vers le deuxième bouton, la mise en page doit définir explicitement l'ordre de sélection pour chacun des éléments sélectionnables 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, il se déplace de manière appropriée en fonction de l'apparence à l'écran: de button1 à editText1, puis à button2.

Gérer la navigation directionnelle

Les utilisateurs peuvent également naviguer dans votre application à l'aide des touches fléchées du clavier, qui se comportent de la même manière que lors de la navigation avec un pavé directionnel ou un trackball. Le système fournit une "estimation la plus probable" de la vue à cibler dans une direction donnée, en fonction de la mise en page des vues à l'écran. Cependant, il arrive que le système ait une erreur.

Si le système ne transmet pas le curseur à la vue appropriée lors de la navigation dans une direction donnée, spécifiez la vue devant être ciblée à l'aide des attributs suivants:

Chaque attribut désigne la vue suivante à cibler lorsque l'utilisateur accède à 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 :