Le GridLayout en kotlin

Posted onAuthorErwan MachefauxLaisser un commentaire

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

image

Code XML
<?xml version="1.0" encoding="utf-8"?>
<GridLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="3"
        android:id="@+id/GridLayout"
        tools:context=".MainActivity">

</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.

grilleLayout apercut

Code XML
<?xml version="1.0" encoding="utf-8"?>
<GridLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto" 
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="3"
        android:id="@+id/GridLayout"
        tools:context=".MainActivity">


    <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_columnWeight="2"
            android:layout_rowWeight="2"
            android:clickable="true"
            app:srcCompat="@drawable/albania"
            android:id="@+id/Albania"/>
    <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"

            android:layout_columnWeight="2"
            android:layout_rowWeight="2"
            android:clickable="true"
            app:srcCompat="@drawable/northern_ireland"
            android:id="@+id/Norther_Ireland"/>
    

</GridLayout>

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.

gridLayout_screenshot02

Code XML
<?xml version="1.0" encoding="utf-8"?>
<GridLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="3"
        android:id="@+id/GridLayout"
        tools:context=".MainActivity">
    
    <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="2"
            android:layout_rowWeight="2"
            android:clickable="true"
            app:srcCompat="@drawable/germany"
            android:id="@+id/Germany"/>
    <Space
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="2"
            android:layout_rowWeight="2"/>
    <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="2"
            android:layout_rowWeight="2"
            android:clickable="true"
            app:srcCompat="@drawable/hungary"
            android:id="@+id/Hungary"/>
    
</GridLayout>

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

gridLayout_screenshot03

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.

Code XML
<?xml version="1.0" encoding="utf-8"?>
<GridLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="3"
        android:id="@+id/GridLayout"
        tools:context=".MainActivity">

       <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="2"
            android:layout_rowWeight="2"
            android:clickable="true"
            app:srcCompat="@drawable/germany"
            android:id="@+id/Germany"/>
    
    <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowSpan="2"
            android:layout_columnSpan="2"
            android:layout_columnWeight="2"
            android:layout_rowWeight="2"
            android:clickable="true"
            app:srcCompat="@drawable/hungary"
            android:id="@+id/Hungary"/>
    <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="2"
            android:layout_rowWeight="2"
            android:clickable="true"
            app:srcCompat="@drawable/belgium"
            android:id="@+id/Belgium"/>

</GridLayout>

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

cube_en_bois

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.

Code
var poland : ImageView = ImageView(this)
poland.setImageResource(R.drawable.poland)
myGridLayout.addView(poland)

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.

Partager l'article :
  •  
  •  
  •  
  •  
  • 6
    Partages

Laisser un commentaire

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