Comprendre le RelativeLayout sous Android

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 :

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 êtrecentré horizontalement et verticalement dans le conteneur.

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.

On peut bien sur référencer un élément qui sera déclaré plus tard dans le fichier XML (Layout).

On va prendre un exemple pour tout expliquer :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  >   <EditText android:id="@+id/nomEdit" android:hint="Entrez votre nom ici" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" />   <EditText android:id="@+id/prenomEdit" android:hint="Entrez votre prenom ici" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_below="@id/nomEdit" />   <Button android:id="@+id/valider" android:text="valider" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/prenomEdit" android:layout_alignRight="@id/prenomEdit" />   <Button android:id="@+id/annuler" android:text="annuler" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toLeftOf="@id/valider" android:layout_alignTop="@id/valider" />   </RelativeLayout>

Et voici le résultat :

Conclusion

Voilà en espérant que ce tutoriel vous a aidé à comprendre le RelativeLayout et à savoir dans quel cas l’utiliser.