サイト移転のお知らせ:http://techbooster.org/に移転しました

GridLayoutを使って、格子状にViewを表示する

10月 20, 2011   //   by UpDown-G   //   Android, アプリケーション, ユーザインターフェース, リソース  //  No Comments

先日Android4.0(コードネーム IceCreamSandwich:ICS)が公開されました。
TechBoosterでは、本日よりICSのAPIを中心に紹介していきます。

本タイトルでは、ICSから追加されたGridLayoutを紹介します。
GridLayoutは、格子状にViewを配置する事に向いています。
※以前まではLinearLayoutを複数使用するなどし、作成する必要がありました。

今回はGridLayoutを用いて電卓の画面(上記画像)を作成するサンプルを紹介していきます。

GridLayoutを使用する際に重要となるパラメータは以下の表の通りです。

GridLayoutに指定する重要パラメータ(表1)

パラメータ概要
android:columnCount横方向のマスの数
android:rowCount縦方向のマスの数

GridLayoutの子Viewに指定する重要パラメータ(表2)

パラメータ概要
android:layout_column列の指定(0オリジン)
android:layout_columnSpan列方向に何マス消費するか
android:layout_row行の指定(0オリジン)
android:layout_rowSpan行方向に何マス消費するか
android:layout_gravity格子内でのgravity指定を行う

それではつづきをどうぞ。

1.GridLayoutへのパラメータ指定

GridLayout自身へは、表1の通り2つのパラメータを設定する必要があります。
columnCount,rowCountは column × row の格子を用意するという宣言に当たります。

サンプルでは、以下の通り、4×4マスの格子を作成しています。

    <GridLayout
        android:id="@+id/gridLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="4"
        android:rowCount="4" >
...省略

2.GridLayoutの子Viewへのパラメータ指定

column,rowの指定

GridLayoutの子Viewには、android:layout_columnandroid:layout_rowを指定する必要があります。

android:layout_columnandroid:layout_rowは以下図の、どの場所(column, row)にViewを配置するかを設定します。

格子をまたぐViewの設定

格子状にViewを配置できるとはいえ、サンプルのスクリーンショットの「+」ボタンなどのように
複数の格子をまたいだViewを作成するには、android:layout_columnSpanandroid:layout_rowSpanを使用します。

上図の様に、列方向(横方向)に2マス使用したい場合にはandroid:layout_columnSpan = 2を、行方向(縦方向)に2マス使用したい場合にはandroid:layout_rowSpan = 2を指定します。

格子内のGravity

GridViewの子Viewに対し、android:layout_gravityを指定すると、
格子内でViewの位置を指定することが可能です。

Gravityの指定内容に関しては、以下記事を参考にどうぞ
Viewを任意の位置に配置する

最後に、サンプルのLayoutファイルを紹介します。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:rowOrderPreserved="true" >

    <TextView
        android:id="@+id/ansField"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:text=""
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <GridLayout
        android:id="@+id/gridLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="4"
        android:rowCount="4" >

        <Button
            android:id="@+id/button7"
            android:layout_width="64dp"
            android:layout_column="0"
            android:layout_row="0"
            android:text="7" />

        <Button
            android:id="@+id/button8"
            android:layout_width="64dp"
            android:layout_column="1"
            android:layout_gravity="bottom"
            android:layout_row="0"
            android:text="8" />

        <Button
            android:id="@+id/button9"
            android:layout_width="64dp"
            android:layout_column="2"
            android:layout_gravity="left"
            android:layout_row="0"
            android:text="9" />

        <Button
            android:id="@+id/button4"
            android:layout_width="64dp"
            android:layout_column="0"
            android:layout_row="1"
            android:text="4" />

        <Button
            android:id="@+id/button5"
            android:layout_column="1"
            android:layout_width="64dp"
            android:layout_gravity="left"
            android:layout_row="1"
            android:text="5" />

        <Button
            android:id="@+id/button6"
            android:layout_column="2"
            android:layout_row="1"
            android:layout_width="64dp"
            android:text="6" />

        <Button
            android:id="@+id/button1"
            android:layout_column="0"
            android:layout_row="2"
            android:layout_width="64dp"
            android:text="1" />

        <Button
            android:id="@+id/button2"
            android:layout_column="1"
            android:layout_row="2"
            android:layout_width="64dp"
            android:text="2" />

        <Button
            android:id="@+id/button3"
            android:layout_column="2"
            android:layout_row="2"
            android:layout_width="64dp"
            android:text="3" />

        <Button
            android:id="@+id/button."
            android:layout_width="64dp"
            android:layout_column="0"
            android:layout_gravity="bottom"
            android:layout_row="3"
            android:text="." />

        <Button
            android:id="@+id/button0"
            android:layout_width="120dp"
            android:layout_column="1"
            android:layout_columnSpan="2"
            android:layout_gravity="center"
            android:layout_row="3"
            android:text="0" />

        <Button
            android:id="@+id/buttonPlus"
            android:layout_height="90dp"
            android:layout_width="64dp"
            android:layout_column="3"
            android:layout_gravity="bottom"
            android:layout_row="0"
            android:layout_rowSpan="2"
            android:text="+" />

        <Button
            android:id="@+id/buttonEqu"
            android:layout_height="90dp"
            android:layout_width="64dp"
            android:layout_column="3"
            android:layout_gravity="bottom"
            android:layout_row="2"
            android:layout_rowSpan="2"
            android:text="=" />
    </GridLayout>

</LinearLayout>

関連する記事:

Sponsored Link

Comments are closed.

技術書新刊 発売中

アンドロイドアカデミアには、CIやテスト、互換検証など実務に生きるノウハウをあつめています

技術書新刊 発売中

Android Next!はAndroid 7.0に対応したはじめての技術書です!


The Web Explorer 2はCSSの中央寄せやWebAudioなど未来を読み解く一冊です


Revised TypeScript in DefinitelylandはTypeScript 2.0(β)に対応した解説書です。インストールから型定義まで幅広くサポートしています


技術書をかこう!はエンジニアらしい執筆環境を構築、HowTo本です