Tutoriel Android : apprendre à construire dynamiquement des interfaces graphiques

Android2ee

Mathias Seguy

Cet article vous explique comment mettre en place dynamiquement des I.H.M. Par contre, je vous préviens tout de suite, c'est un cas très rare. La seule fois où j'ai effectué cette mise en place fut lors de la construction d'un calendrier. Et dans ce cas, ce qui était dynamique n'était pas l'inflation des vues mais le positionnement des cellules des rendez-vous dans un RelativeLayout pour qu'elles se placent dans le créneau horaire voulu. Je ne préconise pas de construire ses I.H.M. dynamiquement. Si vous pouvez le faire de manière statique faîtes le et utilisez au mieux la spécification de vos dossier de layout vis-à-vis de la configuration de l'appareil (layout-land, layout-large, layout-large-land...). Bref, La construction dynamique des I.H.M. est pour moi une mauvaise pratique.

Pour réagir à ce tutoriel, un espace de dialogue vous est proposé sur le forum : Commentez

- Titre : Tutoriel Android : apprendre à construire dynamiquement des interfaces graphiques

- Auteur : Mathias Seguy

- Parution : 17 juin 2011

- Mise à jour : 15 janvier 2016

- Licence : Copyright ® 2016 Mathias Seguy. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- 0. Avertissement

- 1. Introduction

- 2. Principe

- 3. Mise en place

- 3-1. Structure du projet

- 3-2. Du code par l'exemple

- 3-2-1. Les fichiers usuels de l'application

- 3-2-1-1. Le fichier AndroidManifest

- 3-2-2. Le fichier de layout

- 3-2-3. Destruction de la vue et son réaffichage

- 3-2-4. Gestion du placement des composants au sein des layouts

- 3-2-5. Gestion du Scroll

- 3-2-6. Gestion des composants usuels

- 3-2-7. Gestion des composants images

- 3-2-7-1. Cas d'une image contenue dans les ressources de l'application

- 3-2-7-1-1. La méthode getIdentifier

- 3-2-7-2. Cas d'une image provenant du web

- 3-2-8. Mise en place de données factices pour les tests

- 4. Remerciements

0 - Avertissement

J'ai rédigé cet article, en 2010, depuis j'ai quelque peu modifié ma vision des patterns à utiliser lors de la construction dynamique des IHM.

La première chose qu'il faut que vous gardiez en tête est qu'il ne faut jamais utiliser de new dans l'instanciation d'un composant graphique. J'ai compris cela en discutant avec Romain Guy (à charge de l'optimisation graphique Android à Montain View) lors de la DevoxxFrance en Avril. En effet, il faut utiliser le LayoutInflater.inflate et surtout pas de new. La raison est assez simple, le new contourne toute la couche d'optimisation mise en place par le système, celui-ci ne peut donc rien optimiser ni gérer avec efficience les composants graphiques. Il faut donc utiliser les LayoutInflaters pour instancier ces composants graphiques. Une seconde raison qui m'a été donnée par nicroman (de DVP) est qu'il est possible de définir dans vos fichiers xml des balises qui ne sont pas prises en compte si le système ne les reconnait pas ; une balise JellyBean nouvelle ne ferra pas planter votre application si vous la définissez en Xml, même si votre application tourne sur Froyo, alors que la même chose avec du code n'est pas possible.

Ainsi, vous devez définir vos briques minimales (les plus petits éléments communs qui vous serviront à construire votre IHM) en tant que fichiers Xml. Ces briques peuvent être de simples composants graphiques (TextView, Button, ImageView,.) ou des composants plus évolués construis avec des layouts.

Quand vous avez à instancier l'élément vous utiliser le LayoutInflater pour lui donner vie. Vous pouvez alors le manipuler comme expliqué dans l'article. Pour récupérer le LayoutInflater, c'est assez facile.

Dans le cas où vous êtes dans un Fragment, il vous suffit de conserver un pointeur sur le LayoutInflater qui vous est fourni dans la méthode :

1. @Override

2. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

3. this.inflater = inflater;

Dans le cas où vous êtes dans une Activité, la méthode getLayoutInflater() est faite pour ça.

Il ne vous reste plus qu'à instancier vos composants ainsi :

1. // Instanciation d'un composant (par exemple un Layout)

2. LinearLayout evtCell = (LinearLayout) inflater.inflate(R.layout.calendar_event_cell, null);

Où la méthode inflate possède deux paramètres, le premier indique le nom de la ressource à instancier, le second indique à quel élément ajouter ce composant graphique (son layout parent).

1 - Introduction

La construction d'Interfaces Hommes-Machines (IHM en abrégée) dynamique est à réserver au cas très particulier de la mise en place d'écrans qui s'adaptent aux données qu'ils doivent afficher et qui ne peuvent être connues par avance.

Un exemple typique est la construction d'IHM à partir d'un flux de données XML provenant d'un serveur web. La structure du flux est connue mais pas les données (taille des listes typiquement). Il y a bien d'autres cas où cela peut être utile de savoir construire les IHM dynamiquement. Vous trouverez certainement tout un tas de cas où une construction à la volée simplifie grandement l'implémentation d'un besoin.

Dans ce cas, il est très utile de pouvoir construire une IHM qui s'adapte parfaitement au flux reçu. C'est l'objectif de cet article que de vous donner les clefs pour réaliser une construction dynamique en toute simplicité.

2 - Principe

Le principe est assez similaire à la construction d'un écran quand on fait du swing (ou d'autres langages de construction graphique).

Vous définissez votre layout, vous y placez vos composants :

1. // Définition du Layout à construire.

2. LinearLayout postLayout = new LinearLayout(this);

4. // Définition du composant Text.

5. TextView txvName = new TextView(this);

6. txvName.setText(String.format(getString(R.string.wall_name),post.getString("name")));

7. txvName.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));

9. // Définition de la façon dont le composant va remplir le layout.

10. LinearLayout.LayoutParams layoutParam = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);

12. // Ajout du composant au layout.

13. postLayout.addView(txvName,    layoutParam);

Cela devient plus subtil, quand on souhaite modifier une IHM existante. Dans ce cas, il vous faut d'abord supprimer le contenu du layout à reconstruire, puis le remplir à nouveau :

1. // Tout d'abord, il faut détruire tous les éléments contenus dans le layout.

2. LinearLayout layoutOfDynamicContent = (LinearLayout) findViewById(R.id.layoutOfDynamicContent);

3. layoutOfDynamicContent.removeAllViewsInLayout();

5. // Ajouter les composants à ce layout. Votre IHM va être mise à jour.

Vous remarquerez que l'on ne détruit pas le layout, mais son contenu. C'est d'ailleurs ce contenu qui est entièrement reconstruit.

Enfin, un élément important à garder en tête est le cycle de vie de votre activité. Si vous ne mettez pas en place la sauvegarde de vos données lors des changements d'état (au sein des méthodes onPause, onResume), votre application rechargera entièrement les données à partir du serveur. Il vous faut donc être attentif à ce point.

3 - Mise en place

3-1 - Structure du projet

Le projet est structuré de manière classique. Votre activité est associée à un fichier de layout qui ne décrit que les éléments qui sont statiques à votre IHM.

Pour le reste rien n'est changé.

3-2 - Du code par l'exemple

Étant donné qu'il n'y a pas de concept spécifique à assimiler pour construire dynamiquement des IHM à la volée. Le mieux est d'aller directement dans le code et d'expliquer celui-ci. Ce code provient du tutoriel « DynamicGui » disponible sur Android2ee.com à la rubrique « Exemples ». L'application de cet exemple a pour objectif d'afficher la liste d'éléments dont la structure est la suivante :

Nom du champ

Type de la donnée

Titre

String

Description

String

Messages

List<Message>

FromWebPicture

Drawable

Où l'objet Message est le suivant :

Titre

String

Message

String

From

String

FromPicture

Drawable

Les contraintes sont que la taille des listes est inconnue, seule la structure des données est connue par avance. De même les images sont à récupérer soit sur le web via leur URL, soit dans le dossier ressource\drawable de l'application.

3-2-1 - Les fichiers usuels de l'application

3-2-1-1 - Le fichier AndroidManifest

Le manifeste Android est un fichier androidManifest.xml banal, ni l'application, ni le système ne savent que vous construisez dynamiquement votre écran.

Dans cet exemple, il définit l'application, son unique activité, la version minimale du système à utiliser et pour pouvoir aller récupérer des images via leur URL, il demande l'accès à internet.

1. <? xml version = "1.0" encoding = "utf-8" ?>

2. <manifest xmlns:android = "http://schemas.android.com/apk/res/android"

3. package = "com.android2ee.tuto.gui"

4. android:versionCode = "1"

5. android:versionName = "1.0">

6. <application android:icon = "@drawable/icon" android:label = "@string/app_name">

7. <activity android:name = ".DynamicGui"

8. android:label = "@string/app_name">

9. <intent-filter>

10. <action android:name = "android.intent.action.MAIN"/>

11. <category android:name = "android.intent.category.LAUNCHER"/>

12. </ intent-filter>

13. </ activity>

14. </ application>

15. <uses-sdk android:minSdkVersion = "8"/>

16. <!-- Permission pour accéder à internet (usuel )-->

17. <uses-permission android:name = "android.permission.INTERNET"/>

18. </ manifest>

3-2-2 - Le fichier de layout

Ce fichier décrit les composants statiques de l'IHM. Dans cet exemple, il définit :

- le layout principal de l'activité ;

- un label affichant la chaine de caractères « Bonjour » ;

- un bouton permettant de relancer la construction dynamique de l'IHM ;

- et enfin, le layout qui contiendra la vue reconstruite dynamiquement.

Ce qui donne :

1. <? xml version = "1.0" encoding = "utf-8" ?>

2. <LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"

3. android:orientation = "vertical"

4. android:layout_width = "fill_parent"

5. android:layout_height = "fill_parent"

6. android:id = "@+id/mainlayout">

7. <TextView android:layout_width = "fill_parent"

8. android:layout_height = "wrap_content"

9. android:text = "@string/hello"

10. android:id = "@+id/txvHello" />

11. <Button android:text = "@string/reload"

12. android:id = "@+id/btnReload"

13. android:layout_width = "wrap_content"

14. android:layout_height = "wrap_content"></Button>

15. <LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"

16. android:orientation = "vertical"

17. android:layout_width = "fill_parent"

18. android:layout_height = "fill_parent"

19. android:id = "@+id/layoutOfDynamicContent">

20. </LinearLayout>

21. </LinearLayout>

3-2-3 - Destruction de la vue et son réaffichage

Il faut tout d'abord détruire le contenu de votre layout puis le reconstruire. La méthode à utiliser pour la destruction du contenu de votre layout est removeAllViewsInLayout(); (la méthode removeAllViews() ne marche pas). Un grand merci à Yan Verdavaine de développez.com pour m'avoir ouvert les yeux. Encore une fois, merci Monsieur.

Ensuite, il vous suffit d'ajouter vos composants à ce layout. Votre IHM sera mise à jour automatiquement.

Ce qui donne :

1. // Tout d'abord, il faut détruire tous les éléments contenus dans le layout.

2. LinearLayout layoutOfDynamicContent = ( LinearLayout ) findViewById(R.id. layoutOfDynamicContent );

3. layoutOfDynamicContent .removeAllViewsInLayout();

5. // Ajouter les composants à ce layout.

6. // Cf. paragraphes suivants.

7. // Et c'est tout votre layout qui va être mis à jour automatiquement.

3-2-4 - Gestion du placement des composants au sein des layouts

L'un des points-clefs dans la construction d'IHM, dynamique ou pas, est le placement des composants au sein des layouts. En effet, outre le choix du layout, il faut arriver à positionner proprement son composant en son sein. En particulier, les définitions de son comportement en largeur et hauteur (android:layout_width et android:layout_height), de sa marge, de sa gravité sont des éléments décisifs pour la mise en place de votre écran.

Dans cet article, je n'aborderai que le cas du layout LinearLayout.

Voici, le code permettant de définir un LinearLayout et de lui ajouter un composant en gérant les marges, la gravité, sa largeur et sa hauteur.

1. // Paramètres généraux du layout :

3. // Déclaration du layout et instanciation de celui-ci.

4. LinearLayout lilPost = new LinearLayout( this );

6. // Définition de son orientation.

7. lilPost .setOrientation(LinearLayout. VERTICAL );

9. //Définition de son padding (le padding est la distance en pixels, entre le bord du composant et son contenu).

10. lilPost .setPadding(0, 15, 0, 0);

12. //Définition de la couleur de fond du layout.

13. lilPost .setBackgroundColor(0xFF007AAD);

14. ...

17. // Paramètres spécifiques au placement du composant webPicture au sein du layout :

19. // Définition du paramètre de placement du composant au sein du layout et instanciation (avec la spécification de la manière dont le composant va remplir l'espace).

20. LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams. WRAP_CONTENT , LinearLayout.LayoutParams. WRAP_CONTENT );

22. //Définition de la gravité du composant (comment il se positionne au sein de la zone qui lui est allouée).

23. params . gravity =Gravity. CENTER_HORIZONTAL ;

25. // Définition des marges du composant (distance, en pixels, autour du composant).

26. params .setMargins(5, 5, 5, 5);

28. // Ajout du composant dans le layout avec les paramètres de positionnement définis ci-dessus.

29. lilPost .addView( webPicture , params );

Ce code est équivalent au fichier xml suivant :

1. <LinearLayout android:id = "@+id/ lilPost "

2. android:orientation = " vertical "

3. android: paddingLeft = " 5 "

4. android: paddingRight = " 5 "

5. android: paddingTop = " 5 "

6. android: paddingBottom = " 5 "

7. android :background = " # 007AAD">

9. <ImageButton

10. android:id = "@+id/ webPicture "

11. android:layout_width = " wrap_content "

12. android:layout_height = " wrap_content "

13. android: layout_marginLeft = " 5 "

14. android: layout_marginRight = " 5 "

15. android: layout_marginTop = " 5 "

16. android: layout_marginBottom = " 5 "

17. android:gravity ="center_horizontal">

18. </ ImageButton >

19. </ LinearLayout >

3-2-5 - Gestion du Scroll

Dans la problématique de l'affichage d'une vue construite dynamiquement se pose souvent la question du scroll. En effet, la construction dynamique implique souvent l'incapacité à prévoir la taille que prendront nos données. Il nous faut ainsi souvent prévoir une Scroll Bar.

Sous Android le composant ScrollView ne peut posséder qu'un enfant. Cet enfant se doit donc d'être votre layout contenant les composants ajoutés dynamiquement. De même il devrait remplir l'espace en largeur et en hauteur du layout principal dans lequel il se place.

Ainsi nous obtenons le code suivant :

1. // Tout d'abord, il faut supprimer tous les éléments du layout principal.

3. // Ce layout est déjà chargé par ailleurs.

4. layoutOfDynamicContent .removeAllViewsInLayout();

6. // Ensuite il faut définir et instancier la ScrollView.

7. // Le this correspond à l'Activité contenant ces lignes.

8. ScrollView scvMain = new ScrollView( this );

10. // On définit la couleur de fond du scroll.

11. scvMain .setBackgroundColor(0xFFCFDBEC);

13. // Et on rajoute la ScrollView au layout principal en lui demandant de remplir tout l'espace disponible.

14. layoutOfDynamicContent .addView( scvMain , new LinearLayout.LayoutParams(LinearLayout.LayoutParams. FILL _CONTENT , LinearLayout.LayoutParams. FILL _CONTENT ) );

16. // Ensuite on définit le layout qui contiendra les composants ajoutés dynamiquement.

17. LinearLayout lilContent = new LinearLayout( this );

19. // Code de construction dynamique de l'IHM.

20. // Ajout du layout à la ScrollView en lui demandant de remplir tout l'espace disponible.

21. scvMain .addView( lilContent , new LinearLayout.LayoutParams(LinearLayout.LayoutParams. FILL _CONTENT , LinearLayout.LayoutParams. FILL _CONTENT ) );

3-2-6 - Gestion des composants usuels

Le composant TextView est la classe mère de quasiment tous les composants graphiques Android. Pour cette raison, cet article se focalise sur ce composant. D'autant que cet article a pour but de décrire comment générer dynamiquement une IHM, pas de comment manipuler les composants.

Le code suivant montre comment :

- déclarer et instancier le composant ;

- lui affecter un texte, une couleur de fond et une couleur de texte ;

- définir sa police de caractères et son type face (Bold, Italic, Normal) ;

- définir le texte à afficher par défaut quand le composant n'a pas de texte à afficher ;

- positionner la sauvegarde automatique de l'état du composant associé au cycle de vie de l'activité ;

- gérer son scrolling ;

- gérer sa visibilité ;

- et enfin, l'ajouter au layout qui est censé le contenir.

1. // Tout d'abord, déclarez et instanciez le composant en lui passant son Contexte.

2. // Ici le contexte n'est autre que l'activité dans lequel l'IHM est construite, d'où le this.

3. TextView txvTitle = new TextView( this );

5. // Affectation du texte à afficher par le composant.

6. txvTitle .setText( "titre : " + post .getString( "titre" ));

8. // Affectation de sa couleur de fond.

9. txvTitle .setBackgroundColor(0xFF627AAD);

11. // Affectation de sa couleur de text.

12. txvTitle .setTextColor(0xFFFFFFFF);

14. // Définition du typeFace du composant (Italic, Bold, Normal,Bold_Italic), un autre type de typeFace étant la police : MonoSpace, Sans_Serif, Serif.

15. txvTitle .setTypeface(Typeface. defaultFromStyle (Typeface. BOLD ));

17. // Le texte à afficher quand il n'y a aucun texte à afficher par le composant (i.e. quand le composant n'a rien à afficher).

18. txvTitle .setHint( "C'est quoi un HintText" );

20. // La couleur du hint-texte.

21. txvTitle .setHintTextColor(0xFF555555);

23. // Pour permettre de sauver en mémoire l'état du composant quand l'activité sera détruite pour être restauré plus tard.

24. txvTitle .setFreezesText( true );

26. // Ajout d'une scroll bar au composant.

27. txvTitle .setHorizontallyScrolling( true );

29. // Mise en place d'une ligne de transparence horizontale (à droite et à gauche) lors du scroll du composant ou setVerticalFadingEdgeEnabled pour mettre cette ligne verticale (en haut et en bas), ou les deux. Si le composant n'a pas de scrollBar, cela ne fera rien.

30. txvTitle .setHorizontalFadingEdgeEnabled( true );

32. // Définition de la hauteur/largeur de cette ligne de transparence.

33. txvTitle .setLines(2);

35. // Gérez la visibilité du composant, il peut être Visible, Invisible (caché mais l'espace pour le composant reste réservé) ou Gone (caché et l'espace du composant est libéré et utilisé par les autres composants).

36. txvTitle .setVisibility(View. VISIBLE );

38. // Et ainsi de suite, explorez l'API.

39. // Et ajout du composant au layout qui le contient.

40. lilPost .addView( txvTitle , new LinearLayout.LayoutParams(LinearLayout.LayoutParams. FILL _CONTENT , LinearLayout.LayoutParams. FILL _CONTENT));

3-2-7 - Gestion des composants images

La gestion des composants de type image implique qu'il faut récupérer l'image à partir d'une chaine de caractères représentant son nom et l'affecter au composant. Ce paragraphe explique comment effectuer cette opération dans deux cas de figure :

- l'image est une ressource de votre application (dans un dossier res\drawable-**) ;

- l'image est une ressource du web (dont l'URL est connue, de type http://adresseWeb) ;

Un composant de type image est soit ImageView soit ButtonView, cela n'a pas d'importance ici, le traitement est identique.

Dans les deux cas, le code pour créer le composant est le même, seule la récupération de l'objet Drawable diffère :

1. // Définition et instanciation du composant Image.

2. ImageView webPicture = new ImageView( this );

4. // Le drawable à afficher.

5. Drawable monDrawable = //Le Drawable à affecter ;

7. // Affectation du composant à l'image.

8. webPicture .setImageDrawable( //Le Drawable à affecter );

10. // Définition de la couleur de fond du composant (facultatif).

11. webPicture .setBackgroundColor(0xFFFFFFFF);

3-2-7-1 - Cas d'une image contenue dans les ressources de l'application

Pour récupérer de manière dynamique une image contenue dans le dossier de ressources à partir de la chaine de caractères représentant son nom, il faut réussir à retrouver son identifiant. Muni de cet identifiant le chargement de la ressource est naturel.

1. int pictureId =getResources().getIdentifier( message .getString( "fromPicture" ), "drawable" , "com.android2ee.tuto.gui" );

2. picture .setBackgroundDrawable(getResources().getDrawable( pictureId ));

La méthode getResources appartient à la classe ContextWrapper dont étend Activity (entre autres) et renvoie un objet de type Resources. Cette classe (Resources) permet de manipuler les ressources de l'application, en particulier leur récupération.

3-2-7-1-1 - La méthode getIdentifier

La méthode public int getIdentifier(String name, String defType, String defPackage) permet de retrouver l'identifiant généré par le compilateur pour une ressource particulière. Il suffit de lui passer le nom de la ressource, son type et le package racine de votre application (ou de l'application dans laquelle se trouve la ressource). Pour ce qui est du type, ce paramètre n'est autre que celui que l'on retrouve en seconde position dans l'appel usuel à un identifiant, par exemple :

- R.string.maChaine a pour type string ;

- R.layout.monLayout a pour type layout ;

- R.drawable.monImage a pour type drawable ;

- R.id.monComposant a pour type id.

Pour comprendre vraiment, il suffit de regarder le fichier de ressources R généré lors de la compilation :

1. /* AUTO-GENERATED FILE. DO NOT MODIFY.

2. *

3. * This class was automatically generated by the

4. * aapt tool from the resource data it found. It

5. * should not be modified by hand.

6. */

7. package com.android2ee.tuto.gui;

9. public final class R {

11. public static final class attr {

12. }

14. public static final class drawable {

15. public static final int icon =0x7f020000;

17. public static final int icon_sti1 =0x7f020001;

19. public static final int icon_sti2 =0x7f020002;

21. public static final int icon_sti2b =0x7f020003;

23. public static final int icon_sti3 =0x7f020004;

24. }

26. public static final class id {

27. public static final int btnReload =0x7f050002;

29. public static final int layoutOfDynamicContent =0x7f050003;

31. public static final int mainlayout =0x7f050000;

33. public static final int txvHello =0x7f050001;

34. }

36. public static final class layout {

37. public static final int main =0x7f030000;

38. }

40. public static final class string {

41. public static final int app_name =0x7f040001;

43. public static final int hello =0x7f040000;

45. public static final int reload =0x7f040002;

46. }

47. }

La méthode getIdentifier(Stringname,StringdefType,StringdefPackage) devient alors limpide :

- le paramètre defPackage est le package du fichier ;

- le paramètre defType est le nom de classe contenant votre identifiant ;

- le paramètre name est le nom de l'identifiant contenu dans cette classe.

3-2-7-2 - Cas d'une image provenant du web

Pour récupérer une image hébergée sur le web, je préconise l'utilisation de la méthode suivante :

1. /**

2. * Cette méthode renvoie le Drawable associé à une URL d'image

3. * @param urlPath l' URL de l'image

4. * @return L'objet Drawable téléchargé à partir de l' URL passée en paramètre

5. */

7. private Drawable getPicture (String urlPath ) {

8. // Le drawable à renvoyer

9. Drawable drawable = null ;

10. try {

11. // Récupération de l'URL à partir de sa représentation sous forme de String.

12. URL URL = new URL ( urlPath );

13. // Ouverture de l'inputStream associé à cette URL pour sa lecture.

14. InputStream is = (InputStream) URL .getContent();

15. // Construction du Drawable à partir de ce flux entrant.

16. drawable = Drawable. createFromStream ( is , "src" );

17. } catch (IOException e ) {

18. Log. e ( tag , e .toString());

19. // Si une exception se produit faire quelque chose d'intelligent.

20. }

21. // Renvoyer le résultat.

22. return drawable ;

23. }

Cette méthode ne fait rien de plus qu'ouvrir un flux entrant sur l'URL de l'image et à partir de ce flux construit l'objet graphique Drawable souhaité.

L'utilisation de cette méthode est elle aussi « triviale » :

1. // Instanciation du composant image.

2. ImageView webPicture = new ImageView( this );

4. // Récupération du Drawable par appel à la méthode getPicture et affectation au composant.

5. webPicture .setImageDrawable(getPicture( http://nomDeLImage ));

3-2-8 - Mise en place de données factices pour les tests

Je préconise, lors de la mise en place d'une IHM construite dynamiquement, l'utilisation d'une classe générant des données de tests durant le développement et les tests. Cette classe renvoie un flux aléatoire de données mais dont la structure est celle attendue. Cela permet de coder son IHM sans se soucier de la récupération de données et ainsi de se concentrer uniquement sur sa définition. Ce n'est pas nécessaire, c'est juste plus facile.

Dans l'exemple associé à cet article, la structure des données est la suivante :

Nom du champ

Type de la donnée

Titre

String

Description

String

Messages

List<Message>

FromWebPicture

Drawable

Où l'objet Message est le suivant :

Titre

String

Message

String

From

String

FromPicture

Drawable

Le Format JSON est celui choisi pour cet exemple.

La méthode de construction d'un objet de ce type est la suivante :

1. private JSONObject generateOneData () {

3. try {

4. // Instanciation et déclaration de l'objet JSON.

5. JSONObject jsonPost = new JSONObject();

7. // Récupération d'un entier de référence (le choix du sujet du post).

8. int selectedInt = getRandomInt(6);

10. // Instanciation de ce sujet.

11. String subject = titres [ selectedInt ];

13. // Ajout du champ name avec la valeur post à l'objet JSON.

14. jsonPost .put( "name" , "post" );

16. // Ajout du champ titre avec la valeur subject à l'objet JSON.

17. jsonPost .put( "titre" , subject );

19. // Ajout du champ name avec la valeur post à l'objet JSON.

20. jsonPost .put( "description" , descriptions [ selectedInt ]);

22. // Ajout du champ FromWebPicture avec la valeur le nom de l'URL de l'image à l'objet JSON.

23. jsonPost .put( "fromWebPicture" , webDrawables [ selectedInt ]);

25. // Déclaration et instanciation d'un tableau JSON.

26. JSONArray jsonMessagesList = new JSONArray();

28. // Déclaration de l'objet JSON qui sera ajouté au tableau.

29. JSONObject jsonMessage ;

31. // Entier permettant d'associer la même image au même champ « from » .

32. int fromNum ;

34. // Création en boucle des objets JSON à insérer dans le tableau.

35. for ( int i = 0; i < getRandomInt(9); i ++) {

36. // Instanciation de l'objet JSON, ajout de valeurs et ajout à la liste :

37. jsonMessage = new JSONObject();

38. jsonMessage .put( "name" , "message" );

39. jsonMessage .put( "titre" , titresMessages [getRandomInt(6)] + " " + subject );

40. jsonMessage .put( "message" , messages [getRandomInt(7)] + " " + subject );

41. fromNum =getRandomInt(4);

42. jsonMessage .put( "from" , from [ fromNum ]);

43. jsonMessage .put( "fromPicture" , drawables [ fromNum ]);

44. jsonMessagesList .put( jsonMessage );

45. }

47. // Ajout du tableau à l'objet JSON initial.

48. jsonPost .put( "messages" , jsonMessagesList );

50. // Et retour.

51. return jsonPost ;

53. } catch (JSONException e ) {

54. // Faire quelque chose d'intelligent ici :

55. return null ;

56. }

57. }

Où les tableaux suivants sont utilisés comme données de test (pour des raisons de lisibilité, je les ai vidés de leur contenu) :

1. /**

2. * 6 items Titres. Items utilisés lors de la génération des données.

3. */

4. String[] titres = { "" };

6. /**

7. * 6 items Descriptions. Items utilisés lors de la génération des données.

8. */

9. String[] descriptions = { "" };

11. /**

12. * 6 items titre du message. title Items utilisés lors de la génération des données.

13. */

14. String[] titresMessages = { "" };

16. /**

17. * 7 items corps du message. Items utilisés lors de la génération des données.

18. */

19. String[] messages = { "" };

21. /**

22. * 4 items auteur du message. Items utilisés lors de la génération des données.

23. */

24. String[] from = { "" };

26. /**

27. * 4 items image de l'auteur. Items utilisés lors de la génération des données.

28. */

30. String[] drawables = { "" };

31. /**

32. * 5 items image du sujet en provenance du web. Items utilisés lors de la génération des données.

33. */

34. String[] webDrawables = { "" };

4 - Remerciements

J'adresse ici tous mes remerciements à Djug pour son aide et ses déploiements et à ClaudeLELOUP pour l'excellence de ses corrections orthographiques. Un grand merci à Niitaku pour avoir corrigé la version 1.1 de cet article.

Je remercie les correcteurs techniques Feanorin et yan pour la pertinence de leurs remarques, la richesse de leur relecture et la découverte de la méthode removeAllViewsInLayout. Merci à vous deux.