Simple mais efficace, le LinearLayout

Posted on Posted in Beginner, Layout, Tous les articles

Salut c’est Sébastien ! Aujourd’hui et dans les prochaines vidéos, nous allons voir les layouts. Les layouts vont vous permettre de mettre en page le design de vos applications et aujourd’hui nous allons parler du LinearLayout.

Le LinearLayout est un layout simple à utiliser, qui va vous permettre de mettre les différents éléments, donc un élément c’est par exemple un texte ou un bouton, les uns à la suite des autres. Soit les uns à la suite des autres sur le côté, donc à chaque fois qu’on met un nouvel élément il va se placer à droite du précédent. Ou alors les uns à la suite des autres verticalement, donc chaque élément va se passer en dessous du précédent.

 

Création d’un layout

Dans votre architecture, vous allez dans ressources->layout et soit vous pouvez modifier directement à l’activity_main pour créer votre layout et pouvoir l’exécuter sur votre téléphone, soit si vous voulez créer un nouveau layout vous faites clic droit sur le dossier des layouts->New->XML->Layout XML File. Vous allez choisir le nom de votre layout. Vous mettez ce que vous voulez. Moi je mets « layout_linearlayout » étant donné qu’on va parler des LinearLayout. Et pour le noeud principal (Root Tag) c’est LinearLayout. Ça veut dire que les balises qui vont encadrer notre code XML vont être de type LinearLayout. Vous faites finish et là on voit bien que Android studio nous a créé un fichier XML avec comme noeud principal LinearLayout.

Le LinearLayout a deux attributs : la largeur et la hauteur.  On voit que ces deux attributs sont à « match_parent ». Etant donné que le parent du LinearLayout c’est l’écran, le LinearLayout va prendre tout l’écran.

 

Ajout des widgets dans le LinearLayout

Nous allons créer trois boutons, avec comme attributs en largeur et hauteur « wrap_content ». On va lui ajouter du texte. Vous faites android:text et vous mettez le texte que vous voulez. Ici on va mettre « bouton 1 » parce que c’est le bouton numéro 1.

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bouton 1"
        />

Vous répétez l’opération encore deux fois pour le bouton 2 de et bouton 3.

Vous voyez sur la Preview à droite que le LinearLayout a placé automatiquement les boutons les uns à la suite des autres de façon horizontale, car par défaut le LinearLayout ajoutes les éléments les uns à la suite des autres horizontalement.

L’attribut orientation

Pour pouvoir changer cette propriété vous allez pouvoir modifier un attribut du LinearLayout qui s’appelle android:orientation. Donc là il est en horizontal mais si on le passe en vertical, on voit que les boutons sont passés les uns à la suite des autres verticalement.

android:orientation="vertical"

On peut changer la largeur de notre bouton. On va changer la largeur du bouton 1. Si par exemple on passe la width à « match_parent », cela signifie qu’il va prendre toute la place qui est disponible en largeur dans le LinearLayout. Comme on sait que la largeur du LinearLayout c’est tout l’écran, notre bouton va prendre tout l’écran en largeur.

L’attribut layout_gravity

Un attribut important : layout_gravity. Vous allez mettre android:layout_gravity, qui va permettre de placer votre bouton à l’intérieur du LinearLayout. Donc là vous voyez que le bouton 2 est à gauche, et on peut changer ça grâce au layout_gravity. Si, par exemple, on met comme valeur « right », ça va passer notre bouton à droite à l’intérieur du LinearLayout. Il y a d’autres valeurs, par exemple, « center ». Ça va centrer le bouton à l’intérieur du LinearLayout.

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bouton 2"
        android:layout_gravity="center"
        />
L’attribut gravity

Un autre attribut important, et cette fois-ci pas layout_gravity mais gravity tout court. Vous tapez android:gravity. Là ça ne va pas permettre de placer le widget à l’intérieur du LinearLayout, mais ça va permettre de placer le contenu du widget à l’intérieur de ce widget. Donc là si par exemple sur le bouton 1 je mets comme gravity droite (« right »), ça va placer le contenu du bouton à droite. Ici le contenu c’est du texte, donc le texte est placé à droite. Alors il faut bien comprendre la différence entre layout_gravity, qui va placer le widget à l’intérieur du layout, et gravity qui va placer le contenu du widget à l’intérieur de ce widget.

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Bouton 1"
        android:gravity="right"
        />
L’attribut weight

Le dernier attribut que nous allons voir aujourd’hui est l’attribut layout_weight. En français ça signifie « poids » et ça va représenter l’espace que l’élément d’un LinearLayout peut prendre à l’intérieur de celui-ci. Par défault, layout_weight est à 0 pour tout le monde. Si par exemple je passe layout_weight à 2 pour le bouton 1, on voit qu’il va prendre le maximum de place dans le LinearLayout, parce que lui il est à 2 mais les deux autres boutons sont à 0. 0 signifie que les boutons vont prendre le moins de place possible. Si par exemple je passe également weight à 2 pour le deuxième bouton, qu’est-ce qu’il se passe ? Ici le bouton 3 a un poids de 0, donc il prend le moins de place possible, et le bouton 1 et le bouton 2 ont exactement le même poids. Donc ils vont prendre la même place. C’est ce qu’on voit ici, au niveau de la hauteur ils prennent exactement la même place sur l’écran.

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Bouton 1"
        android:gravity="right"
        android:layout_weight="2"
        />

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bouton 2"
        android:layout_gravity="center"
        android:layout_weight="2"
        />

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bouton 3"
        />

Voilà ! Alors aujourd’hui nous avons vu les bases du LinearLayout. Nous avons vu les attributs important pour pouvoir l’utiliser, à savoir android:orientation pour le LinearLayout, android:layout_weight et android:layout_gravity qui vont permettre de placer les éléments comme il faut à l’intérieur de LinearLayout. Sans oublier l’attribut android:gravity pour placer le contenu d’un widget à l’intérieur de ce widget. Dans la prochaine vidéo / le prochain article, nous allons parler de RelativeLayout, qui est un layout beaucoup plus puissant. Vous allez pouvoir faire beaucoup plus de choses au niveau des placements de vos widgets. Salut !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *