Disposition relative

Essayer Compose
Jetpack Compose est le kit d'outils d'interface utilisateur 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 à des éléments frères (par exemple, à gauche ou en dessous d'une autre vue) ou 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 une hiérarchie de mise en page plate, ce qui améliore les performances. Si vous utilisez plusieurs groupes LinearLayout imbriqués, vous pouvez peut-être les remplacer par un seul RelativeLayout.

Positionnement des 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 un ID). Vous pouvez donc aligner deux éléments par bordure droite, ou les créer en dessous d'un autre, centrés à l'écran, centrés à 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 dans 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 la valeur est "true", le bord supérieur de cette vue correspond au bord supérieur du parent.
android:layout_centerVertical
Si la valeur est "true", centre l'enfant verticalement dans son parent.
android:layout_below
Positionne le bord supérieur de cette vue en dessous de 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, pour activer une position de mise en page par rapport à la RelativeLayout parente, soit un ID qui fait référence à une autre vue de la mise en page par rapport à laquelle cette 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" sera positionnée en dessous de "view2", même si "view2" est la dernière vue déclarée dans la hiérarchie. L'exemple ci-dessous illustre ce 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.