Tous les articles

Théorie – Le LinearLayout

 

Dans cet article, on va parler théorie, on va parler LinearLayout.

 

L’objectif de cet article est de te parler du LinearLayout. Comme tu le sais peut-être déjà, le LinearLayout c’est simplement un layout. On va être côté XML plutôt que côté Java. C’est un layout qui va nous permettre d’agencer d’une façon ou d’une autre nos différents éléments sur notre écran. Le LinearLayout comme son nom l’indique, ça va être tout simplement un layout qui va te permettre d’afficher tes éléments de façon linéaire.

 

Qu’est-ce que ça signifie ?

Ça signifie tout simplement que tu vas pouvoir aligner tes éléments soit de haut bas, soit de la gauche à droite.

Si on commence avec le premier LinearLayout que nous avons sur l’image ci-dessus, comme tu peux le voir, on peut en fait définir un LinearLayout soit de façon verticale, soit de façon horizontale. Si tu choisis de définir ton LinearLayout de façon verticale, tu vas positionner tes éléments les uns à la suite des autres, du haut vers le bas. C’est aussi simple que ça. Pourquoi tu vas avoir besoin d’utiliser un LinearLayout vertical ? Tout simplement si tu veux, par exemple, aligner des boutons au sein de ton application, sur la page menu de ton jeu.

Si tu veux aligner des boutons, ne te pose même pas la question, tu prends un LinearLayout vertical et tu alignes des boutons. Pour définir un LinearLayout vertical, tu auras juste à choisir l’orientation quand tu définies ton LinearLayout. Tu as un attribut qui s’appelle “android:orientation” et tu lui mets la valeur “vertical”.

Ensuite, tu as le LinearLayout horizontal. Là il s’agit de placer tes éléments de la gauche vers la droite. Typiquement si tu veux placer des boutons les uns à la suite des autres de la gauche vers la droite, tu vas utiliser un LinearLayout horizontal. Que ce soit des boutons, que ce soit des TextViews, que ce soit tout type de widget, tu pourras les placer soit de haut en bas, soit de la gauche vers la droite.

Autre exemple beaucoup plus puissant que les deux premiers que nous venons de voir, c’est que tu peux combiner les deux. Tu peux combiner un LinearLayout vertical et un LinearLayout horizontal. Si tu veux avoir un rendu sur ton application qui soit un peu plus enrichi, tu vas pouvoir, par exemple, imbriquer plusieurs LinearLayout entre eux et te retrouver avec une interface comme sur l’image ci-dessus (l’écran tout à droite). Sur cette image, on a un LinearLayout vertical et 3 LinearLayout horizontal.

C’est un concept que tu pourras utiliser toi aussi au sein de ton application, c’est quelque chose de très simple à mettre en place. Il faut juste que, au moment où tu vas créer ton interface graphique, tu ais vraiment en tête quel layout tu vas utiliser et comment tu vas imbriquer tes différents layouts pour obtenir le résultat que tu souhaites.

 

Sur l’image ci-dessus, je t’ai mis des exemples des différentes applications que nous avons développées. Je te fais quelques copies d’écran, qui représentent des LinearLayout. Pour toutes ses copies d’écran, lorsque nous avons fait le design, nous avons utilisé des LinearLayout.

Commençons par la première copie d’écran. Ici, nous avons un menu d’application. Il y a simplement quatre boutons qui sont imbriqués avec un LinearLayout vertical et absolument rien d’autre. Donc pour créer une interface de jeu ou un menu tout simple, tu peux utiliser uniquement un LinearLayout vertical. Ici nous avons quatre boutons, avec du texte à l’intérieur de chaque bouton, et un LinearLayout vertical auquel nous avons attribuer des poids. Ce qui est génial avec le LinearLayout, c’est que tu peux définir des poids. C’est-à-dire que si nous avions voulu que notre bouton JOUER ne prenne pas un quart de l’écran comme tous les autres boutons, nous aurions pu dire que le bouton JOUER prenne la moitié de l’écran et que les trois autres boutons se partagent le reste de l’écran. Ça c’est vraiment génial, parce que tu vas pouvoir définir la taille que va prendre ton bouton par rapport aux autres éléments que contient ton LinearLayout. Ce qui veut dire, que pour un téléphone, les quatre boutons vont prendre exactement la même hauteur et que sur une tablette les boutons prendront aussi exactement la même hauteur par rapport à la hauteur de la tablette. Ça veut dire que tu n’auras pas besoin d’adapter la taille de tes boutons à la taille du téléphone ou de la tablette si tu utilises des poids.

Par contre attention, pour la taille des images qui sont sur la gauche, il va falloir les adapter en fonction de si tu utilises un smartphone ou une tablette. Ça c’est un autre sujet. Quoi qu’il en soit, pour ajouter une image tu utilises simplement un attribut qui s’appelle “drawableLeft”, qui te permet tout simplement d’ajouter une image à ton bouton.

Passons à la seconde copie d’écran, qui est également un menu d’application, qui représente différents thèmes que l’utilisateur peut utiliser. Ici nous avons également un LinearLayout vertical couplé à trois LinearLayout horizontal. On aurait aussi très bien pu faire trois LinearLayout verticales couplés à un LinearLayout horizontal. Ça c’est à ta discrétion, ça revient exactement au même. Quoi qu’il en soit, ici on a une imbrication de plusieurs LinearLayout pour arriver à ce résultat.

Enfin, dernière copie d’écran, un peu différente des autres. Sache que c’est également fait avec un LinearLayout. Évidemment on en a plusieurs. Mais tu peux arriver à un résultat comme sur cette dernière copie d’écran, en utilisant simplement des LinearLayout. Donc tu vas voir un LinearLayout vertical où tu vas avoir du texte ainsi que des LinearLayout horizontal imbriqués.

 

Une fois que tu seras un peu plus à l’aise avec l’utilisation des différents LinearLayout, sache que tu vas pouvoir réaliser des interfaces qui sont beaucoup plus jolies et beaucoup plus puissantes que ce que tu peux faire avec un simple LinearLayout.

 

Je te dis à la prochaine, salut !

 

Laisser un commentaire

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