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

Androidアプリ開発におけるレイアウトのうち【GridLayout】の使い方について初心者向けに解説した記事です。パーツを格子状に並べるときに使用します。TableLayoutと似ていますが、列をまたいでパーツを配置します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

 

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

 

大石ゆかり

田島メンター!!電卓アプリを作っているんですけど、ボタンを等間隔に設置する方法ってないですか〜?

田島悠介

それならGridLayoutがいいよ。格子状にパーツを並べることができるんだ。

大石ゆかり

あ、どうやって使うんですか〜?

 

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の使い方も合わせてご覧ください。

 

大石ゆかり

GridLayout、とても便利ですね〜♪

田島悠介

そうだね。Androidは色々なレイアウトが用意されているから、他のレイアウトも使ってみると良いよ♪

大石ゆかり

はい♪

 

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