Bonjour à tous ! Aujourd’hui je vais vous présenter la notion GridLayout en Kotlin. Dans cet article je vais vous expliquer ce que c’est un Gridlayout, puis je vais vous expliquer comment le mettre en place et quelles sont ces particularités.
J’ai également réalisé cet article au format vidéo, ce format me permet de tester de nouvelles choses et de vous proposer un plus large choix de contenu.
Qu’est-ce qu’un GridLayout ?
- C’est un format de layout pour faciliter la création de table ou de tableau le nombre d’éléments est fixe. Il n’est utilisé que dans certains cas.
- Le nombre de colonnes et de lignes peut t’être défini en paramètres dans le fichier XML.
- Les éléments qu’il contient peut-être de différentes sortes (TextView, ImageView, Button, etc…).
- Les cases peuvent être vides ou fusionner entre elles.
- Il ne faut pas confondre GridView avec GridLayout.
GridView est utilisé si vous avez un même élément qui se répète et que vous ne connaissez pas le nombre d’éléments pouvant être présents.
Dans GridLayout le nombre d’éléments total est fixe dans la majorité des cas. Je vous présenterai une petite astuce en fin d’article pour ajouter dynamiquement des éléments dans un gridLayout.
Mise en place d’un gridLayout
Les balises intéressantes pour paramétrer un gridLayout sont :
La balise “ColumnCount” qui permet de définir le nombres maximun de colonnes.
La balise “RowCount” qui permet de définir le nombres maximun de lignes.
À noter qu’il n’est pas nécessaire de les définir, on peut très bien avoir l’un des deux. Avec une orientation verticale ou horizontale le GridLayout se chargera de bien disposer les éléments dans la grille.
Ajout de cellules dans GridLayout
Un GridLayout se compose d’un ensemble d’éléments qui prend la place sur un certain nombre de cellules. Par défaut un composant prend la place d’une seule cellule.
Les balises qui sont intéressantes pour une cellule sont :
La balise Layout_columnWeight qui permet de définir le poids que va prendre la cellule par rapport aux autres cellules en fonction de la colonne ou de sa largeur.
La balise Layout_rowWeightqui définit également le poids que va prendre la cellule mais cette fois-ci, elle se base sur la hauteur de la cellule vis-à-vis de sa ligne.
Les balises Layout_row et Layout_column vont définir l’emplacement ou la position de la cellule. Layout_row précise le numéro de la ligne et Layout_column le numéro de la colonne. Dans notre exemple les deux balises sont définies à 0, ce qui place l’élément en première position. C’est balise ne sont pas nécessaire si vous n’avez pas d’importance dans le placement de vos composants.
Espace à l’intérieur de la grille
Votre grille n’est pas obliger un élément, vous pouvez décider d’y mettre un espace pour que votre grille soit plus harmonieuse, qu’elle respire un peu.
Pour mettre en place un espace rien de plus simple, il suffit d’appeler la balise “Space” de configurer son poids ou ces dimensions et le tour est joués.
Fusion de cellules
Comme je l’ai dit dans le cœur de l’article, un élément peut s’étendre sur plusieurs cellules. Il est possible de fusionner plusieurs cellules entre elles. Ces cellules vont fusionner pour former qu’une seule et même cellule et ainsi casser l’aspect symétrique de la grille.
La fusion de cellule peut se faire en colonne (fusion droite/gauche ou gauche/droite) en paramétrant la balise ColumnSpan avec le nombre de colonnes avec lesquelles on souhaite fusionner. La fusion peut également se faire en ligne (fusion de haut/bas ou bas/haut ) avec la balise RowSpan.
Pour aller plus loin
Il est possible d’ajouter de façon dynamique les éléments dans la grille en passant par le code. J’ai essayé de le faire mais je n’ai pas trouvé de solution simple pour adapter mes composants aux bonnes dimensions.
Cependant je pense avoir une piste avec un recycleView. Je pense que ça fera le sujet d’un prochain article.
Merci d’avoir lu ! Maintenant, si vous avez aimé le contenu de l’article, si vous connaissez une personne à qui cet article peut intéresser, n’hésitez pas à le liker et à le partager sur les réseaux sociaux. Si vous souhaitez me faire part de vos remarques, de vos problèmes, de vos suggestions de prochain article ou tout simplement de votre soutien n’hésitez pas à m’en faire part dans les commentaires, je vous en remercie.
- 6Partages