Androidアプリ開発のTableLayoutの使い方【初心者向け】
Androidアプリ開発におけるレイアウトのうち【TableLayout】の使い方について初心者向けに解説した記事です。パーツを格子状に並べるときに使用するレイアウト。HTMLのtableタグと似たように表示されます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,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>
実は私も!?独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか?
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
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では初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。

プログラミングを独学していて、このように感じた経験はないでしょうか?
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)