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

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

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

 

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

 

 

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

 

 

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