Layout de base sous Androud

1. M.Houssem LAHIANI
Cours de programmation sous Android
Responsable de matière : Monsieur Houssem Lahiani.
Chapitre 2 : Les interfaces graphiques sous android
Plan du chapitre
Chapitre 2 : Les interfaces graphiques sous Android ......................................................................................................... 2
I. LinearLayout ................................................................................................................................................................ 2
1. Orientation du Layout ............................................................................................................................................. 2
2. Taille des éléments .................................................................................................................................................. 2
II. RelativeLayout ........................................................................................................................................................ 3
1. Positionnement relatif au conteneur...................................................................................................................... 3
2. Position relative aux autres éléments .................................................................................................................... 3
III. AbsoluteLayout ........................................................................................................................................................ 4
IV. TableLayout ............................................................................................................................................................. 4

2. M.Houssem LAHIANI
Chapitre 2 : Les interfaces graphiques sous Android
Les interfaces sont définies via des fichiers XML. Ce format permet d'avoir un éditeur graphique d'interface et d'avoir une vraie séparation entre votre code Java (comportement) et votre interface. Tout ce qui est fait en XML pourrait également être fait en Java, cependant le code serait beaucoup plus verbeux et complexe à maintenir. Les interfaces développées en Java sont principalement utilisé comme le visuel d'un écran doit être généré dynamiquement en fonction des données (un formulaire dynamique par exemple).
Il existe plusieurs types de layouts parmi lesquels :
I. LinearLayout
Ce layout permet de placer les composants « les uns après les autres ». Il faut ensuite savoir de quelle manière (verticalement ou horizontalement).
Plusieurs propriètés sont disponibles pour permettre aux développeurs de personnaliser ce Layout.
1. Orientation du Layout
C’est la première chose que vous précisez quand vous créez votre LinearLayout (android:orientation). Cette option spécifie la façon dont seront alignés les éléments contenus dans ce Layout. Deux options sont disponibles :
 Verticale : Oriente les éléments sur une ligne verticale.
 Horizontale : Oriente les éléments sur une ligne horizontale.
2. Taille des éléments
Le LinearLayout ainsi que tous les widgets qui le composent doivent fournir une taille (hauteur et largeur). Donc ils doivent définir les deux propriétés suivantes :
 android:layout_width
 android:layout_height
Ces deux propriétés peuvent prendre 3 types de valeur :
 Une taille fixe : par exemple 50px (pixels). Donc quel que soit la taille de l’écran, l’élément occupera exactement 50px.
 fill_parent : Dans ce cas on demande au composant d’occuper tout l’espace disponible chez son conteneur parent (après le placement des autres widgets).
 wrap_content : Lorsqu'un layout a cette propriété, sa taille dépend directement de la taille des composants qu'il contient. Pour demander au Widget d’occuper une taille naturelle (la taille de son contenu pour le texte par exemple). S’il est trop gros par rapport à la taille disponible. Android s’occupera par exemple de couper le texte s’il n’y a plus de place.

3. M.Houssem LAHIANI
II. RelativeLayout
Le principe du RelativeLayout est de placer les éléments selon d’autres éléments du conteneur. Voici les différents moyens qui sont à votre disposition pour le placement des éléments dans le cas d’un RelativeLayout :
1. Positionnement relatif au conteneur
Dans cette relation, vous pouvez lier un élément à son conteneur :
 android:layout_alignParentTop (true / false) : Cette option permet de préciser si le haut de l’élément doit être aligné avec celui de son conteneur.
 Même principe pour : android:layout_alignParentBottom, android:layout_alignParentLeft et android:layout_alignParentRight.
 android:layout_centerHorizontal : Indique si l’élément doit être centré horizontalement dans son conteneur.
 Même principe pour : android:layout_centerVertical.
 android:layout_centerInParent : Vous permet d’indiquer que l’élément doit être centré horizontalement et verticalement dans le conteneur.
2. Position relative aux autres éléments
Afin de pouvoir référencer le positionnement d’un élément par rapport à un autre, vous disposez d’un moyen simple et efficace, il s’agit des identificateurs (ID).
Donc voilà comment vous pouvez utiliser un ID :
 A la déclaration d’un élément : android:id= “@+id/idElem”
 A l’utilisation : @id/idElem
Maintenant que les bases sont posées, voici les différentes options disponibles :
 android:layout_above : Indique que l’élément sera placé au-dessus de celui indiqué par son id.
 android:layout_below : Indique que l’élément sera placé en dessous de celui indiqué par son id.
 android:layout_toLeftOf : Indique que l’élément sera placé à gauche de celui indiqué par son id.
 android:layout_toRightOf : Indique que l’élément sera placé à droite de celui indiqué par son id.
 android:layout_alignTop : Indique que le haut de notre élément est aligné avec le haut de l’élément indiqué.
 android:layout_alignBottom : Indique que le bas de notre élément est aligné avec le bas de l’élément indiqué.
 android:layout_alignLeft : Indique que le côté gauche de notre élément est aligné avec le côté gauche de l’élément indiqué.
 android:layout_alignRight : Indique que le côté droit de notre élément est aligné avec le côté droit de l’élément indiqué.
 android:layout_alignBaseLine : Indique que les lignes de base des 2 éléments sont alignées.

4. M.Houssem LAHIANI
III. AbsoluteLayout
Android fournit également le conteneur AbsoluteLayout, dont le contenu est disposé en fonction de coordonnées spécifiques – on lui indique où placer un fils en précisant ses coordonnées X, Y, et Android le positionne à cet endroit sans poser de question. Ceci a l’avantage de fournir un positionnement précis; en revanche, cela signifie également que les vues n’auront un aspect correct que sur des écrans d’une certaine dimension, à moins d’écrire beaucoup de code pour ajuster les coordonnées en fonction de la taille de l’écran.
Les écrans Android pouvant avoir n’importe quelle taille et ces tailles évoluent continuellement, l’utilisation d’AbsoluteLayout risque de devenir assez problématique.
IV. TableLayout
Dernier layout de base, il permet d'organiser les éléments en tableau, comme en HTML, mais sans les bordures. Voici un exemple d'utilisation de ce layout :
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<!-- 2 columns -->
<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<TextView
android:id="@+id/textView1"
android:text="Column 1"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="@+id/button1"
android:text="Column 2" />
</TableRow>
<!-- edittext span 2 column -->
<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<EditText
android:id="@+id/editText1"
android:layout_span="2"
android:text="Column 1 &amp; 2" />
</TableRow>
</TableLayout>

5. M.Houssem LAHIANI