Tutoriel Android : un XML layout pour le Hello World

Publié par kann août - 1 - 2010 - Dimanche

Après avoir développé notre première application Hello World sur Android, nous allons, aujourd’hui, apporter quelques améliorations à l’interface utilisateur en appliquant un XML layout.

Nous nous sommes contenté lors du précédent tutoriel d’afficher un bout de texte « Hello, Android » sans nous soucier de toute contrainte, ou tout autre éventuel problème que peut engendrer cette technique de « hard codage ». Supposons que nous aurons à traduire l’application en plusieurs autres langues, ou à modifier l’ergonomie. Ceux qui ont une petite expérience de développement des interfaces utilisateurs sauront tout de suite que ça va se compliquer petit à petit jusqu’à devenir un vrai cauchemar, et un code difficile à maintenir.

C’est pourquoi Android propose un autre système de construction des Interfaces Utilisateur se basant sur des fichiers XML. Voilà par exemple le XML qui gère exactement de même manière l’interface utilisateur de notre premier Hello World :

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/textview"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:text="@string/hello"/>

La structure générale des XML layout d’Android est simple : Une arborescence d’éléments XML là où chaque nœud porte le nom d’une classe de type View. Naturellement, on peut utiliser le nom de toute sous-classe View et même celle que nous pourrions créer nous-mêmes. Cette structure nous permet de créer rapidement nos UI et de les maintenir facilement dans le futur.
Examinons de près le code précédent :

Attribut	Explication
xmlns:android	C’est la déclaration XML namespace qui demande aux outils Android de se référer aux attributs définis par Android namespace. Cet attribut doit obligatoirement être présent au début de tout fichier de layout Android
android:id	Cet attribut assigne un identifiant unique à l’élément TextView
android:layout_width	Cet attribut définit la largeur de la zone d’affichage en se référent à l’espace écran disponible. Dans notre cas, nous allons utiliser toute la largeur de l’écran
android:layout_height	Tout comme le android:layout_width, sauf que ça concerne la hauteur
android:text	Ca permet de définir le texte à afficher par TextView. Dans cet exemple, nous utilisons une chaîne de caractère de type « ressource » au lieu d’une chaîne « Hard-coded ». La valeur de la chaîne de caractère « hello« , est définie dans le fichier *res/values/strings.xml. Il est recommandé d’utiliser cette technique en vue de faciliter la traduction des applications Android*

Les fichiers XML layout sont situés sous le dossier res/layout de notre projet. « res » comme « ressources ; ce dossier contiendra toutes les ressources qui ne font pas partie du code de l’application comme les images, les fichiers audio et les textes de traduction.

Le plugin Android crée automatiquement un fichier XML layout : main.xml. Dans notre tutoriel « Hello World » nous avons ignoré ce fichier et nous avons « hard-codé » le texte à afficher, ce qui n’est pas propre.

Améliorons alors notre code :

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/textview"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:text="@string/hello"/>

Dans le Package Explorer d’Eclipse, naviguez jusqu’au dossier /res/layout/ et ouvrez le fichier main.xml. Vous aurez peut-être à cliquer sur le tab « main.xml » (en bas de la fenêtre) afin d’afficher la source. Remplacez le code par le suivant :
Et sauvegardez votre fichier
Ouvrer le fichier res/values/strings.xml. C’est le fichier dans lequel vous devez déclarer tous les textes de l’interface utilisateur de votre application. Le plugin Eclipse a du déjà déclaré deux textes : hello et app_name. Il est temps de changer le texte à afficher. Mettons « Bonjour Android ! » Par exemple.

Notre fichier ressemblera à ça :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Bonjour Android !</string>
    <string name="app_name">Hello, Android</string>
</resources>

Finalement, modifions notre classe HelloAndroid et utilisons les ressources que nous venons de déclarer :

package com.androideur.helloandroid;
 
import android.app.Activity;
import android.os.Bundle;
 
public class HelloAndroid extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}