GridLayout dan Row / Column Span Woe

121

The Android Developers Blog post memperkenalkanGridLayout menunjukkan diagram ini tentang bagaimana bentang berdampak alokasi Indeks otomatis:

alokasi indeks otomatis

Saya mencoba untuk benar-benar menerapkannya menggunakan file GridLayout. Inilah yang saya miliki sejauh ini:

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

Saya harus memperkenalkan <Space>elemen untuk memastikan setiap kolom memiliki lebar minimum, jika tidak, saya akan memiliki banyak kolom dengan lebar nol.

Namun, bahkan dengan mereka, saya mendapatkan ini:

sample GridLayout

Terutama:

  • Meskipun demikian android:layout_gravity="fill_horizontal", widget saya dengan bentang kolom tidak memenuhi kolom bentang

  • Terlepas dari android:layout_rowSpannilainya, tidak ada yang mencakup baris

Adakah yang bisa mereproduksi diagram dari posting blog menggunakan GridLayout?

Terima kasih!

android android-gridlayout CommonsWare
sumber
178
Saya kira bahkan Anda mengajukan pertanyaan :)
StackOverflowed

Jawaban:

76

Rasanya cukup hack, tetapi saya berhasil mendapatkan tampilan yang benar dengan menambahkan kolom dan baris ekstra di luar yang dibutuhkan. Kemudian saya mengisi kolom ekstra dengan Spasi di setiap baris yang mendefinisikan tinggi dan mengisi baris ekstra dengan Spasi di setiap kolom yang mendefinisikan lebar. Untuk fleksibilitas ekstra, saya membayangkan ukuran Space ini dapat diatur dalam kode untuk memberikan sesuatu yang mirip dengan bobot. Saya mencoba menambahkan tangkapan layar, tetapi saya tidak memiliki reputasi yang diperlukan.

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

tangkapan layar

kturney.dll
sumber
7
Nah, IMHO yang secara bertahap kurang hacky daripada solusi lain yang disajikan hingga saat ini - setidaknya di sini, ukuran terprogram ada dalam Spaceelemen. Saya menambahkan tangkapan layar untuk pembaca mendatang. Terima kasih!
CommonsWare
Mengapa rowCountdisetel ke 8? Kami membutuhkan 4 baris (ukuran terbesar rowSpan) ditambah satu ekstra Spacesehingga harus 5. Apa yang saya lewatkan?
curioustechizen
Saya hanya menghitung jumlah baris dan kolom dari gambar di pertanyaan asli (yang berasal dari postingan blog Android dev). Saya kemudian menambahkan 1 ke jumlah baris dan kolom untuk memberi ruang bagi Spasi perbatasan luar. Ini harus bekerja dengan baik hanya dengan 5 baris juga.
kturney
5
Saya menemukan bahwa solusi ini hanya berfungsi <Gridlayout>sebagai kebalikan dari<android.support.v7.widget.GridLayout>
Didia
Bagaimana saya bisa mengatur row_span dan kolom span secara dinamis ... itu akan bekerja?
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>

ScreenShot

HandlerExploit
sumber
2
Terima kasih! Yang menarik adalah jika saya beralih ke GridLayoutdari paket Dukungan Android, tata letaknya rusak, menunjukkan bahwa keduanya tidak sepenuhnya kompatibel. Juga, saya benar-benar berharap ada cara untuk melakukan ini yang tidak melibatkan ukuran kabel yang keras dari widget. Saya akan membiarkan ini bergulir sebentar, untuk melihat jawaban lain apa yang masuk (jika ada), tetapi saya akan menerima jawaban Anda jika tidak ada yang lebih baik yang muncul. Terima kasih lagi!
CommonsWare
4
"jika saya beralih ke GridLayout dari paket Dukungan Android, tata letak rusak" - sebenarnya, itu adalah kesalahan saya, tidak mengubah android:atribut yang diperlukan menjadi atribut app:, menggunakan namespace XML backport. Ini berfungsi dengan backport.
CommonsWare
Saya menemukan cara agar beberapa di antaranya berukuran dinamis tetapi hanya jika lebar penuh kolom atau baris sudah ditentukan oleh tampilan yang berdekatan. Saya tidak berpikir bahwa mereka bekerja seperti beban dan mendistribusikan ruang secara merata tergantung pada rentang yang ditentukan. Ini tidak sempurna tetapi berfungsi dengan sempurna untuk apa yang saya butuhkan dalam proyek saya saat ini.
HandlerExploit
Nah, contoh Anda lebih seperti pendekatan AbsoluteLayout yang dicampur dengan satu untuk RelativeLayout, bukan? Ini tidak dinamis atau portabel. Mengapa tepatnya Anda membutuhkan GridLayout untuk ini? Bagaimanapun, GridLayout adalah, imho, rusak atau belum selesai ...
Bondax
@Bondax Implementasi ini dengan jelas mendefinisikan item petak dalam tinggi, lebar, lebar kolom, dan rentang kolom. Tata letak kisi akan mengapung item kisi Anda dalam ruang terbatas saat lebar yang berbeda ditentukan ke kisi (lebar layar). Ini adalah persyaratan untuk sebuah proyek dan ini menyelesaikan masalah dengan sempurna.
HandlerExploit
6

Anda harus menyetel layout_gravity dan layout_columntWeight pada kolom Anda

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

Pustaka GridLayout Dukungan Android V7 memudahkan distribusi ruang berlebih dengan mengakomodasi prinsip bobot. Untuk membuat kolom meregang, pastikan komponen di dalamnya menentukan berat atau gravitasi. Untuk mencegah kolom meregang, pastikan salah satu komponen dalam kolom tidak menentukan bobot atau gravitasi. Ingatlah untuk menambahkan ketergantungan untuk pustaka ini. Tambahkan com.android.support:gridlayout-v7:25.0.1 di 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>
Permita
sumber