Androidアプリ開発のGridLayoutの使い方【初心者向け】
Androidアプリ開発におけるレイアウトのうち【GridLayout】の使い方について初心者向けに解説した記事です。パーツを格子状に並べるときに使用します。TableLayoutと似ていますが、列をまたいでパーツを配置します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,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では初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
