Disposition relative

Essayer Compose
Jetpack Compose est le kit d'outils d'UI recommandé pour Android. Découvrez comment utiliser les mises en page dans Compose.

RelativeLayout est un groupe de vues qui affiche les vues enfants dans des positions relatives. La position de chaque vue peut être spécifiée par rapport aux éléments frères (par exemple, à gauche ou en dessous d'une autre vue) ou dans des positions par rapport à la zone RelativeLayout parente (par exemple, alignée en bas, à gauche ou au centre).

Remarque : Pour de meilleures performances et une meilleure compatibilité avec les outils, vous devez créer votre mise en page avec ConstraintLayout.

Un RelativeLayout est un utilitaire très puissant pour concevoir une interface utilisateur, car il peut éliminer les groupes de vues imbriqués et maintenir la hiérarchie de votre mise en page à plat, ce qui améliore les performances. Si vous utilisez plusieurs groupes LinearLayout imbriqués, vous pouvez peut-être les remplacer par un seul RelativeLayout.

Positionner les vues

RelativeLayout permet aux vues enfants de spécifier leur position par rapport à la vue parent ou les unes par rapport aux autres (spécifiée par ID). Vous pouvez donc aligner deux éléments par leur bord droit, ou en placer un sous l'autre, centré sur l'écran, centré à gauche, etc. Par défaut, toutes les vues enfants sont dessinées en haut à gauche de la mise en page. Vous devez donc définir la position de chaque vue à l'aide des différentes propriétés de mise en page disponibles à partir de RelativeLayout.LayoutParams.

Voici quelques-unes des nombreuses propriétés de mise en page disponibles pour les vues dans un RelativeLayout :

android:layout_alignParentTop
Si "true", la bordure supérieure de cette vue correspond à celle du parent.
android:layout_centerVertical
Si la valeur est "true", cet enfant est centré verticalement dans son parent.
android:layout_below
Positionne le bord supérieur de cette vue sous la vue spécifiée avec un ID de ressource.
android:layout_toRightOf
Positionne le bord gauche de cette vue à droite de la vue spécifiée avec un ID de ressource.

Ce ne sont que quelques exemples. Tous les attributs de mise en page sont documentés sur RelativeLayout.LayoutParams.

La valeur de chaque propriété de mise en page est soit une valeur booléenne permettant d'activer une position de mise en page par rapport au RelativeLayout parent, soit un ID qui fait référence à une autre vue dans la mise en page par rapport à laquelle la vue doit être positionnée.

Dans votre mise en page XML, les dépendances par rapport aux autres vues de la mise en page peuvent être déclarées dans n'importe quel ordre. Par exemple, vous pouvez déclarer que "view1" doit être positionné sous "view2", même si "view2" est la dernière vue déclarée dans la hiérarchie. L'exemple ci-dessous illustre ce type de scénario.

Exemple

Chacun des attributs qui contrôlent la position relative de chaque vue est mis en évidence.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp" >
    <EditText
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/reminder" />
    <Spinner
        android:id="@+id/dates"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/times" />
    <Spinner
        android:id="@id/times"
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentRight="true" />
    <Button
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/times"
        android:layout_alignParentRight="true"
        android:text="@string/done" />
</RelativeLayout>

Pour en savoir plus sur tous les attributs de mise en page disponibles pour chaque vue enfant d'un RelativeLayout, consultez RelativeLayout.LayoutParams.