Androidアプリ開発のGridLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。

今回はそのなかの1つである、GridLayout（グリッドレイアウト）を追加する方法と基本的な使い方をご紹介します。

 

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

 

 

GridLayoutとは

GridLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。TableLayoutと似ていますが、GridLayoutでは列をまたいでパーツを配置することができます。

Android4.0で公開された比較的新しいレイアウトです。

 

 

GridLayoutを配置する

今回は、GridLayoutを使用してこの画像のような画面を作成してみます。

 

GridLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。

パレット内のGridLayoutを、プレビュー画面までドラッグしましょう。

 

次に、GridLayoutの列数を指定します。

列数は、プロパティの「ColumnCount」で指定できます。今回は5列必要なので、「ColumnCount」の値を「5」にします。

 

 

[PR] Androidアプリ開発コース

GridLayoutにパーツを配置する

GridLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。

ボタンを画面に配置したら、ボタンを配置するセルを指定しましょう。

 

セルの指定はプロパティの「Layout Parameters – Row」で、配置する行を指定できます。また、「Layout Parameters – Column」で、配置する列も指定できます。

上から2行目の3列目に配置したい場合は、layout_rowを「1」、layout_columnを「2」といった具合に指定していきましょう。

 

また、複数のセルをまたぐ場合は、「android:layout_rowSpan」「android:layout_columnSpan」を指定します。

「CE」ボタンや「0」ボタンのように、横にまたぐ場合は「android:layout_columnSpan」を「2」にします。

 

同じように、「+」ボタンのように縦にまたぐ場合は「android:layout_rowSpan」を「2」にします。

すべてのボタンが配置できたら実行して、画面を確認してください。

 

 

GridLayoutのコードを確認する

XMLタブでコードを確認すると、下記のようになっています。

<GridLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:columnCount=”5″ >
<Button
android:id=”@+id/button1″
android:layout_width=”60dp”
android:layout_height=”60dp”
android:layout_column=”0″
android:layout_row=”0″
android:text=”7″ />
<Button
android:id=”@+id/button2″
android:layout_width=”60dp”
android:layout_height=”60dp”
android:layout_column=”1″
android:layout_row=”0″
android:text=”8″ />
<Button
android:id=”@+id/button3″
android:layout_width=”60dp”
android:layout_height=”60dp”
android:layout_column=”2″
android:layout_row=”0″
android:text=”9″ />
<Button
android:id=”@+id/button4″
android:layout_width=”120dp”
android:layout_height=”60dp”
android:layout_column=”3″
android:layout_columnSpan=”2″
android:layout_row=”0″
android:text=”CE” />
<Button
android:id=”@+id/button5″
android:layout_width=”60dp”
android:layout_height=”60dp”
android:layout_column=”0″
android:layout_row=”1″
android:text=”4″ />
<Button
android:id=”@+id/button6″
android:layout_width=”60dp”
android:layout_height=”60dp”
android:layout_column=”1″
android:layout_row=”1″
android:text=”5″ />
<Button
android:id=”@+id/button7″
android:layout_width=”60dp”
android:layout_height=”60dp”
android:layout_column=”2″
android:layout_row=”1″
android:text=”6″ />
<Button
android:id=”@+id/button8″
android:layout_width=”60dp”
android:layout_height=”60dp”
android:layout_column=”3″
android:layout_row=”1″
android:text=”×” />
<Button
android:id=”@+id/button9″
android:layout_width=”60dp”
android:layout_height=”60dp”
android:layout_column=”4″
android:layout_row=”1″
android:text=”÷” />
<Button
android:id=”@+id/button10″
android:layout_width=”60dp”
android:layout_height=”60dp”
android:layout_column=”0″
android:layout_row=”2″
android:text=”1″ />
<Button
android:id=”@+id/button11″
android:layout_width=”60dp”
android:layout_height=”60dp”
android:layout_column=”1″
android:layout_row=”2″
android:text=”2″ />
<Button
android:id=”@+id/button12″
android:layout_width=”60dp”
android:layout_height=”60dp”
android:layout_column=”2″
android:layout_row=”2″
android:text=”3″ />
<Button
android:id=”@+id/button13″
android:layout_width=”60dp”
android:layout_height=”120dp”
android:layout_column=”3″
android:layout_row=”2″
android:layout_rowSpan=”2″
android:text=”+” />
<Button
android:id=”@+id/button14″
android:layout_width=”60dp”
android:layout_height=”60dp”
android:layout_column=”4″
android:layout_row=”2″
android:text=”1″ />
<Button
android:id=”@+id/button15″
android:layout_width=”120dp”
android:layout_height=”60dp”
android:layout_column=”0″
android:layout_columnSpan=”2″
android:layout_row=”3″
android:text=”0″ />
<Button
android:id=”@+id/button16″
android:layout_width=”60dp”
android:layout_height=”60dp”
android:layout_column=”4″
android:layout_row=”3″
android:text=”=” />
</GridLayout>

今回の記事は以上です。

 

さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。

 

 

[お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。