Comprendre le LinearLayout sous Android

Ce tutoriel va vous permettre de tout comprendre sur le LinearLayout et vous facilitera la création de vos vues en utilisant ce Layout.

LinearLayout

Le LinearLayout est un Layout qui repose sur une idée de boite, c’est-à-dire que les conteneurs ou les widgets appartenant à ce Layout sont soit alignés en ligne horizontale ou verticale.

Comment configurer mon LinearLayout

Plusieurs éléments sont disponibles pour permettre aux développeurs de personnaliser ce Layout.

1. Orientation du Layout

C’est la première chose que vous précisez quand vous créez votre LinearLayout(android:orientation). Cette option spécifie la façon dont seront alignés les éléments contenus dans ce Layout.
Deux options sont disponibles :

• Verticale : Oriente les éléments sur une ligne verticale.
• Horizontale : Oriente les éléments sur une ligne horizontale.

2. Taille des éléments

Le LinearLayout ainsi que tous les widgets qui le composent doivent fournir une taille (hauteur et largeur). Donc ils doivent définir les deux propriétés suivantes :

• android:layout_width
• android:layout_height

Ces deux propriétés peuvent prendre 3 types de valeur :

• Une taille fixe : par exemple 50px (pixels). Donc quelque soit la taille de l’écran, l’élément occupera exactement 50px.
• fill_parent : Dans ce cas on demande au composant d’occuper tout l’espace disponible chez son conteneur parent (après le placement des autres widgets).
• wrap_content : Pour demander au Widget d’occuper une taille naturelle (la taille de son contenu pour le texte par exemple). S’il est trop gros par rapport à la taille disponible. Android s’occupera par exemple de couper le texte s’il n’y a plus de place.

3. Gravité des éléments

Dans un LinearLayout les éléments sont alignés de gauche à droite et de haut en bas. Donc la question qui se pose est comment faire si l’on veut placer notre élément tout en bas ou a droite. La réponse se trouve dans la gravité (android:layout_gravity).
Les gravités les plus couramment utilisées sont left, center_horizontal, top, bottom,right, pour respectivement aligner les éléments à gauche, au centre, en haut, en bas et à droite.
On peut aussi utiliser center_vertical pour centrer verticalement l’élément.
Voici un petit exemple :

• Alignement à gauche

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  > <Button  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="Button 1"  android:layout_gravity="left"  /> </LinearLayout>

Voici le résultat :

• center

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  > <Button  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="Button 1"  android:layout_gravity="center_horizontal"  /> </LinearLayout>

et voici le résultat

Voila, vous pouvez faire la même chose pour le reste

4. Poids des éléments

Vous vous demandez sûrement ce que l’on veut dire par le poids d’un élément. Prenons un exemple, imaginez que vous avez 2 boutons en colonne et que vous voulez que chacun occupe tout l’espace disponible.
Si on leur affecte la même valeur au poids (android:layout_weight), l’espace libre sera partagé équitablement entre les deux. Si l’on met une valeur 1 au premier et 2 au second, le deuxième prendra deux fois plus d’espace libre que le premier (Par défaut la valeur du poids est de 0).
Vous pouvez aussi utiliser des pourcentages, mais dans ce cas assurez vous bien que la somme des pourcentages ne dépasse pas 100%.
On va faire un petit exemple pour expliquer

• Cas du poids avec des mêmes valeurs

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  > <Button  android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:text="Button 1"  android:layout_weight="1"  />  <Button  android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:text="Button 2"  android:layout_weight="1"  /> </LinearLayout>

et voila le résultat

• Cas de poids différents

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  > <Button  android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:text="Button 1"  android:layout_weight="2"  />  <Button  android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:text="Button 2"  android:layout_weight="1"  /> </LinearLayout>

et voici le résultat

Vous avez bien vu la différence lorsque l’ on met des poids égaux avec le cas des poids différents

5. Espacement

Les différents éléments que vous créez sont par défaut serrés les uns contre les autres. Vous pouvez augmenter l’espacement à l’aide de la propriété android:padding (padding top, left, right et bottom).
La valeur précise l’espace situé entre le contour de l’élément et son contenu réel. Par exemple pour un bouton c’est l’espacement entre le contour du bouton et son texte.

Voici un petit exemple :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  > <Button  android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:text="Button 1"  />  <Button  android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:text="Button 2"  android:paddingTop="20px"  /> </LinearLayout>

et voici le résultat :

Vous remarquez bien que sur le “bouton 2” un petit espacement se trouve entre le titre du bouton et le bord supérieur de ce dernier. Cet espacement est obtenu grâce à la ligne  android:paddingTop= »20px ».

Maintenant nous allons voir qu’elle est la différente entre padding et margin. Reprenons notre exemple et on va remplacer le paddingTop par un marginTop(android:layout_marginTop= »20px ») et observer le résultat :

On remarquera que finalement le padding est un espacement interne à l’élément alors que le margin est un espacement externe à l’élément.

Conclusion

Voila cet article se termine ici, en espérant que vous avez tout compris sur leLinearLayout. D’autres articles vont arriver afin d’aborder les autres Layout. En attendant, n’hésitez pas à me contacter ou commenter cet article.