GridLayoutを扱う

ビューを格子状に配置したい場合にはGridLayoutが非常に便利で、LinearLayoutを複数ネストする必要がなく、 ConstraintLayoutのように多くの制約を設定しなくても済む。 さらに、子ビューの一部のLayoutParam属性に初期値が設定されているため、コードがシンプルになる。

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="wrap_content"
    android:columnCount="3"
    android:background="@android:color/holo_red_light"
    android:rowCount="1">

    <TextView
        android:layout_row="0"
        android:layout_column="0"
        android:padding="10dp"
        android:background="@android:color/holo_blue_bright"
        android:text="00" />
    <TextView
        android:layout_row="0"
        android:layout_column="1"
        android:padding="10dp"
        android:background="@android:color/holo_blue_dark"
        android:text="01" />
    <TextView
        android:layout_row="0"
        android:layout_column="2"
        android:padding="10dp"
        android:background="@android:color/holo_green_light"
        android:text="02" />
</GridLayout>

GridLayoutにはcolumnCountとrowCountを設定し、 子ビューであるTextViewにlayout_rowとlayout_columnで位置を指定している。

また、GridLayoutの幅はmatch_parentで画面いっぱいに、高さはwrap_contentで最小限に設定している。 columnCountを3、rowCountを1にすることで、1行3列の格子状として表示される。

補足

子ビューのlayout_widthとlayout_heightが指定されていない。 これはGridLayoutが子ビューのこれらの属性に wrap_contentを初期値として設定しているため。 なお、このコードを実行すると、各TextViewは左寄せで表示される。

重み付けによる均等配置をする。

LinearLayoutのlayout_weightのように、GridLayoutでも要素を均等に広げることができる。

横幅を均等にするには、子ビューに layout_columnWeight を設定する。

<?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="wrap_content"
    android:background="@android:color/holo_red_light"
    android:columnCount="3"
    android:rowCount="1">

    <TextView
        android:layout_row="0"
        android:layout_column="0"
        android:layout_columnWeight="1"
        android:background="@android:color/holo_blue_bright"
        android:padding="10dp"
        android:text="00" />

    <TextView
        android:layout_row="0"
        android:layout_column="1"
        android:layout_columnWeight="1"
        android:background="@android:color/holo_blue_dark"
        android:padding="10dp"
        android:text="01" />

    <TextView
        android:layout_row="0"
        android:layout_column="2"
        android:layout_columnWeight="1"
        android:background="@android:color/holo_green_light"
        android:padding="10dp"
        android:text="02" />
</GridLayout>

上のサンプルでは、各TextViewにlayout_columnWeight="1"を追加することで、画面幅いっぱいに均等に広げて表示している。

高さを均等にするには **layout_rowWeight**を使用する。ただしGridLayoutの高さも固定値（ここでは100dp）に設定する必要がある。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="100dp"
    android:background="@android:color/holo_red_light"
    android:columnCount="1"
    android:rowCount="2">

    <TextView
        android:layout_row="0"
        android:layout_rowWeight="1"
        android:layout_column="0"
        android:background="@android:color/holo_blue_bright"
        android:padding="10dp"
        android:text="00" />

    <TextView
        android:layout_row="1"
        android:layout_rowWeight="1"
        android:layout_column="0"
        android:background="@android:color/holo_green_light"
        android:padding="10dp"
        android:text="10" />

</GridLayout>