Xamarin.Android GridLayout

GridLayout adalah subkelas baru ViewGroup yang mendukung tata letak tampilan dalam kisi 2D, mirip dengan tabel HTML, seperti yang ditunjukkan di bawah ini:

GridLayout bekerja dengan hierarki tampilan datar, di mana tampilan anak mengatur lokasinya di kisi dengan menentukan baris dan kolom tempat tampilan anak berada. Dengan cara ini, GridLayout dapat memposisikan tampilan di kisi tanpa mengharuskan tampilan perantara menyediakan struktur tabel, seperti yang terlihat di baris tabel yang digunakan dalam TableLayout. Dengan mempertahankan hierarki datar, GridLayout dapat dengan lebih cepat mengatur tata letak tampilan anaknya. Mari kita lihat contoh untuk mengilustrasikan apa arti konsep ini dalam kode.

Membuat Tata Letak Kisi

XML berikut menambahkan beberapa TextView kontrol ke GridLayout.

<?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:rowCount="2"
        android:columnCount="2">
     <TextView
            android:text="Cell 0"
            android:textSize="14dip" />
     <TextView
            android:text="Cell 1"
            android:textSize="14dip" />
     <TextView
            android:text="Cell 2"
            android:textSize="14dip" />
     <TextView
            android:text="Cell 3"
            android:textSize="14dip" />
</GridLayout>

Tata letak akan menyesuaikan ukuran baris dan kolom sehingga sel bisa sesuai dengan kontennya, seperti yang diilustrasikan oleh diagram berikut:

Ini menghasilkan antarmuka pengguna berikut saat dijalankan dalam aplikasi:

Menentukan Orientasi

Perhatikan dalam XML di atas, masing-masing TextView tidak menentukan baris atau kolom. Ketika ini tidak ditentukan, menetapkan GridLayout setiap tampilan anak secara berurutan, berdasarkan orientasi. Misalnya, mari kita ubah orientasi GridLayout dari default, yaitu horizontal, menjadi vertikal seperti ini:

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

Sekarang, akan memposisikan sel dari atas ke bawah di setiap kolom, alih-alih kiri ke kanan, seperti yang GridLayout ditunjukkan di bawah ini:

Ini menghasilkan antarmuka pengguna berikut pada runtime:

Menentukan Posisi Eksplisit

Jika kita ingin secara eksplisit mengontrol posisi tampilan anak di GridLayout, kita dapat mengatur atribut dan layout_column merekalayout_row. Misalnya, XML berikut akan menghasilkan tata letak yang ditunjukkan pada cuplikan layar pertama (ditunjukkan di atas), terlepas dari orientasinya.

<?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:rowCount="2"
        android:columnCount="2">
     <TextView
            android:text="Cell 0"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="0" />
     <TextView
            android:text="Cell 1"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="1" />
     <TextView
            android:text="Cell 2"
            android:textSize="14dip"
            android:layout_row="1"
            android:layout_column="0" />
     <TextView
            android:text="Cell 3"
            android:textSize="14dip"
            android:layout_row="1"
            android:layout_column="1"  />
</GridLayout>

Menentukan penspasian

Kami memiliki beberapa opsi yang akan menyediakan penspasian antara tampilan anak dari GridLayout. Kita dapat menggunakan atribut untuk mengatur margin pada setiap tampilan anak secara langsung, seperti yang layout_margin ditunjukkan di bawah ini

<TextView
            android:text="Cell 0"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_margin="10dp" />

Selain itu, di Android 4, tampilan penspasian tujuan umum baru yang disebut Space sekarang tersedia. Untuk menggunakannya, cukup tambahkan sebagai tampilan anak. Misalnya, XML di bawah ini menambahkan baris tambahan ke GridLayout dengan mengaturnya rowcount ke 3, dan menambahkan tampilan yang menyediakan penspasian Space antara TextViews.

<?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:rowCount="3"
        android:columnCount="2"
        android:orientation="vertical">
     <TextView
            android:text="Cell 0"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="0" />
     <TextView
            android:text="Cell 1"
            android:textSize="14dip"
            android:layout_row="0"        
            android:layout_column="1" />
     <Space
            android:layout_row="1"
            android:layout_column="0"
            android:layout_width="50dp"         
            android:layout_height="50dp" />    
     <TextView
            android:text="Cell 2"
            android:textSize="14dip"
            android:layout_row="2"        
            android:layout_column="0" />
     <TextView
            android:text="Cell 3"
            android:textSize="14dip"
            android:layout_row="2"        
            android:layout_column="1" />
</GridLayout>

XML ini membuat penspasian dalam seperti yang GridLayout ditunjukkan di bawah ini:

Manfaat menggunakan tampilan baru Space adalah memungkinkan penspasian dan tidak mengharuskan kami mengatur atribut pada setiap tampilan anak.

Mencakup Kolom dan Baris

juga GridLayout mendukung sel yang mencakup beberapa kolom dan baris. Misalnya, kita menambahkan baris lain yang berisi tombol ke seperti yang ditunjukkan GridLayout di bawah ini:

<?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:rowCount="4"
        android:columnCount="2"
        android:orientation="vertical">
     <TextView
            android:text="Cell 0"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="0" />
     <TextView
            android:text="Cell 1"
            android:textSize="14dip"
            android:layout_row="0"        
            android:layout_column="1" />
     <Space
            android:layout_row="1"
            android:layout_column="0"
            android:layout_width="50dp"        
            android:layout_height="50dp" />   
     <TextView
            android:text="Cell 2"
            android:textSize="14dip"
            android:layout_row="2"        
            android:layout_column="0" />
     <TextView
            android:text="Cell 3"
            android:textSize="14dip"        
            android:layout_row="2"        
            android:layout_column="1" />
     <Button
            android:id="@+id/myButton"
            android:text="@string/hello"        
            android:layout_row="3"
            android:layout_column="0" />
</GridLayout>

Ini akan menghasilkan kolom pertama yang GridLayout direntangkan untuk mengakomodasi ukuran tombol, seperti yang kita lihat di sini:

Agar kolom pertama tidak membentang, kita dapat mengatur tombol untuk menjangkau dua kolom dengan mengatur rentang kolomnya seperti ini:

<Button
    android:id="@+id/myButton"
    android:text="@string/hello"       
    android:layout_row="3"
    android:layout_column="0"
    android:layout_columnSpan="2" />

Melakukan ini menghasilkan tata letak untuk TextViews tata letak yang mirip dengan tata letak yang kami miliki sebelumnya, dengan tombol ditambahkan ke bagian bawah seperti yang GridLayout ditunjukkan di bawah ini: