devstory

Le Tutoriel de Android LinearLayout

View more Tutorials:

Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles. Facebook

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:
  • TODO Link?

View more Tutorials: