Layout (ou comment positionner ces objets graphiques)

Introduction

Les objets Layout (à traduire par conteneur), vont contenir des objets graphiques (boutons, ...) mais aussi d'autres conteneurs.

Ils dérivent tous de la classe ViewGroup.

Les widgets seront donc instanciés dans un layout (cf. Instanciation des Widgets par layout XML).

Les différents layouts mis à disposition

LinearLayout: succession d'éléments qui seront positionnés soit verticalement ou soit horizontalement (en colonne ou en ligne) (Le plus courant)
TableLayout: tableau (colonne, ligne)
RelativeLayout: positionnement relatif à un parent ou un autre composant
FrameLayout: utilisé pour placer un seul élément dans le coin en haut à gauche du FrameLayout

Image non trouvée ! Il existe aussi AbsoluteLayout qui permet de positionner exactement là où vous voulez vos objets (android:layout_x et android:layout_y). Mais il est déprécié depuis la v1.5 d'android.

Paramètres communs

Paramètres communs aux objets ViewGroup (et des aussi des views en passant !)

layout_marginTop: Pour spécifier une marge en haut de l'objet
layout_marginBottom: Même chose, mais en bas...
layout_marginLeft: à gauche...
layout_marginRight: et à droite.

layout_gravity Spécifier comment les objets View seront positionnés. Vois chapitre sur la gravité ci-après.
layout_weight Spécifier comment l'espace doit est allouer avec les objets View
layout_x Coordonnée X
layout_y et Y d'un ViewGroup

La couleur/l'image de fond:

android:background, une couleur de fond au format RGB (#00FF00 pour vert, par exemple).

android:background="@drawable/id_image" ou id_image est le nom de l'image à charger en background. L'image étant stockée dans drawable par défaut mais aussi dans drawable-land si vous voulez une image spécifique en mode paysage, ou les autres drawable pour d'autres formats. Cette image pourra être du jpeg, ..., du png, du 9-patch ou un shape.

La gravité

Petit retour sur layout_gravity:

Il est possible d'utiliser l'attribut de gravité sur un Layout. les conséquences seront alors d'orienter le positionnement de tous les objets contenus dans le layout (voir le paragraphe concernant la gravité).

Mais il existe l'attribut layout_gravity positionné sur un objet lui-même, qui indiquera alors "individuellement" la gravité sur cet objet.

LinearLayout

Nous en avons déjà vu un, celui le plus utilisé: LinearLayout

Souvenez-vous de notre premier programme, dans le fichier main.xml:

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

Ce conteneur aligne les objets les uns après les autres suivant une orientation qui sera à préciser dans l'attribut android:orientation:

En colonne via la valeur "vertical"
En ligne via la valeur "horizontal"

Quant aux attributs layout_width et layout_height, ils indiquent la largeur et la hauteur que va occuper un layout:

FILL_PARENT : Occupe toute la place disponible sur l'objet parent (moins le padding - la marge - paramétré sur le parent)

Image non trouvée ! à remplacer par MATCH_PARENT à partir d'android 2.3.4 (API LEVEL 8).

WRAP_CONTENT : Aussi grand que possible pour que l'objet et son contenu soient complétement visible à l'écran mais sans qu'ils n'en occupent plus qu'il n'en faut.

TableLayout

Ce layout permet de regrouper les objets de type View dans un tableau de lignes et de colonnes.

Il faudra utiliser la balise <TableRow> pour définir les lignes du tableau. Sachant qu'une ligne pourra contenir plusieurs objets View. Concernant les colonnes, chaque View représentera une cellule du tableau. La taille d'une colonne étant déterminée par la taille de la plus grande cellule dans cette colonne, cellule qui elle-même dépendra de la taille de l'objet View.

Exemple d'écriture:

<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TableRow> <TextView android:text="Nom:" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <EditText android:id="@+id/editNom" android:layout_width="120dp" android:layout_height="wrap_content" > </EditText> </TableRow> <TableRow> <TextView android:text="Prénom:" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <EditText android:id="@+id/editPrenom" android:width="150dp" android:layout_height="wrap_content" /> </TableRow> </TableLayout>

RelativeLayout

Il s'agit de poser un objet par rapport à un autre.

Les attribut utilisablent sont:

- layout_alignParentTop
- layout_alignParentLeft
- layout_alignLeft
- layout_alignRight
- layout_below
- layout_centerHorizontal

Où il suffira de préciser en paramètre l'identifiant de l'objet qui servira de référence dans la position de notre objet.

Par exemple : android:layout_alignLeft="@+id/txtView1"

FrameLayout

Il s'agit de permettre de positionner des objets View à un endroit précis de l'écran via le positionnement du FrameLayout.

Image non trouvée ! Si vous mettez plusieurs View dans un FrameLayout, ils vont tous se positionner dans le coin supérieur gauche du FrameLayout, Ils vont donc se superpositionner les uns sur les autres.

ScrollView

Il s'agit d'un type spécial de FrameLayout. Il va permettre de faire du scrolling sur des objets occupant une place plus importante que ne le permet l'écran.

Image non trouvée ! Cette objet tout comme le FrameLayout ne devra contenir qu'un objet View ou un objet ViewGroup qui devrait être un LinearLayout.

Et la suite ?

Concernant la surface occupée par un objet, les marges, la gravité, tout cela touche les objets eux-mêmes et non le layout.

Note

Il est tout à fait possible de positionner des layouts dans un layout. Cependant, le graphical layout dans Eclipse ne gère pas très bien cela. Une solution pour essayer de s'en sortir sera de dessiner votre layout à part, puis de faire un copier/coller dans le layout qui sera composé des autres layouts. Mais des interventions manuelles seront certainement nécessaire. Pas drôle en résumé et c'est bien dommage !