GridLayout und Row / Column Span Woe

121

Die Einführung in den BlogGridLayout des Android-Entwicklerblogs zeigt dieses Diagramm, wie sich Bereiche auf die automatische Indexzuweisung auswirken:

automatische Indexzuordnung

Ich versuche das tatsächlich mit a umzusetzen GridLayout. Folgendes habe ich bisher:

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

Ich musste die <Space>Elemente einführen , um sicherzustellen, dass jede Spalte eine Mindestbreite hatte, sonst hätte ich eine Reihe von Spalten mit der Breite Null.

Aber selbst mit ihnen verstehe ich Folgendes:

Beispiel GridLayout

Vor allem:

  • Trotzdem android:layout_gravity="fill_horizontal"füllen meine Widgets mit Spaltenbereichen die übergreifenden Spalten nicht aus

  • Trotz der android:layout_rowSpanWerte erstreckt sich nichts über Zeilen

Kann jemand das Diagramm aus dem Blog-Beitrag mit einem reproduzieren GridLayout?

Vielen Dank!

android android-gridlayout CommonsWare
quelle
178
Ich denke sogar du stellst Fragen :)
StackOverflowed

Antworten:

76

Es fühlt sich ziemlich hackig an, aber ich habe es geschafft, das richtige Aussehen zu erhalten, indem ich eine zusätzliche Spalte und Zeile hinzugefügt habe, die über das hinausgeht, was benötigt wird. Dann füllte ich die zusätzliche Spalte mit einem Leerzeichen in jeder Zeile, die eine Höhe definiert, und füllte die zusätzliche Zeile mit einem Leerzeichen in jeder Spalte, die eine Breite definiert. Für zusätzliche Flexibilität stelle ich mir vor, dass diese Space-Größen im Code festgelegt werden könnten, um etwas Ähnliches wie Gewichte bereitzustellen. Ich habe versucht, einen Screenshot hinzuzufügen, habe aber nicht den erforderlichen Ruf.

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

Bildschirmfoto

kturney
quelle
7
Nun, meiner Meinung nach ist das inkrementell weniger hackig als die andere bisher vorgestellte Lösung - zumindest hier sind die fest verdrahteten Größen in den SpaceElementen. Ich habe einen Screenshot für zukünftige Leser hinzugefügt. Vielen Dank!
CommonsWare
Warum ist der rowCountSatz auf 8? Wir brauchen 4 Zeilen (die Größe der größten rowSpan) plus die zusätzliche, Spacedamit das 5 sein sollte. Was fehlt mir?
neugieriger Techizen
Ich habe gerade die Zeilen- und Spaltenanzahl aus dem Bild in der ursprünglichen Frage (die selbst aus einem Android-Entwickler-Blog-Beitrag stammt) übernommen. Ich habe dann 1 zu den Zeilen- und Spaltenzahlen hinzugefügt, um Platz für die äußeren Randbereiche zu schaffen. Es sollte auch mit nur 5 Zeilen gut funktionieren.
Kturney
5
Ich finde, dass diese Lösung nur mit <Gridlayout>im Gegensatz zu<android.support.v7.widget.GridLayout>
Didia
Wie kann ich dynamisch row_span und column span einstellen ... es wird funktionieren?
17 
<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>

Bildschirmfoto

HandlerExploit
quelle
2
Vielen Dank! Interessant ist, dass beim Wechsel GridLayoutvom Android-Support-Paket das Layout unterbrochen wird, was darauf hindeutet, dass die beiden nicht vollständig kompatibel sind. Ich hoffe auch sehr, dass es einen Weg gibt, dies zu tun, bei dem die Größe der Widgets nicht fest verdrahtet ist. Ich werde dies ein wenig rollen lassen, um zu sehen, welche anderen Antworten (falls vorhanden) eingehen, aber ich werde Ihre akzeptieren, wenn nichts Besseres auftaucht. Danke noch einmal!
CommonsWare
4
"Wenn ich vom Android-Support-Paket zum GridLayout wechsle, bricht das Layout" - eigentlich war das mein Fehler, die erforderlichen android:Attribute app:nicht mithilfe des XML-Namespace des Backports in solche zu konvertieren . Es funktioniert mit dem Backport.
CommonsWare
Ich habe einen Weg gefunden, einige von ihnen dynamisch zu dimensionieren, aber es ist nur möglich, wenn die volle Breite der Spalten oder Zeilen bereits durch benachbarte Ansichten definiert ist. Ich denke nicht, dass sie wie Gewichte funktionieren und den Raum in Abhängigkeit von den definierten Bereichen gleichmäßig verteilen. Es ist nicht perfekt, aber es funktioniert perfekt für das, was ich in meinem aktuellen Projekt brauche.
HandlerExploit
Nun, Ihr Beispiel ähnelt eher dem Ansatz eines AbsoluteLayout, gemischt mit einem für ein RelativeLayout, nicht wahr? Dies ist weder dynamisch noch portabel. Warum genau brauchen Sie dafür ein GridLayout? Wie auch immer, GridLayout ist imho entweder kaputt oder unvollendet ...
Bondax
@Bondax Diese Implementierung definiert das Rasterelement klar in Höhe, Breite, Spaltenbreite und Spaltenbreite. Das Rasterlayout verschiebt Ihre Rasterelemente auf engstem Raum, wenn für das Raster unterschiedliche Breiten definiert sind (Bildschirmbreite). Dies war eine Voraussetzung für ein Projekt und löste das Problem perfekt.
HandlerExploit
6

Sie müssen sowohl layout_gravity als auch layout_columntWeight für Ihre Spalten festlegen

<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>
Hossein Shahdoost
quelle
2

Die GridLayout-Bibliothek von Android Support V7 erleichtert die Verteilung von überschüssigem Speicherplatz, indem das Gewichtsprinzip berücksichtigt wird. Stellen Sie sicher, dass die darin enthaltenen Komponenten ein Gewicht oder eine Schwerkraft definieren, um eine Säule zu dehnen. Stellen Sie sicher, dass eine der Komponenten in der Säule kein Gewicht oder keine Schwerkraft definiert, um zu verhindern, dass sich eine Säule dehnt. Denken Sie daran, Abhängigkeiten für diese Bibliothek hinzuzufügen. Fügen Sie com.android.support:gridlayout-v7:25.0.1 in build.gradle hinzu.

<?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>
Permita
quelle