Gestion d'interactions utilisateurs
Adaptation d'une GUI au contexte
Objectif
Gérer les interactions utilisateurs sur des composants usuels
Comprendre le mécanisme d'adaptation d'une GUI Android
Interaction avec les boutons
Vous allez tout d'abord créer un nouveau projet Android dans votre workspace.
Exercice 1:
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).
Exercice 2:
Ajoutez 3 boutons classiques, dont un avec une image. Pour chaque bouton ajouté, essayez d'enlever tous les warnings que vous pourriez avoir dans le code xml.
Exercice 3:
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.
Exercice 4:
Faites en sorte que les clics produisent maintenant une sortie taguée dans Logcat : utilisez la méthode statique Log.i(tag,message).
Interaction avec les TextFields
Exercice 5:
Ajoutez un champ texte contenant par défaut le texte "entrez un texte". Testez
Exercice 6:
Assurez vous que le texte par défaut est défini comme une ressource de type string (pas de warnings dans le layout)
Exercice 7:
Ajoutez d'autres TextFields en testant différents types de clavier.
Exercice 8:
Faites en sorte que la validation des différents TextFields provoque une sortie dans la console Logcat qui affiche le contenu de chaque champ texte.
CheckBox et ToggleButton
Exercice 9:
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 esxemples de code qui vous permettront de réaliser les exercices suivants
Exercice 10:
Ajoutez un bouton de type checkbox
Exercice 11:
Faites en sorte que l'interaction avec cette checkbox provoque un log qui affiche si il elle est sélectionée ou non
Exercice 12:
Mêmes exercices avec un ToggleButton. La sortie doit dire s'il est activé ou non
Gestion de la mise en page des éléments avec RelativeLayout et LinearLayout
Exercice 13:
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'utilisant d'autres gestionnaires de mise en page. Pour cela, il suffit de changer le gestionnaire utilisé dans le fichier xml
Exercice 14:
Créez un nouveau projet appelé MEP_relative, toujours en sélectionnant Empty views Activity
Exercice 15:
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.
Exercice 16:
Ajoutez quelques éléments d'interfaces comme vu précédemment.
Exercice 17:
Faites en sorte de créer des mises en page différentes suivant que l'appli soit affichée en mode portrait ou paysage.
Exercice 18:
Mêmes exercices avec un nouveau projet appelé MEP_linear, mais en utilisant cette fois un LinearLayout
Exercice 19:
Pour le changement d'orientation, profitez des attributs spécifiques à un LinearLayout pour faciliter la définition de la mise en page.
Exercice 20:
Testez les différentes orientations.
Exercice 21:
Rajoutez des éléments graphiques uniquement pour le mode portrait et testez.
Exercice 22:
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.
Exercice 23:
Testez le résultat en créant des devices possédant différentes tailles/résolutions (AVD).
Taille des éléments dans un ViewGroup
Exercice 24:
Créez un nouveau projet nommé "Sending", avec pour nom de package "fr.iut.myapp", toujours avec Empty views Activity
Exercice 25:
Modifiez le layout principal pour utiliser un LinearLayout, puis ajouter un TextField et un bouton (Send) sur la même ligne.
Exercice 26:
Testez les différents tailles automatiques possibles pour le TextField et le bouton.
Exercice 27:
Faites en sorte d'obtenir le résultat vu en cours, où l'ensemble de l'espace disponible est occupé par ces éléments.
Exercice 28:
Vérifiez que cela se produit automatiquement dans les différents mode d'orientation.
Exercice 29:
Testez l'écoute du bouton, avec un simple System.out.println pour l'instant.
Exercice 30:
Le clic sur le bouton doit maintenant produire une sortie qui affiche le contenu du TextField.
Boîte de dialogue
Exercice 31:
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