Ces slides décrivent les layouts XML sous Android: les éléments graphiques, les conteneurs, les listeners, les ListView...

1. ANDROID: LES LAYOUTS XML
MOHAMED BOURAOUI
BOURAWI.MOHAMED@GMAIL.COM

2. LES INTERFACES GRAPHIQUES SIMPLES
Les interfaces graphiques simples

3. EXEMPLE
ImageButton
TextView
CheckBox
RadioButton
ToggleButton
RatingBar

4. LES CONTENEURS
 LinearLayout: dispose les éléments de gauche à droite ou du haut vers le
bas
 RelativeLayout: les éléments enfants les uns par rapport aux autres
 TableLayout: disposition matricielle
 FrameLayout: disposition en haut à gauche en empilant les éléments
(utilisés conjointement avec les fragments)
 Webview :affiche le contenu d'une page web

5. CONTENEURS : ATTRIBUTS PRINCIPAUX
 Orientation
 Sens de placement des vues dans un conteneur
 android:orientation = vertical | horizontal
 Taille
 Surface prise par la vue
 android:layout_width = ??px | fill_parent | wrap_content
 android:layout_height = ??px | fill_parent | wrap_content
 Gravité
 Alignement d'une vue dans son conteneur
 android:layout_gravity = left | center_horizontal | top | bottom | right
Les unités dp et sp sont indépendants de la résolution de
l’écran, Il est recommandé d’utiliser dp pour les objets et sp
pour les polices du texte.

6. LINEARLAYOUT: EXEMPLE

7. RELATIVELAYOUT: EXEMPLE

8. RELATIVELAYOUT: ATTRIBUTS
 Placement par rapport au conteneur
 android:layout_alignParentBottom="b" (où b vaut true ou false)
 android:layout_alignParentLeft="b" (où b vaut true ou false)
 android:layout_alignParentRight="b" (où b vaut true ou false)
 android:layout_alignParentTop="b" (où b vaut true ou false)
 android:layout_centerHorizontal="b" (où b vaut true ou false)
 android:layout_centerInParent="b" (où b vaut true ou false)
 android:layout_centerVertical="b" (où b vaut true ou false)
 Placement par rapport aux autres éléments
 android:layout_above="@+id/ident"/
 android:layout_below="@+id/ident"/
 android:layout_toLeftOf="@+id/ident"/
 android:layout_toRightOf="@+id/ident"/
 android:layout_alignLeft="@+id/ident"/
 android:layout_alignRight="@+id/ident"/
 android:layout_alignTop="@+id/ident"/
 android:layout_alignBottom="@+id/ident"/

9. TABLELAYOUT : DISPOSITION MATRICIELLE
<TableLayout>
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button" />
</TableRow>
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button2"
/>
</TableRow>
</TableLayout>

10. SCROLLVIEW
 Ce layout permet de défiler le contenu par une barre de défilement vertical si le
contenu dépasse sa longueur. Pour appliquer ce layout, on met à son intérieur un
autre type de layout (LinearLayout par exemple) dans laquelle on met un
contenu.
<?xml version ="1.0" ?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/white">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingMultiplier="2"
android:text="@string/texteAndroid"
android:textColor="@android:color/black" />
</LinearLayout>
</ScrollView>

11. HORIZONTALSCROLLVIEW
 Ce layout nous permettra de défiler le contenu mais cette fois-ci d’une
manière horizontale. Exemple:

12. HORIZONTALSCROLLVIEW (2)
<?xml version ="1.0"?>
<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:color/white">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="72dp"
android:layout_weight="0.07"
android:src="@drawable/contact" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="72dp"
android:layout_weight="0.07"
android:src="@drawable/support" />
</LinearLayout>
</HorizontalScrollView>

13. LES LABELS DE TEXTE
<TextView
android:id="@+id/le_texte"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello"
android:layout_gravity="center"/>
LinearLayout gabarit = new LinearLayout(this);
gabarit.setGravity(Gravity.CENTER); // centrer les éléments graphiques
gabarit.setOrientation(LinearLayout.VERTICAL); // empiler vers le bas !
TextView texte = new TextView(this);
texte.setText(« Créer l’interface dans le code");
gabarit.addView(texte);
setContentView(gabarit);
Déclaration dans le layout
Créer « dynamiquement »

14. LES ZONES DE TEXTE
<EditText android:text=""
android:id="@+id/EditText01"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</EditText>
EditText edit = new EditText(this);
edit.setText("Edit me");
gabarit.addView(edit);
Déclaration dans le layout
Créer « dynamiquement »

15. LES ZONES DE TEXTE : ÉVÈNEMENTS
Intercepter les évènements de saisie
edit.addTextChangedListener(new TextWatcher() {
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
// do something here
}
);

16. LES IMAGES
<ImageView
android:id="@+id/logoISET"
android:src="@drawable/iset"
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
></ImageView>
ImageView image = new ImageView(this);
image.setImageResource(R.drawable.iset);
gabarit.addView(image);
Déclaration dans le layout
Créer « dynamiquement »

17. LES BOUTONS
<Button android:text="Go !"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
Button b = (Button)findViewById(R.id.Button01);
b.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(v.getContext(), « C’est un
clic!",Toast.LENGTH_LONG).show();
}
});
Déclaration dans le layout
Intercepter l’évènement de clic

18. GESTION DES ÉVÈNEMENTS : LES « LISTENERS »
 La gestion des évènements est assurée par des interfaces Java, dont le scénario
est:
1. Associer à l’objet sur lequel on
veut gérer un ou plusieurs
évènements l’interface adéquate,
et on redéfinit les méthodes de
cette dernière avec le code Java
qui sera exécuté le moment ou
l’évènement se produit.
2. l’interface reste à l’écoute des
éventuels évènements.
3. un certain évènement compatible
se produit.
4. L’interface exécutera alors le code
contenu dans la méthode
adéquate.

19. RÉCAPITULATIF DES ÉVÈNEMENTS
 Evénements généraux:
Tous les éléments d’interface (conteneurs et widgets)possèdent les
méthodes suivantes :

20. RÉCAPITULATIF DES ÉVÈNEMENTS
 Evénements spécifiques:
Pour EditText et TextView

21. LES LISTES
 L’importance d’une liste vient du besoin de dérouler un nombre important
d’élèments. Pour ce faire, il suffit de créer un layout linéaire et d’y
implanter une ListView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout …>
<ListView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/listView"
android:layout_weight="1" />
</LinearLayout>

22. LES LISTES (2)
 Etant donné qu'une liste peut contenir des éléments graphiques divers et
variés, les éléments de la liste doivent être insérés dans un ListAdapter.
 Exemple : Une liste de chaines de caractères:
1. Création du layout d’un élément de la liste montexte.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:text="TextView"
android:id="@+id/montexte"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
</TextView>

23. LES LISTES (2)
2. Layout de la liste
<?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">
<ListView
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:id="@+id/maliste">
</ListView>
</LinearLayout>

24. LES LISTES (4)
ListView list = (ListView)findViewById(R.id.maliste);
3. Instancier la ListeView
4. Ajouter dynamiquement un ArrayAdapter à la ListeView list
ArrayAdapter<String> tableau = new ArrayAdapter<String>(
list.getContext(), R.layout.maligne);
for (int i=0; i<40; i++) {
tableau.add("Ligne n° " + i);
}
list.setAdapter(tableau);

25. LES LISTES (4)
 Résultat:

26. LES LISTES : EXEMPLE PLUS COMPLEXE
 Lorsque les listes contiennent un layout plus complexe qu'un texte, il faut
utiliser un autre constructeur de ArrayAdapter:
ArrayAdapter (Context context, int resource, int textViewResourceId)
 Ressource : L’identificateur du layout à appliquer à chaque ligne.
 textViewRessourceId: L’identificateur de la zone de texte inclue dans ce layout

27. LES LISTES : EXEMPLE PLUS COMPLEXE (1)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout…>
<TextView …>
</TextView>
<LinearLayout
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:gravity="end"
android:layout_gravity="center">
<ImageView android:id="@+id/monImage"
android:layout_height="wrap_content"
android:contentDescription="demo"
android:layout_width="wrap_content"
android:src="@android:drawable/ic_menu_compass">
</ImageView>
</LinearLayout>
</LinearLayout>
 1. Création du layout d’un
élément de la liste
montexte.xml

28. LES LISTES : EXEMPLE PLUS COMPLEXE (2)
 2. Layout de la liste
<?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">
<ListView android:layout_height="fill_parent"
android:id="@+id/maliste"
android:layout_width="fill_parent">
</ListView>
</LinearLayout>

29. LES LISTES : EXEMPLE PLUS COMPLEXE (3)
ListView list = (ListView)findViewById(R.id.maliste);
3. Instancier la ListeView
4. Ajouter dynamiquement un ArrayAdapter à la ListeView list
ArrayAdapter<String> tableau = new ArrayAdapter<String>(
list.getContext(), R.layout.maligne, R.id.monTexte);
for (int i=0; i<40; i++) {
tableau.add("Ligne n° " + i);
}
list.setAdapter(tableau);

30. LES LISTES : EXEMPLE PLUS COMPLEXE (4)
 Résultat:

31. INCLURE LES LAYOUTS
 Les interfaces peuvent inclure d’autres interfaces pour favoriser la
réutilisabilité des layouts. Pour l’inclusion, on utilise le mot clé include
 Exemple
<RelativeLayout>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/champ_txt«
android:text="Ecrire ici 30 caractères" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:id="@+id/txt"/>
<include android:id="@+id/include01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
layout="@layout/included"
></include>
</RelativeLayout>
Included.xml
principale.xml principale.xml