Développement mobile DSI 3

TP n°4 : Composants graphiques complexes

Ce TP a pour objectif de vous initier aux différentes démarches de manipulation des

composants graphiques complexes, spécialement « ListView », sous Android.

1. Lancez l’environnement Android Studio en passant par le menu général et créez une
application Android, nommée "TP4", assurez-vous que votre nouvelle application est
enregistrée dans le dossier portant votre nom.
2. Modifiez l’interface de votre activité pour contenir un « TextView » avec une « ListView »
comme le montre la figure suivante :

Partie 1
Dans cette partie, on va expérimenter les différentes méthodes possibles assurant la création
d’une liste simple : une liste avec des éléments « ListItem » simples (des chaines de
caractères dans notre cas)
3. Dans le fichier « strings.xml », créez une ressource de type « string-array » avec le nom
« country_list » et ajoutez à cette ressource la liste des pays suivantes : Brésil, KSA, Espagne,
Argentine, Australie, Canada, Allemagne, Chine, USA. Votre ressource doit être similaire à
celle-ci :

1
 Développement mobile DSI 3

4. Sélectionnez le composant « ListView » de votre interface, naviguez vers sa propriété

« entries » et modifiez sa valeur avec « @array/country_list »
5. Testez votre application
6. Annulez la modification effectuée dans la question 4. On va utiliser maintenant un
adaptateur pour gérer le contenu de notre « ListView ». Dans la méthode « onCreate » de la
classe de votre activité :
● Créez une variable de type tableau de chaînes nommée « country_Array » et
remplissez-la avec le contenu de la ressource « country_list » en utilisant la méthode
« getResources (…) »
● Récupérez une référence « LV » de la « ListView » créée dans le fichier « layout »
● Créez un adaptateur de type « ArrayAdapter » nommé « arrayAdapter » sachant que
le constructeur de la classe « ArrayAdapter » prend trois arguments :
✔ Le contexte

✔ Le « layout » des éléments de la liste. Dans notre cas, on va utiliser le

« layout » prédéfini « android.R.layout.simple_list_item_1 »
✔ La source des données à partir de laquelle la liste sera remplie
● Associez l’adaptateur à l’objet « LV » à travers la méthode « setAdapter (…) »
● Testez votre application. Vous devez avoir un résultat similaire à la figure suivante

2
Développement mobile DSI 3

Partie 2
Dans cette partie, on veut développer notre liste en modifiant la nature de ces éléments :

Dans cet exemple, les éléments de la liste ne sont plus simples mais plutôt composés de
plusieurs vues.

3
 Développement mobile DSI 3

7. Créez une nouvelle activité nommée « ListActivity » de type « Empty Activity »

8. Modifiez l’interface de votre activité de la même façon que la question 2.
9. Copiez et collez les images fournies avec l’énoncé dans le dossier « drawable » des
ressources de votre application
10. Vu que les éléments de notre liste ne sont plus simples mais composés, il faut créer un
« layout » pour ces éléments (« ListItems »). Pour cela, cliquez sur le bouton droit
de « res/layout » et sélectionnez « New > Layout resource file ». Saisissez :
● File name: list_item_layout.xml
● Root element: LinearLayout
11. Modifiez ce « layout » afin qu’il ressemble à ceci :

12. Créez une classe JAVA nommée « Country » en appuyant avec bouton droit sur le paquetage
du code source JAVA « com.example.tp4 » puis « New > Java Class ». Cette classe contient :
● Deux attributs privés de types chaine : « countryName » et « countryFlag »
● Un constructeur à deux arguments
● Les accesseurs et les modificateurs (« getters » et « setters »)
13. Maintenant, on va créer l’adaptateur qui se chargera de la bonne présentation des données
sur les « ListItem ». Pour cela, créez une autre classe JAVA nommée
« MyCustomListAdapter » qui doit hériter la classe « BaseAdapter » : quatre méthodes
devront être redéfinies « getCount(…), getItem(…), getItemId(…) et getView(…) ».
Dans cette classe :
● Ajoutez la déclaration des trois attributs suivants :
private List<Country> listData;
private LayoutInflater layoutInflater;
private Context context;
● Ajoutez le constructeur suivant à cette classe :

● Modifiez la méthode « getCount » afin qu’elle retourne la taille de l’attribut

« listData »
● Modifiez la méthode « getItem (int position) » afin qu’elle retourne l’élément de
« listData » qui se trouve dans la position « position »

4
 Développement mobile DSI 3

● Modifiez la méthode « getItemId (int position) » afin qu’elle retourne l’argument

« position »
● Ajoutez une classe statique interne nommée « MyView » qui doit contenir
uniquement la déclaration des deux attributs suivants :
ImageView flag;
TextView tvCountryName;
● Modifiez la méthode « getView (…) » comme suit :

14. Dans la méthode « onCreate » de l’activité :

● Créez une variable de type liste de « Country » et ajoutez tous les pays, dont les
drapeaux ont été placés tout à l’heure dans les ressources de votre application, à
cette liste
● Récupérez une référence « LV1 » de la « ListView » créée dans le fichier « layout » de
votre activité
● Créez une instance de l’adaptateur « MyCustomListAdapter »
● Associez cet adaptateur à l’objet « LV1 » à travers la méthode « setAdapter (…) »
● Testez votre application. Vous devez avoir ce qui suit :

5
 Développement mobile DSI 3

Partie 3
Pour rendre ListView plus beau, vous devriez personnaliser les effets, tels que modifier la
couleur d'arrière-plan de ListItem lorsque le curseur se déplace dessus ou modifier la couleur
d'arrière-plan lorsqu'il est sélectionné.
On va considérer deux états possibles pour un élément de la liste : normal et pressé.
15. Ajoutez un nouveau fichier de type « Drawable ressource file » en appuyant avec bouton
droit sur le dossier de ressources « Drawable » puis « New > Drawable ressource file »

16. Modifiez ce fichier afin qu’il ressemble à ce qui suit :

6
 Développement mobile DSI 3

Lorsque l'élément de ListView dans un état normal, les styles qui sont configurés
dans « item_state_normal.xml » seront appliqués à « ListItem ».
17. De la même manière, créez un autre fichier nommé « item_state_pressed.xml » et modifiez
son contenu à votre choix
Maintenant, on va définir un « ListSelector » qui regroupe les états possibles des éléments
de notre liste. Pour cela, créez un autre fichier source en appuyant avec bouton droit sur le
dossier de ressources « Drawable » puis « New > Drawable ressource file »

Modifiez le contenu de ce fichier comme suit :

7
 Développement mobile DSI 3

18. Définissez le nouveau « ListSelector » comme le sélecteur à utiliser par notre « ListView » en
modifiant sa propriété « listSelector » avec la valeur « @drawable/list_selector »
19. Testez votre application