GridLayoutを使って、格子状にViewを表示する
先日Android4.0(コードネーム IceCreamSandwich:ICS)が公開されました。
TechBoosterでは、本日よりICSのAPIを中心に紹介していきます。
本タイトルでは、ICSから追加されたGridLayoutを紹介します。
GridLayoutは、格子状にViewを配置する事に向いています。
※以前まではLinearLayoutを複数使用するなどし、作成する必要がありました。
今回はGridLayoutを用いて電卓の画面（上記画像）を作成するサンプルを紹介していきます。
GridLayoutを使用する際に重要となるパラメータは以下の表の通りです。
GridLayoutに指定する重要パラメータ（表１）
| パラメータ | 概要 |
|---|---|
| android:columnCount | 横方向のマスの数 |
| android:rowCount | 縦方向のマスの数 |
GridLayoutの子Viewに指定する重要パラメータ（表２）
| パラメータ | 概要 |
|---|---|
| android:layout_column | 列の指定（0オリジン） |
| android:layout_columnSpan | 列方向に何マス消費するか |
| android:layout_row | 行の指定（０オリジン） |
| android:layout_rowSpan | 行方向に何マス消費するか |
| android:layout_gravity | 格子内でのgravity指定を行う |
それではつづきをどうぞ。
１．GridLayoutへのパラメータ指定
GridLayout自身へは、表１の通り２つのパラメータを設定する必要があります。
columnCount,rowCountは column × row の格子を用意するという宣言に当たります。
サンプルでは、以下の通り、4×4マスの格子を作成しています。
1 2 3 4 5 6 7 | <GridLayout android:id="@+id/gridLayout1" android:layout_width="match_parent" android:layout_height="wrap_content" android:columnCount="4" android:rowCount="4" >...省略 |
２．GridLayoutの子Viewへのパラメータ指定
column,rowの指定
GridLayoutの子Viewには、android:layout_columnとandroid:layout_rowを指定する必要があります。
android:layout_columnとandroid:layout_rowは以下図の、どの場所（column, row）にViewを配置するかを設定します。
格子をまたぐViewの設定
格子状にViewを配置できるとはいえ、サンプルのスクリーンショットの「＋」ボタンなどのように
複数の格子をまたいだViewを作成するには、android:layout_columnSpanとandroid:layout_rowSpanを使用します。
上図の様に、列方向（横方向）に2マス使用したい場合にはandroid:layout_columnSpan = 2を、行方向（縦方向）に2マス使用したい場合にはandroid:layout_rowSpan = 2を指定します。
格子内のGravity
GridViewの子Viewに対し、android:layout_gravityを指定すると、
格子内でViewの位置を指定することが可能です。
Gravityの指定内容に関しては、以下記事を参考にどうぞ
Viewを任意の位置に配置する
最後に、サンプルのLayoutファイルを紹介します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | 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> |
About The Author
