Gestion d’interactions utilisateurs — Adaptation d’une GUI au contexte

Lancez Android Studio et créez un nouveau projet nommé « GUI_Test », avec pour nom de package « fr.iut.guitest ». Sélectionnez empty views activity (squelette Hello World).

Ajoutez 3 boutons classiques, dont un avec une image, comme dans le TP précédent. Pour chaque bouton ajouté, essayez d’enlever tous les warnings que vous pourriez avoir dans le code XML.

Pour chacun de ces boutons, testez l’écoute du clic en utilisant une méthode différente pour chaque bouton (cf. cours). Pour l’instant, le clic doit simplement produire une trace dans la console Logcat avec un System.out.println.

Faites en sorte que les clics produisent maintenant une sortie taguée dans Logcat : utilisez la méthode statique Log.i(tag, message).

Ajoutez un champ texte contenant par défaut le texte « entrez un texte ». Testez.

Assurez-vous que le texte par défaut est défini comme une ressource de type string (pas de warnings dans le layout).

Ajoutez d’autres TextField en testant différents types de clavier.

Faites en sorte que la validation des différents TextField provoque une sortie dans la console Logcat qui affiche le contenu de chaque champ texte.

De la même manière qu’un TextField nécessite l’utilisation d’un listener particulier, certains boutons doivent être écoutés grâce à des listeners spécifiques. Sur cette page Add core components , vous trouverez des exemples de code qui vous permettront de réaliser les exercices suivants.

Ajoutez un bouton de type checkbox.

Faites en sorte que l’interaction avec cette checkbox provoque un log qui affiche si elle est sélectionnée ou non.

Mêmes exercices avec un ToggleButton. La sortie doit dire s’il est activé ou non.

Jusqu’ici, nous avons travaillé avec un ConstraintLayout pour la mise en page des éléments (fichier XML). Suivant ce qu’on souhaite faire, il peut être intéressant d’utiliser d’autres gestionnaires de mise en page. Pour cela, il suffit de changer le gestionnaire utilisé dans le fichier XML.

Créez un nouveau projet appelé MEP_relative, toujours en sélectionnant Empty views Activity.

Modifiez le projet de telle sorte que l’UI de la page d’accueil ne soit plus gérée par un ConstraintLayout, mais par un RelativeLayout.

Ajoutez quelques éléments d’interfaces comme vu précédemment.

Faites en sorte de créer des mises en page différentes suivant que l’appli soit affichée en mode portrait ou paysage.

Mêmes exercices avec un nouveau projet appelé MEP_linear, mais en utilisant cette fois un LinearLayout.

Pour le changement d’orientation, profitez des attributs spécifiques à un LinearLayout pour faciliter la définition de la mise en page.

Testez les différentes orientations.

Rajoutez des éléments graphiques uniquement pour le mode portrait et testez.

Créez de nouveaux fichiers de layout (bouton droit sur res → new layout resource) pour différentes tailles possibles de téléphone, par exemple small et large.

Testez le résultat en créant des devices possédant différentes tailles/résolutions (AVD).

Créez un nouveau projet nommé « Sending », avec pour nom de package « fr.iut.myapp », toujours avec Empty views Activity.

Modifiez le layout principal pour utiliser un LinearLayout, puis ajouter un TextField et un bouton (Send) sur la même ligne.

Testez les différents tailles automatiques possibles pour le TextField et le bouton.

Faites en sorte d’obtenir le résultat du en cours, où l’ensemble de l’espace disponible est occupé par ces éléments.

Vérifiez que cela se produit automatiquement dans les différents modes d’orientation.

Testez l’écoute du bouton : le clic doit produire une sortie Logcat qui affiche le contenu du TextField.

En étudiant la documentation de la page donnée précédemment, section Dialogs, essayez de créer une boîte de dialogue qui propose deux choix, et de produire un log en fonction du choix effectué dans cette boîte.