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

Androidアプリ開発におけるレイアウトのうち【TableLayout】の使い方について初心者向けに解説した記事です。パーツを格子状に並べるときに使用するレイアウト。HTMLのtableタグと似たように表示されます。

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

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

今回はそのなかの1つである、TableLayout(テーブルレイアウト)を追加する方法と基本的な使い方をご紹介します。

 

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

 

大石ゆかり

田島メンター!!HTMLのtableタグみたいにAndroidアプリのパーツを並べる方法ってないですか〜?

田島悠介

TableLayoutっていうレイアウトを使うと、tableタグと同じようにパーツを設置できるよ。

大石ゆかり

あ、そうなんですか〜!?

 

TableLayoutとは

TableLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。

HTMLのtableタグと似ているので、ホームページ作成をしたことがある人は使いやすいレイアウトかもしれません。

ただし、行をまたいでパーツを配置することはできませんのでご注意ください。

 

 

TableLayoutを配置する

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

TableLayoutは、大枠である「TableLayout」とテーブルの行である「TableRow」でできています。

 

最初にTableLayoutを配置します。

TableLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のTableLayoutを、プレビュー画面までドラッグしましょう。

 

次に、作成する画面には4行必要なので、TableRowを4回プレビュー画面までドラッグして配置します。(行の数によってドラッグする回数を変えてください)

配置をしたらアウトラインで、レイアウトが正しく配置されているか確認をしましょう。

 

 

[PR] Androidアプリの開発で挫折しない学習方法を動画で公開中

TableLayoutにパーツを配置する

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

横の位置は後ほど調整しますので、目的の行に対して順番にパーツを配置できていれば大丈夫です。

 

 

TableLayoutのコードを確認する

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

<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent” >
<TableRow
android:id=”@+id/tableRow1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” >
<Button
android:id=”@+id/button1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”7″ />
<Button
android:id=”@+id/button2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”8″ />
<Button
android:id=”@+id/button3″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”9″ />
<Button
android:id=”@+id/button15″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”/” />
</TableRow>
<TableRow
android:id=”@+id/tableRow2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” >
<Button
android:id=”@+id/button4″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”4″ />
<Button
android:id=”@+id/button5″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”5″ />
<Button
android:id=”@+id/button6″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”6″ />
<Button
android:id=”@+id/button14″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”*” />
</TableRow>
<TableRow
android:id=”@+id/tableRow3″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” >
<Button
android:id=”@+id/button7″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”1″ />
<Button
android:id=”@+id/button8″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”2″ />
<Button
android:id=”@+id/button9″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”3″ />
<Button
android:id=”@+id/button12″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”-” />
</TableRow>
<TableRow
android:id=”@+id/tableRow4″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” >
<Button
android:id=”@+id/button10″
android:layout_width=”wrap_content”
android:text=”0″ />
<Button
android:id=”@+id/button11″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”.” />
<Button
android:id=”@+id/button13″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”+” />
</TableRow>
</TableLayout>

 

 

TableLayout上のパーツの配置を調整する

「0」ボタンは2つのセルをまたいで配置されています。

複数のセルをまたぎたい場合は、「android:layout_span」を追加してください。

<Button
android:id=”@+id/button10″
android:layout_width=”wrap_content”
android:layout_span=”2″
android:text=”0″ />

 

実行すると、この画像のようにボタンが表示されます。

 

また、途中のセルを空白にしたい場合は、「android:layout_column」を追加し、列番号を指定します。

列番号は、一番左から「0,1,2,3…」となっています。

<TableRow
android:id=”@+id/tableRow4″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” >
<Button
android:id=”@+id/button10″
android:layout_width=”wrap_content”
android:layout_span=”2″
android:text=”0″ />
<Button
android:id=”@+id/button13″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_column=”3″
android:text=”+” />
</TableRow>

 

さらに実行すると、この画像のようにボタンが表示されます。

これで完成です。

 

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

 

大石ゆかり

tableタグを同じように設置できますね!

田島悠介

そうだね。GridLayoutもそうだけど一定の間隔でパーツを並べる場面って結構あるから、そういう時に使うと良いね。

大石ゆかり

そうですね〜♪

 

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