web-dev-qa-db-fra.com

Comment spécifier la largeur et la hauteur des cellules Android GridLayout en mesures relatives?

J'essaie de comprendre comment GridLayout fonctionne, mais une chose que je ne peux pas comprendre à partir de la documentation est de savoir comment ou si on peut contrôler la taille des cellules de la grille.

Disons que je veux une grille deux par deux où chaque cellule occupe exactement 25% de l'espace de l'écran (mi-hauteur, mi-largeur) - puis-je faire cela?

Avec LinearLayout, j'accomplirais cela en imbriquant deux LinearLayout horizontaux dans une verticale, puis en attribuant un poids de 1 à tous les éléments. Cependant, GridLayout ne prend pas en charge la propriété weight.

androidandroid-layout
39
Nilzor

Il y a deux propriétés Android: layout_columnWeight et layout_rowWeight qui fonctionne comme layout_weight dans LinearLayout. Ceci est pris en charge dans l'API 21. Pour les anciens appareils Android, utilisez GridLayout de la bibliothèque de support v7.

Ces propriétés vous permettront d'ajuster la largeur/hauteur de la base de la colonne sur la valeur que vous avez attribuée à chaque colonne. La formule se présente comme suit (column_weight/sum_of_column_weight) * gridLayout_width = column_width.

Voici un exemple qui est une vue de la grille avec 2 lignes et 2 colonnes uniformément réparties, chacune prend 50% du poids et de la hauteur de la grille.

<GridLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:columnCount="2"
>

    <TextView
        Android:text="SEARCH FEE"
        Android:layout_columnWeight="1"
        Android:layout_rowWeight="1"
     />

    <TextView
        Android:layout_columnWeight="1"
        Android:text="SEARCH FEE"
        Android:layout_rowWeight="1"
     />

    <TextView
        Android:text="SEARCH FEE"
        Android:layout_columnWeight="1"
        Android:layout_rowWeight="1"
        />

    <TextView
        Android:layout_columnWeight="1"
        Android:text="SEARCH FEE"
        Android:layout_rowWeight="1"
        />
</GridLayout>
17
Jack

il semble que le réglage comme vous le souhaitez devrait être assez simple selon la documentation:

Android:rowCount='2'
Android:columnCount='2'

et chez les enfants

Android:layout_columnSpan="1"
Android:layout_rowSpan="1"

Cette référence mentionne également l'étirement:

Pour empêcher une colonne de s'étirer, assurez-vous que l'un des composants de la colonne ne définit pas de gravité.

Ce qui semblerait être une solution pour conserver les lignes et les colonnes dans un rapport 50:50 sans redimensionner en fonction du contenu

11
Matt Taylor

Ce serait quelque chose comme ceci:

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.GridLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:columnCount="2"
    app:rowCount="2">

    <TextView
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:gravity="center"
        Android:text="1"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <TextView
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:gravity="center"
        Android:text="2"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <TextView
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:gravity="center"
        Android:text="3"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <TextView
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:gravity="center"
        Android:text="4"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

</Android.support.v7.widget.GridLayout>
8
cesards

Il existe une méthode d'assistance dans le GridLayout:

GridLayout.LayoutParams params = new GridLayout.LayoutParams();
            params.columnSpec = GridLayout.spec(GridLayout.UNDEFINED, 1, getAlignment(Gravity.NO_GRAVITY, true), 1);
item.setLayoutParams(params);

private GridLayout.Alignment getAlignment(int gravity, boolean horizontal) {
        int mask = horizontal ? HORIZONTAL_GRAVITY_MASK : VERTICAL_GRAVITY_MASK;
        int shift = horizontal ? AXIS_X_SHIFT : AXIS_Y_SHIFT;
        int flags = (gravity & mask) >> shift;
        switch (flags) {
            case (AXIS_SPECIFIED | AXIS_PULL_BEFORE):
                return horizontal ? LEFT : TOP;
            case (AXIS_SPECIFIED | AXIS_PULL_AFTER):
                return horizontal ? RIGHT : BOTTOM;
            case (AXIS_SPECIFIED | AXIS_PULL_BEFORE | AXIS_PULL_AFTER):
                return FILL;
            case AXIS_SPECIFIED:
                return CENTER;
            case (AXIS_SPECIFIED | AXIS_PULL_BEFORE | GravityCompat.RELATIVE_LAYOUT_DIRECTION):
                return START;
            case (AXIS_SPECIFIED | AXIS_PULL_AFTER | GravityCompat.RELATIVE_LAYOUT_DIRECTION):
                return END;
            default:
                return GridLayout.FILL;
        }
    }

Normalement, ce n'est qu'une réflexion de pensée accessible.

Et la version plus petite:

params.columnSpec = GridLayout.spec(GridLayout.UNDEFINED, 1, GridLayout.FILL, 1);
2
H3x0n