Thursday, February 18, 2016

[Android UI]GridView and GridLayout

[Android UI]GridView and GridLayout

I was a bit confused about GridView and GridLayout at the very beginning when I was trying to use grid layout (not GridLayout, I had no idea what GridLayout is at that moment). What I want is the layout like this:


I want to know which one fits my need best. Here's what I have found:

1. GridView:
GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted to the layout using a ListAdapter.

A typical grid view definition in XML is like this:
<?xml version="1.0" encoding="utf-8"?><GridView xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/gridview"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:columnWidth="80dp"    android:numColumns="auto_fit"    android:verticalSpacing="16dp"    android:horizontalSpacing="16dp"    android:padding="16dp"    android:stretchMode="columnWidth"    android:gravity="center"/>
You can specify number of columns, rows, and also the column width etc. But seems the cells cannot be spanned which is actually what I wanted.

2. GridLayout:
Child views are aligned as cells in GridLayout, and you can scroll vertically or horizontally. 

A typical GridLayout definition in XML is like this:
<GridLayout    android:id="@+id/glfeature"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:rowCount="2"    android:columnCount="3"    android:alignmentMode="alignBounds"    android:layout_margin="6dp">
    <ImageView        android:id="@+id/button1"        android:layout_rowSpan="2"        android:layout_gravity="fill_vertical"
        android:layout_width="120dp"        android:layout_height="60dp"        android:layout_margin="10dp"        android:text="Button" />
    <ImageView        android:id="@+id/button1"        android:layout_gravity="fill_vertical"
        android:layout_margin="10dp"        android:text="Button" />
    <ImageView        android:id="@+id/button1"        android:layout_gravity="fill_vertical"
        android:layout_margin="10dp"        android:text="Button" />
    <ImageView        android:id="@+id/button1"        android:layout_gravity="fill_vertical"
        android:layout_margin="10dp"        android:text="Button" />
    <ImageView        android:id="@+id/button1"        android:layout_gravity="fill_vertical"
        android:layout_margin="10dp"        android:text="Button" />
</GridLayout>
You can specify column/row count for GridLayout, just like LinearLayout or RelativeLayout, you can specify the child views directly in XML file.

Okay, in a word. The major differences between these two can be summarized as below:
a). GridView is a ViewGroup, similar to ListView/RecyclerView. While GridLayout is a layout for holding views, similar to LinearLayout/RelativeLayout
b). You can set up adapter for GridView while you cannot do that for GridLayout
c). You cannot span cells in GridView, while GridLayout support spanning cells.

And I got my layout implemented with GridLayout finally.