web-dev-qa-db-fra.com

GridLayout et Row / Column Span Woe

Le article de blog des développeurs Android présentant GridLayout montre ce diagramme illustrant l'impact des étendues sur l'allocation automatique d'index:

automatic index allocation

J'essaie de réellement implémenter cela en utilisant un GridLayout. Voici ce que j'ai jusqu'à présent:

<Android.support.v7.widget.GridLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res/com.commonsware.Android.gridlayout"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent"
    app:orientation="horizontal"
    app:columnCount="8">

    <Button
        app:layout_columnSpan="2"
        app:layout_rowSpan="2"
        Android:layout_gravity="fill_horizontal"
        Android:text="@string/string_1"/>

  <Button
    app:layout_columnSpan="2"
    Android:layout_gravity="fill_horizontal"
    Android:text="@string/string_2"/>

  <Button
    app:layout_rowSpan="4"
    Android:text="@string/string_3"/>

  <Button
    app:layout_columnSpan="3"
    app:layout_rowSpan="2"
    Android:layout_gravity="fill_horizontal"
    Android:text="@string/string_4"/>

  <Button
    app:layout_columnSpan="3"
    Android:layout_gravity="fill_horizontal"
    Android:text="@string/string_5"/>

  <Button
    app:layout_columnSpan="2"
    Android:layout_gravity="fill_horizontal"
    Android:text="@string/string_6"/>

  <Android.support.v7.widget.Space
    app:layout_column="0"
    Android:layout_width="36dp"
    />

  <Android.support.v7.widget.Space
    Android:layout_width="36dp"
    />

  <Android.support.v7.widget.Space
    Android:layout_width="36dp"
    />

  <Android.support.v7.widget.Space
    Android:layout_width="36dp"
    />

  <Android.support.v7.widget.Space
    Android:layout_width="36dp"
    />

  <Android.support.v7.widget.Space
    Android:layout_width="36dp"
    />

  <Android.support.v7.widget.Space
    Android:layout_width="36dp"
    />

  <Android.support.v7.widget.Space
    Android:layout_width="36dp"
    />

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

J'ai dû introduire les éléments <Space> pour que chaque colonne ait une largeur minimale, sinon, j'aurais un tas de colonnes de largeur nulle.

Cependant, même avec eux, je reçois ceci:

sample GridLayout

Notamment:

  • Malgré Android:layout_gravity="fill_horizontal", mes widgets avec une étendue de colonne ne remplissent pas les colonnes étalées

  • Malgré les valeurs Android:layout_rowSpan, rien ne s'étend sur les lignes

Quelqu'un peut-il reproduire le diagramme de l'article de blog en utilisant un GridLayout?

Merci!

androidandroid-gridlayout
117
CommonsWare

Je me sens assez malin, mais j’ai réussi à obtenir l’aspect correct en ajoutant une colonne et une rangée supplémentaires au-delà de ce qui était nécessaire. Ensuite, j'ai rempli la colonne supplémentaire avec un espace dans chaque ligne définissant une hauteur et la ligne supplémentaire avec un espace dans chaque colonne définissant une largeur. Pour plus de flexibilité, j'imagine que ces tailles d'espace pourraient être définies dans le code pour fournir quelque chose de similaire aux poids. J'ai essayé d'ajouter une capture d'écran, mais je n'ai pas la réputation nécessaire.

<GridLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="fill_parent"
Android:layout_height="fill_parent"
Android:columnCount="9"
Android:orientation="horizontal"
Android:rowCount="8" >

<Button
    Android:layout_columnSpan="2"
    Android:layout_gravity="fill"
    Android:layout_rowSpan="2"
    Android:text="1" />

<Button
    Android:layout_columnSpan="2"
    Android:layout_gravity="fill_horizontal"
    Android:text="2" />

<Button
    Android:layout_gravity="fill_vertical"
    Android:layout_rowSpan="4"
    Android:text="3" />

<Button
    Android:layout_columnSpan="3"
    Android:layout_gravity="fill"
    Android:layout_rowSpan="2"
    Android:text="4" />

<Button
    Android:layout_columnSpan="3"
    Android:layout_gravity="fill_horizontal"
    Android:text="5" />

<Button
    Android:layout_columnSpan="2"
    Android:layout_gravity="fill_horizontal"
    Android:text="6" />

<Space
    Android:layout_width="36dp"
    Android:layout_column="0"
    Android:layout_row="7" />

<Space
    Android:layout_width="36dp"
    Android:layout_column="1"
    Android:layout_row="7" />

<Space
    Android:layout_width="36dp"
    Android:layout_column="2"
    Android:layout_row="7" />

<Space
    Android:layout_width="36dp"
    Android:layout_column="3"
    Android:layout_row="7" />

<Space
    Android:layout_width="36dp"
    Android:layout_column="4"
    Android:layout_row="7" />

<Space
    Android:layout_width="36dp"
    Android:layout_column="5"
    Android:layout_row="7" />

<Space
    Android:layout_width="36dp"
    Android:layout_column="6"
    Android:layout_row="7" />

<Space
    Android:layout_width="36dp"
    Android:layout_column="7"
    Android:layout_row="7" />

<Space
    Android:layout_height="36dp"
    Android:layout_column="8"
    Android:layout_row="0" />

<Space
    Android:layout_height="36dp"
    Android:layout_column="8"
    Android:layout_row="1" />

<Space
    Android:layout_height="36dp"
    Android:layout_column="8"
    Android:layout_row="2" />

<Space
    Android:layout_height="36dp"
    Android:layout_column="8"
    Android:layout_row="3" />

<Space
    Android:layout_height="36dp"
    Android:layout_column="8"
    Android:layout_row="4" />

<Space
    Android:layout_height="36dp"
    Android:layout_column="8"
    Android:layout_row="5" />

<Space
    Android:layout_height="36dp"
    Android:layout_column="8"
    Android:layout_row="6" />

</GridLayout>

screenshot

73
kturney
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent" >

    <GridLayout
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_centerInParent="true"
        Android:columnCount="8"
        Android:rowCount="7" >

        <TextView
            Android:layout_width="50dip"
            Android:layout_height="50dip"
            Android:layout_columnSpan="2"
            Android:layout_rowSpan="2"
            Android:background="#a30000"
            Android:gravity="center"
            Android:text="1"
            Android:textColor="@Android:color/white"
            Android:textSize="20dip" />

        <TextView
            Android:layout_width="50dip"
            Android:layout_height="25dip"
            Android:layout_columnSpan="2"
            Android:layout_rowSpan="1"
            Android:background="#0c00a3"
            Android:gravity="center"
            Android:text="2"
            Android:textColor="@Android:color/white"
            Android:textSize="20dip" />

        <TextView
            Android:layout_width="25dip"
            Android:layout_height="100dip"
            Android:layout_columnSpan="1"
            Android:layout_rowSpan="4"
            Android:background="#00a313"
            Android:gravity="center"
            Android:text="3"
            Android:textColor="@Android:color/white"
            Android:textSize="20dip" />

        <TextView
            Android:layout_width="75dip"
            Android:layout_height="50dip"
            Android:layout_columnSpan="3"
            Android:layout_rowSpan="2"
            Android:background="#a29100"
            Android:gravity="center"
            Android:text="4"
            Android:textColor="@Android:color/white"
            Android:textSize="20dip" />

        <TextView
            Android:layout_width="75dip"
            Android:layout_height="25dip"
            Android:layout_columnSpan="3"
            Android:layout_rowSpan="1"
            Android:background="#a500ab"
            Android:gravity="center"
            Android:text="5"
            Android:textColor="@Android:color/white"
            Android:textSize="20dip" />

        <TextView
            Android:layout_width="50dip"
            Android:layout_height="25dip"
            Android:layout_columnSpan="2"
            Android:layout_rowSpan="1"
            Android:background="#00a9ab"
            Android:gravity="center"
            Android:text="6"
            Android:textColor="@Android:color/white"
            Android:textSize="20dip" />
    </GridLayout>

</RelativeLayout>

ScreenShot

16
HandlerExploit

Vous devez définir les paramètres layout_gravity et layout_columntWeight sur vos colonnes.

<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="wrap_content">

    <TextView Android:text="سوم شخص"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        />

    <TextView Android:text="دوم شخص"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        />

    <TextView Android:text="اول شخص"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        />
 </Android.support.v7.widget.GridLayout>
5
Hossein Shahdoost

Android Support V7 La bibliothèque GridLayout facilite la distribution d'espace en excès en intégrant le principe de la pondération. Pour étirer une colonne, assurez-vous que ses composants définissent un poids ou une gravité. Pour empêcher une colonne de s’étirer, assurez-vous que l’un des composants de la colonne ne définit pas un poids ou une gravité. N'oubliez pas d'ajouter une dépendance pour cette bibliothèque. Ajoutez com.Android.support:gridlayout-v7:25.0.1 dans build.gradle.

<?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="First"
    app:layout_columnWeight="1"
    app:layout_rowWeight="1" />

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

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

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

</Android.support.v7.widget.GridLayout>
1
Permita

À partir d'API 21, GridLayout prend désormais en charge le poids comme LinearLayout. Pour plus de détails s'il vous plaît voir le lien ci-dessous:

https://stackoverflow.com/a/31089200/1296944

0
Jack