Le Tutoriel de Android LinearLayout

Android LinearLayout
android:layout_weight
android:layout_gravity
android:padding
LinearLayout spacing

1. Android LinearLayout

LinearLayout est un ViewGroup qui organise les View enfant dans une seule direction, verticalement ou horizontalement. Vous pouvez spécifier son orientation en utilisant l'attribut: android:orientation.

<!-- Horizontal LinearLayout (Default) -->
<LinearLayout
    ...
    android:orientation="horizontal">

   ...
</LinearLayout>


<!-- Vertical LinearLayout -->
<LinearLayout
    ...
    android:orientation="vertical">

   ...
</LinearLayout>

Par exemple: Utilisation de code Java pour créer LinearLayout et ajouter des View enfant à LinearLayout:

// linearLayout = new LinearLayout(MainActivity.this);
// linearLayout.setOrientation(LinearLayout.HORIZONTAL);

LinearLayout.LayoutParams layoutParams
        = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
        LinearLayout.LayoutParams.WRAP_CONTENT, 0);

Button button1 = new Button(this);
button1.setText("Button");
linearLayout.addView(button1, layoutParams);

Button button2 = new Button(this);
button2.setText("Long Button");
button2.setLayoutParams(layoutParams);
linearLayout.addView(button2);

2. android:layout_weight

android: layout_weight est un attribut important utilisé pour les View enfant de LinearLayout, il spécifie combien d'espace de View enfant occupera dans la View parent (LinearLayout) (horizontalement ou verticalement). Une valeur layout_weight supérieure à zéro permet à View enfant de se développer pour remplir tout espace restant dans View parent. Les View enfant peuvent se voir attribuer une valeur layout_weight> 0, puis tout espace restant dans View parent sera affecté aux View enfant en fonction de leur ratio layout_weight.

Lorsque toutes les View enfants ont android: layout_weight = 0, vous verrez un espace vide dans View parent (LinearLayout):

View enfant a android: layout_weight> 0 occupera l'espace libre de View parent (LinearLayout):

L'espace libre de la View parent (LinearLayout) sera alloué à View enfant en fonction de leur ratio layout_weight.

L'attribut android: layout_weight a la même signification dans un LinearLayout vertical:

3. android:layout_gravity

L'attribut android: layout_gravity est appliqué à View enfant pour spécifier la position relative de View enfant dans View parent (LinearLayout).

Constant in Java	Value	Description
Gravity.LEFT	left
Gravity.CENTER_HORIZONTAL	center_horizontal
Gravity.RIGHT	right
~~Gravity.CLIP_HORIZONTAL~~	~~clip_horizontal~~
~~Gravity.FILL_HORIZONTAL~~	~~fill_horizontal~~

Gravity.TOP	top
Gravity.CENTER_VERTICAL	center_vertical
Gravity.BOTTOM	bottom
~~Gravity.CLIP_VERTICAL~~	~~clip_vertical~~
~~Gravity.FILL_VERTICAL~~	~~fill_vertical~~

Gravity.START	start
Gravity.END	end
Gravity.CENTER	center
~~Gravity.FILL~~	~~fill~~

4. android:padding

Padding est l'espace dans LinearLayout (à l'intérieur de la bordure) et entoure 4 côtés du contenu.

Vous pouvez définir un padding pour LinearLayout via les propriétés suivantes:

android:padding
android:paddingTop
android:paddingRight
android:paddingBottom
android:paddingLeft

<LinearLayout
    ...
    android:orientation="horizontal"
    android:paddingTop="20dp"
    android:paddingRight="30dp"
    android:paddingBottom="10dp"
    android:paddingLeft="20dp">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Button" />

</LinearLayout>

5. LinearLayout spacing

Parfois, lorsque vous souhaitez définir l'espace entre les View enfant de LinearLayout, vous pouvez procéder de plusieurs manières:

android:layout_margin

L'application de la propriété android: layout_margin à toutes les View enfants de LinearLayout aidera à définir la distance entre elles.

* layout_margin (Java code) *

// linearLayout = new LinearLayout(MainActivity.this);
// linearLayout.setOrientation(LinearLayout.HORIZONTAL);

LinearLayout.LayoutParams layoutParams
        = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                          LinearLayout.LayoutParams.WRAP_CONTENT, 0);
layoutParams.setMargins(30, 20, 30, 0);

Button button1 = new Button(this);
button1.setText("Button");
linearLayout.addView(button1, layoutParams);

Button button2 = new Button(this);
button2.setText("Long Button");
button2.setLayoutParams(layoutParams);
linearLayout.addView(button2);

Space View

Android 4.0+ (API Level 14+) prend en charge un nouveau type de View appelé Space, qui vous aide à ajouter un espace libre à l'interface. Vous pouvez utiliser Space pour séparer les View enfant dans LinearLayout.

<LinearLayout
    ...
    android:layout_width="0dp"
    android:layout_height="200dp"
    android:background="#EFF6E7"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Button" />

    <Space
        android:layout_width="10dp"
        android:layout_height="wrap_content"
        android:layout_weight="0" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Long Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Button" />
</LinearLayout>

* Add Space (Java code) *

// linearLayout = new LinearLayout(MainActivity.this);
// linearLayout.setOrientation(LinearLayout.HORIZONTAL);

LinearLayout.LayoutParams layoutParams
        = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
        LinearLayout.LayoutParams.WRAP_CONTENT, 0);

LinearLayout.LayoutParams layoutParams2
        = new LinearLayout.LayoutParams(15,
        LinearLayout.LayoutParams.WRAP_CONTENT, 0);

Button button1 = new Button(this);
button1.setText("Button");
linearLayout.addView(button1, layoutParams);

// Create a Space View.
Space space = new Space(this);
space.setLayoutParams(layoutParams2);
linearLayout.addView(space);

Button button2 = new Button(this);
button2.setText("Long Button");
button2.setLayoutParams(layoutParams);
linearLayout.addView(button2);

android:divider

Android 3.0+ (API Level 11+) vous permet d'ajouter un Divider (Diviseur) entre deux View enfant dans LinearLayout, vous pouvez même spécifier le style et la couleur du Divider.

* Divider *

<LinearLayout
    ...
    android:orientation="horizontal">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Button" />
  
     <!-- Divider -->
    <View
        android:id="@+id/divider"
        android:layout_width="15dp"
        android:layout_height="match_parent"
        android:layout_weight="0"
        android:background="?android:attr/listDivider" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Long Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Button" />
</LinearLayout>

* Add Divider (Java code) *

// linearLayout = new LinearLayout(MainActivity.this);
// linearLayout.setOrientation(LinearLayout.HORIZONTAL);

LinearLayout.LayoutParams layoutParams
        = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
        LinearLayout.LayoutParams.WRAP_CONTENT, 0);

LinearLayout.LayoutParams layoutParams2
        = new LinearLayout.LayoutParams(15,
        LinearLayout.LayoutParams.MATCH_PARENT, 0);

Button button1 = new Button(this);
button1.setText("Button");
linearLayout.addView(button1, layoutParams);

// Create a Divider.
View divider = new View(this);
// android:background="?android:attr/listDivider"
divider.setBackgroundResource(android.R.drawable.divider_horizontal_bright);
linearLayout.addView(divider, layoutParams2);

Button button2 = new Button(this);
button2.setText("Long Button");
button2.setLayoutParams(layoutParams);
linearLayout.addView(button2);

Voir l'article plus détaillé sur Divider, il vous aide à personnaliser Divider en fonction de votre application:
Le Tutoriel de Android Divider

Tutoriels de programmation Android

Tutoriels de programmation Flutter

Le Tutoriel de Android LinearLayout

1. Android LinearLayout

2. android:layout_weight

3. android:layout_gravity

4. android:padding

5. LinearLayout spacing

Tutoriels de programmation Android

Tutoriels de programmation Android

Articles les plus récents