Conception d'interface utilisateur Android Notions de base de la commande Focus Control

Rien de plus agaçant que d'essayer de naviguer dans une interface utilisateur mal conçue sur une application mobile. Le comportement de votre application en termes de navigation à l'écran peut faire toute la différence entre un utilisateur heureux et un utilisateur qui vous brûle sur l'Android Market. Aujourd'hui, nous nous concentrons sur le focus: contrôle du focus et personnalisation au sein de vos interfaces utilisateur..

Les méthodes de saisie des appareils Android se diversifient: pavés directionnels, trackballs, écrans tactiles, claviers, etc. Certains appareils, comme les tablettes, sont principalement tactiles. D'autres, comme Google TV, n'ont aucun écran tactile et s'appuient sur des périphériques de saisie tels que ceux dotés d'un pavé directionnel (d-pad)..

Les développeurs Android ont besoin de comprendre comment les utilisateurs naviguent dans les contrôles d'un écran, comment et dans quel ordre ces contrôles d'écran gagnent et perdent le focus, et comment personnaliser l'ordre du focus de contrôle dans leurs applications pour offrir aux utilisateurs une expérience sans frustration..

Comprendre l'ordre de contrôle

La plate-forme Android fait de son mieux pour déterminer un ordre de contrôle approprié pour un type de disposition donné. Dans de nombreux cas, l'ordre du focus par défaut est logique. Par contre, ce n'est pas toujours le cas. Le prochain contrôle qui doit gagner le focus est déterminé en trouvant le plus proche voisin du contrôle actuellement focalisé dans une direction donnée (haut / bas / gauche / droite). Lorsque plusieurs commandes correspondent à cette description, la plate-forme balaye de gauche à droite et de haut en bas, un peu comme si on lisait un livre en anglais..

Cela a des ramifications. Par défaut, le contrôle le plus haut dans un écran n'aurait rien sur lequel se concentrer si l'utilisateur naviguait vers le haut, ni rien ne se passait si l'utilisateur naviguait au bas de l'écran. à partir du contrôle inférieur sur l'écran. De même, rien ne se produirait si l'utilisateur essayait de naviguer? du contrôle le plus à gauche, ou? Droite? du contrôle le plus à droite. Il n'y a pas? Emballage? de mise au point, par défaut.

Voyons maintenant un exemple de la façon dont vous pourriez vouloir modifier le comportement du focus par défaut sur un écran et le faire fonctionner pour vous et vos utilisateurs. Par exemple, supposons que vous souhaitiez forcer votre ordre de mise au point à s’enrouler de manière circulaire autour d’un ensemble de contrôles constituant un cadran d’horloge..

Étape 0: Mise en route

Nous fournissons le code source complet pour l'exemple d'application présenté dans ce tutoriel. Vous pouvez télécharger l'exemple de code source que nous vous fournissons ici.

Étape 1: Définir une mise en page avec des contrôles

Commencez par créer ou modifier le fichier de ressources de présentation utilisé par votre classe d'activité, tel que /res/layout/main.xml. Par exemple, la disposition suivante définit une sorte de? Cadran d'horloge? des contrôles Button utilisant un RelativeLayout.

               

Le style appelé clockFaceNum est défini dans le fichier /res/values/styles.xml comme suit:

    

L'écran résultant ressemble à ceci:

Étape 2: Vérifiez l'ordre de mise au point par défaut

Passons en revue l'ordre de mise au point par défaut pour les contrôles de bouton de cadran d'horloge dans ce RelativeLayout. Si l'utilisateur est concentré sur le bouton 12 et appuie sur? Bas? sur un pavé directionnel, le prochain contrôle à prendre sera le bouton 11, suivi du bouton 10, etc..

Le défaut? Down? chemin est montré ici:

Étape 3: Fournissez un ordre de contrôle personnalisé

Supposons que nous voulions forcer l'utilisateur à ne pouvoir parcourir les contrôles de cadran que dans le sens horaire ou anti-horaire, par opposition à l'ordre de la mise au point par défaut, comme indiqué:

Nous pouvons définir ce comportement en spécifiant, pour chaque bouton, quel contrôle doit ensuite être activé. Il existe quatre attributs XML que vous pouvez définir sur n’importe quel contrôle de vue pour définir l’ordre du focus. Ces attributs sont:

  • android: nextFocusUp-Cet attribut définit le contrôle qui devrait gagner le focus si l'utilisateur navigue vers le haut
  • android: nextFocusDown-Cet attribut définit le contrôle qui devrait gagner le focus si l'utilisateur navigue vers le bas
  • android: nextFocusLeft-Cet attribut définit le contrôle qui devrait gagner le focus si l'utilisateur navigue à gauche
  • android: nextFocusRight-Cet attribut définit le contrôle qui devrait gagner le focus si l'utilisateur navigue à droite

Alors disons que nous voulons tous? Down? et? navigation pour permettre à l'utilisateur de traverser le cadran de l'horloge Commandes de boutons dans le sens des aiguilles d'une montre, et tout? Haut? et gauche? navigation pour permettre à l’utilisateur de parcourir les contrôles dans le sens inverse des aiguilles d’une montre. Il faudrait alors définir ces quatre attributs pour chaque contrôle. Par exemple, si vous avez déménagé? Bas? ou? à partir du bouton 12, vous atteindriez le bouton 1. De même, si vous avez déménagé? Up? ou? gauche? à partir du bouton 12, vous atteindriez le bouton 11.

Une définition complète de cette nouvelle disposition de cadran d'horloge ressemble à ceci:

               

Par conséquent, notre nouveau? Down? path, à partir du 12 Button, ressemble à ceci:

Étape 4: Définition du focus de contrôle initial

Enfin, voici une astuce pour configurer le contrôle par défaut afin de mettre le focus sur un écran donné à partir de votre fichier de présentation. Vous ne pouvez le faire que pour un seul contrôle Voir dans chaque fichier..

Utilisez la balise dans le contrôle Afficher pour définir le focus initial sur l'écran. Par exemple, nous pourrions vouloir mettre à jour le 12 Button pour obtenir le focus initial, comme ceci:

 

Bien sûr, vous pouvez également utiliser la méthode de programmation pour définir le focus du contrôle, à l'aide de la méthode de la classe View appelée requestFocus ()..

Conclusion

Les développeurs Android doivent se rappeler que différents utilisateurs navigueront dans l'interface utilisateur d'une application en utilisant différentes méthodes de saisie. Certaines méthodes permettent de passer facilement d’un contrôle à l’autre à l’autre, tandis que d’autres peuvent rendre la navigation onéreuse. Les développeurs peuvent fournir des ordres de focus personnalisés qui peuvent grandement améliorer l'expérience de l'utilisateur avec l'application. S'il vous plaît ne pas oublier les utilisateurs du clavier. ?

à propos des auteurs

Les développeurs mobiles Lauren Darcey et Shane Conder ont co-écrit plusieurs livres sur le développement Android: un livre de programmation en profondeur intitulé Développement d'applications sans fil Android, deuxième édition et Sams Teach Yourself Développement d'applications Android dans 24 heures, Deuxième édition. Lorsqu'ils n'écrivent pas, ils passent leur temps à développer des logiciels mobiles dans leur entreprise et à fournir des services de conseil. Vous pouvez les contacter par courrier électronique à l'adresse [email protected], via leur blog à l'adresse androidbook.blogspot.com et sur Twitter @androidwireless..

Besoin d'aide pour écrire des applications Android? Consultez nos derniers livres et ressources!

я я