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

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 :

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

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

android:orientation = "vertical"

android:layout_width = "fill_parent"

android:layout_height = "fill_parent"

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

< TextView android:layout_width = "fill_parent"

android:layout_height = "wrap_content"

android:text = "@string/hello"

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

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

android:id = "@+id/btnReload"

android:layout_width = "wrap_content"

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

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

android:orientation = "vertical"

android:layout_width = "fill_parent"

android:layout_height = "fill_parent"

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

</ LinearLayout >

</ LinearLayout >

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 :

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

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

layoutOfDynamicContent .removeAllViewsInLayout();

//Ajouter les composants à ce layout.

//Cf. paragraphes suivants.

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

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.

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

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

LinearLayout lilPost = new LinearLayout( this );

//Définition de son orientation.

lilPost .setOrientation(LinearLayout. VERTICAL );

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

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

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

lilPost .setBackgroundColor(0xFF007AAD);

.

.

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

//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).

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

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

params . gravity =Gravity. CENTER_HORIZONTAL ;

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

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

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

lilPost .addView( webPicture , params );

Ce code est équivalent au fichier xml suivant :

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

android:orientation = " vertical "

android: paddingLeft = " 5 "

android: paddingRight = " 5 "

android: paddingTop = " 5 "

android: paddingBottom = " 5 "

android :background = " # 007AAD"

>

< ImageButton

android:id = "@+id/ webPicture "

android:layout_width = " wrap_content "

android:layout_height = " wrap_content "

android: layout_marginLeft = " 5 "

android: layout_marginRight = " 5 "

android: layout_marginTop = " 5 "

android: layout_marginBottom = " 5 "

android:gravity ="center_horizontal"

>

</ ImageButton >

</ LinearLayout >

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 :

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

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

layoutOfDynamicContent .removeAllViewsInLayout();

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

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

ScrollView scvMain = new ScrollView( this );

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

scvMain .setBackgroundColor(0xFFCFDBEC);

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

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

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

LinearLayout lilContent = new LinearLayout( this );

//code de construction dynamique de l'IHM.

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

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

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.

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

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

TextView txvTitle = new TextView( this );

//Affectation du texte à afficher par le composant.

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

//Affectation de sa couleur de fond.

txvTitle .setBackgroundColor(0xFF627AAD);

//Affectation de sa couleur de text.

txvTitle .setTextColor(0xFFFFFFFF);

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

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

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

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

//La couleur du hint-texte.

txvTitle .setHintTextColor(0xFF555555);

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

txvTitle .setFreezesText( true );

//Ajout d'une scroll bar au composant.

txvTitle .setHorizontallyScrolling( true );

//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.

txvTitle .setHorizontalFadingEdgeEnabled( true );

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

txvTitle .setLines(2);

//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).

txvTitle .setVisibility(View. VISIBLE );

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

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

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

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 :

//Définition et instanciation du composant Image.

ImageView webPicture = new ImageView( this );

//Le drawable à afficher.

Drawable monDrawable = //Le Drawable à affecter ;

//Affectation du composant à l'image.

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

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

webPicture .setBackgroundColor(0xFFFFFFFF);

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

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

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 :

Où l'objet Message est le suivant :

Le Format JSON est celui choisi pour cet exemple.

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

private JSONObject generateOneData () {

try {

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

JSONObject jsonPost = new JSONObject();

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

int selectedInt = getRandomInt(6);

//Instanciation de ce sujet.

String subject = titres [ selectedInt ];

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

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

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

jsonPost .put( "titre" , subject );

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

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

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

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

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

JSONArray jsonMessagesList = new JSONArray();

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

JSONObject jsonMessage ;

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

int fromNum ;

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

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

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

jsonMessage = new JSONObject();

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

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

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

fromNum =getRandomInt(4);

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

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

jsonMessagesList .put( jsonMessage );

}

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

jsonPost .put( "messages" , jsonMessagesList );

//Et retour.

return jsonPost ;

} catch (JSONException e ) {

//Faire quelque chose d'intelligent ici :

return null ;

}

}

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) :

/**

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

*/

String[] titres = { "" };

/**

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

*/

String[] descriptions = { "" };

/**

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

*/

String[] titresMessages = { "" };

/**

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

*/

String[] messages = { "" };

/**

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

*/

String[] from = { "" };

/**

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

*/

String[] drawables = { "" };

/**

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

*/

String[] webDrawables = { "" };