Créer une mise en page linéaire

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.

LinearLayout est un groupe de vues qui aligne tous les enfants dans une seule direction, verticalement ou horizontalement. Vous pouvez spécifier l'orientation de la mise en page avec l'attribut android:orientation.

Image montrant une mise en page divisée en trois tranches verticales
Figure 1. Une classe LinearLayout avec trois enfants orientés horizontalement.

Tous les enfants d'un élément LinearLayout sont empilés les uns après les autres. Par conséquent, une liste verticale ne comporte qu'un seul enfant par ligne, quelle que soit sa largeur. Une liste horizontale ne comporte qu'une seule ligne de haut et correspond à la hauteur de l'élément enfant le plus grand, plus une marge intérieure. Un LinearLayout respecte les marges entre les enfants, ainsi que la gravité (alignement à droite, au centre ou à gauche) de chaque enfant.

Épaisseur de mise en page

LinearLayout permet également d'attribuer une pondération à des enfants individuels à l'aide de l'attribut android:layout_weight. Cet attribut attribue une valeur d'"importance" à une vue en fonction de l'espace qu'elle occupe à l'écran. Plus la valeur de pondération est élevée, plus elle se développe pour remplir l'espace restant dans la vue parent. Les vues enfants peuvent spécifier une valeur de pondération, et tout espace restant dans le groupe de vues est attribué aux enfants de manière proportionnelle, en fonction de leur pondération déclarée. La valeur de pondération par défaut est de zéro.

Répartition égale

Pour créer une mise en page linéaire dans laquelle chaque enfant utilise le même espace à l'écran, définissez le android:layout_height de chaque vue sur "0dp" pour une mise en page verticale ou l'android:layout_width de chaque vue sur "0dp" pour une mise en page horizontale. Ensuite, définissez le android:layout_weight de chaque vue sur "1".

Répartition inégale

Vous pouvez également créer des mises en page linéaires dans lesquelles les éléments enfants occupent différents espaces à l'écran. Exemples :

  • Supposons que vous ayez trois champs de texte: deux avec une valeur de pondération de 1 et un troisième avec la valeur de pondération par défaut de 0. Le troisième champ de texte, avec une valeur de pondération de 0, n'occupe que la zone requise par son contenu. Les deux autres champs de texte, avec une valeur de pondération de 1, se développent également pour remplir l'espace restant après la mesure du contenu des trois champs.
  • Si, au lieu de cela, vous avez trois champs de texte, dont deux ont une valeur de pondération de 1 et le troisième a une pondération de 2, l'espace restant après le contenu des trois champs est mesuré comme suit: la moitié du champ avec la valeur de pondération de 2 et la moitié divisée de manière égale entre les champs dont la valeur de pondération est 1.

La figure et l'extrait de code suivants montrent comment les pondérations de mise en page peuvent fonctionner dans une activité de type "Envoyer un message". Le champ À, la ligne Objet et le bouton Envoyer n'occupent chacun que la hauteur souhaitée. La zone de message occupe le reste de la hauteur de l'activité.

Image montrant trois EditTexts et un bouton dans une LinearLayout orientée verticalement
Figure 2 : Trois champs de texte et un bouton dans un LinearLayout orienté verticalement.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical" >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/to" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/subject" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:text="@string/send" />
</LinearLayout>

Pour en savoir plus sur les attributs disponibles pour chaque vue enfant d'un LinearLayout, consultez LinearLayout.LayoutParams.