BeginnerLayoutTous les articles

Comment organiser votre écran en tableau avec le GridLayout

Salut à tous, c’est Sébastien !  Aujourd’hui on va parler du GridLayout. Le GridLayout a fait son apparition dans l’API 14 d’Android et il va nous permettre de diviser l’écran en ligne et en colonne. Cette division va nous former des cases, comme si c’était un tableau. A l’intérieur de ces cases, on va pouvoir mettre des éléments, comme des widgets. Alors on n’est pas non plus obligé de mettre un élément dans une case, on peut par exemple la laisser vide ou on peut fusionner plusieurs cases entre elles pour y mettre un plus grand élément. C’est ce que nous allons voir ensemble tout de suite, c’est parti !

 

Création du layout

Alors nous allons créer un nouveau layout, on va l’appeler layout_gridlayout et le Root Tag ce sera GridLayout. Alors pour illustrer ce qu’est un GridLayout, on va s’inspirer de la calculatrice de Windows et on va reproduire son clavier. On va simplement s’intéresser à la partie qui va du « 7 » jusqu’au « = » (voir image ci-dessous).

 

Création du clavier de la calculatrice

On va avoir besoin de créer un GridLayout de quatre lignes et quatre colonnes. Pour créer quatre lignes on va faire : « android:rowCount », avec comme valeur « 4 ». Et pour le nombre de colonnes on va faire « android:columnCount » avec également comme valeur « 4 ».

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="4"
    android:columnCount="4"
    >

Première ligne de la calculatrice

On va tout de suite passer à la création de la première ligne de notre calculatrice. On va s’attaquer aux « 7 », « 8 », « 9 » et « X ». Pour cela, vous allez créer quatre boutons. Pour le premier bouton, on va spécifier qu’il représente le « 7 », donc ça va être la ligne numéro 1 la colonne numéro 1. Pour cela c’est l’attribut « android:layout_column » et comme valeur ça va être le numéro de la colonne. Mais attention en informatique en général quand on compte on commence par 0. Donc ici ça va être la colonne 0. Mais dans la vie de tous les jours ça va correspondre à la colonne numéro 1. Il faut vous habituer parce que en XML c’est comme ça, mais en Java ce sera aussi comme ça.

Vous mettez bien 0 pour la première colonne et vous allez faire pareil pour la première ligne. Vous allez mettre l’attribut « android:layout_row » à 0, pour dire qu’on est sur la première ligne. Et on va mettre comme texte 7 parce que ça représente la touche numéro 7 de notre calculatrice (avec l’attribut « android:text »).

<Button
        android:layout_column="0"
        android:layout_row="0"
        android:text="7"
        />

Vous faites la même chose pour les touches « 8 », « 9 » et « X ».

Pour la touche « 8 », on n’est plus sur la première colonne mais on est sur la deuxième colonne (juste à droite). Comme la première colonne était la colonne numéro 0, la deuxième colonne sera la colonne numéro 1. Pensez également à modifier l’attribut « test ».

Création du reste du clavier de la calculatrice

On va créer le bouton numéro 4. Le bouton numéro 4 est à la ligne d’après, donc la ligne numéro 1, et il est la première colonne donc la colonne numéro 0.

Là vous avez compris le principe, on va faire la mêle chose pour tout le clavier de la calculatrice. Je vous laisse le faire de votre côté 🙂

Voilà, j’ai terminé la calculatrice. Vous remarquerez que j’ai laissé volontairement vide les cases en bas à gauche et en bas à droite vide. On verra plus tard pourquoi.

 

Adapter le clavier à l’écran

Là ce qu’on voudrait c’est que le clavier de la calculatrice prennent tout l’écran. On va utiliser l’attribut weight, qu’on avait déjà un petit peu vu dans la vidéo sur le LinearLayout, et on va dire que tous les boutons doivent prendre la même taille en largeur et en hauteur. Comment on va dire ça ?

On va d’abord dire aux boutons de prendre la même taille en largeur. Pour ça vous allez chercher l’attribut « android:layout_rowWeight » et vous allez passer la valeur à 1. Donc une fois qu’on a défini le poids de la ligne, pour la largeur, on va définir le poids de la colonne avec l’attribut « android:layout_columnWeight » et on va aussi le passé à 1.

Ce qu’on voudrait c’est que tous les poids de tous les boutons soient à 1 pour la ligne et à 1 pour la colonne. Ainsi, si tous les poids sont égaux, ils vont prendre exactement la même place en hauteur et en largeur.

On va valuer ces deux attributs pour tous les boutons ! C’est normal si au niveau de l’interface graphique ça bug un petit peu, c’est parce qu’on a pas défini les poids pour tous les boutons encore, donc Android a un peu de mal à s’y retrouver, mais une fois que ce sera fait il n’y aura plus de soucis.

Alors c’est parti vous faites un copier-coller de ces deux attributs pour tous les boutons.

Voilà ! Une fois que c’est fait, vous voyez que les boutons de la calculatrice ont pris les bonnes dimensions. Ils font tous la même taille en largeur et ils font tous la même taille en hauteur.

 

Les attributs important d’un GridLayout

Si vous voulez laisser une case vide, comme en bas à gauche ou on a un bouton gris avec rien dedans, au lieu de mettre un bouton, on va mettre un « Space ». Une fois le « Space » mit, ça nous fait une case blanche et c’est ce qu’on veut ! L’attribut « android:text » qui était sur le bouton ne sert plus à rien, on peut l’enlever.

<Space
        android:layout_column="0"
        android:layout_row="3"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        />

Pour la dernière case, qui est en bas à droite, on va carrément supprimer le bouton. Vous remarquez que ça fait le même effet que Space, c’est-à-dire que ça a également a laissé une case blanche dans le GridLayout.

On va voir un dernier attribut aujourd’hui qui est « android:layout_columnSpan ». A quoi peut bien servir cet attribut ? Il va servir à fusionner plusieurs cases entre elles. Comme ici on parle de « columnSpan » ça va être plusieurs colonnes, mais il existe également l’attribut « android:layout_rowSpan » qui va permettre de fusionner plusieurs lignes ensemble.

Là ce qu’on voudrait c’est que le bouton « = » prenne la case où il est déjà, mais qu’il s’étende également sur la case de droite. Comme ça, comme c’est la touche la plus importante d’une calculatrice, elle sera plus évidente à voir et elle sera plus facile d’accès. Donc pour ça, sur le bouton « = » on va rajouter l’attribut « android:layout_columnSpan » qui va permettre de fusionner deux colonnes. Là on veut fusionner combien de colonnes entre elles ? On veut fusionner la colonne numéro 3 et la colonne numéro 4 ensemble. Donc on veut fusionner deux colonnes ensemble. On va mettre comme valeur « 2 ». Voilà, on a fusionné deux colonnes ensemble. La touche « = » a prit la place de deux colonnes.

Voici le résultat que vous devriez avoir :

et le code complet du XML :

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    android:rowCount="4">

    <Button
        android:layout_column="0"
        android:layout_columnWeight="1"
        android:layout_row="0"
        android:layout_rowWeight="1"
        android:text="7" />

    <Button
        android:layout_column="1"
        android:layout_columnWeight="1"
        android:layout_row="0"
        android:layout_rowWeight="1"
        android:text="8" />

    <Button
        android:layout_column="2"
        android:layout_columnWeight="1"
        android:layout_row="0"
        android:layout_rowWeight="1"
        android:text="9" />

    <Button
        android:layout_column="3"
        android:layout_columnWeight="1"
        android:layout_row="0"
        android:layout_rowWeight="1"
        android:text="x" />

    <Button
        android:layout_column="0"
        android:layout_columnWeight="1"
        android:layout_row="1"
        android:layout_rowWeight="1"
        android:text="4" />

    <Button
        android:layout_column="1"
        android:layout_columnWeight="1"
        android:layout_row="1"
        android:layout_rowWeight="1"
        android:text="5" />

    <Button
        android:layout_column="2"
        android:layout_columnWeight="1"
        android:layout_row="1"
        android:layout_rowWeight="1"
        android:text="6" />

    <Button
        android:layout_column="3"
        android:layout_columnWeight="1"
        android:layout_row="1"
        android:layout_rowWeight="1"
        android:text="-" />


    <Button
        android:layout_column="0"
        android:layout_columnWeight="1"
        android:layout_row="2"
        android:layout_rowWeight="1"
        android:text="1" />

    <Button
        android:layout_column="1"
        android:layout_columnWeight="1"
        android:layout_row="2"
        android:layout_rowWeight="1"
        android:text="2" />

    <Button
        android:layout_column="2"
        android:layout_columnWeight="1"
        android:layout_row="2"
        android:layout_rowWeight="1"
        android:text="3" />

    <Button
        android:layout_column="3"
        android:layout_columnWeight="1"
        android:layout_row="2"
        android:layout_rowWeight="1"
        android:text="+" />

    <Space
        android:layout_column="0"
        android:layout_columnWeight="1"
        android:layout_row="3"
        android:layout_rowWeight="1" />

    <Button
        android:layout_column="1"
        android:layout_columnWeight="1"
        android:layout_row="3"
        android:layout_rowWeight="1"
        android:text="0" />

    <Button
        android:layout_column="2"
        android:layout_columnSpan="2"
        android:layout_columnWeight="1"
        android:layout_row="3"
        android:layout_rowWeight="1"
        android:text="=" />


</GridLayout>

C’est terminé pour aujourd’hui. Nous avons vu les bases d’un GridLayout. C’est un layout structuré qui permet de faire facilement des tableaux, comme ici le clavier d’une calculatrice ou comme un morpion. Vous l’utiliserez en fonction des applications que vous créerez. Mais rappelez vous que ce n’est pas un layout que vous utiliserez souvent, mais qui sera très pratique dans certains cas. Je vous dis à bientôt pour une prochaine vidéo. Salut à tous !

Une réflexion au sujet de « Comment organiser votre écran en tableau avec le GridLayout »

Laisser un commentaire

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