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 être centré 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 :

<?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.

16 commentaires


  1. comment faire la création d’un identificateur dans spinner sous Android?

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *