AndroidでウィジェットTableLayoutを使って表を作ろうとしていて、どこから手をつければいいかわからず戸惑っていませんか。
この記事を読むと、最小限のコードで見やすい表を作る手順や、実務で役立つレイアウト調整のコツ、動的に行やセルを追加する方法まで、段階を追って身につけられます。
| 項目 | 内容 |
|---|---|
| 実践的な手順とコード | 動くサンプルコードを使って実際に表を作る手順を丁寧に解説します。 |
| レイアウト調整のコツ | 列幅や重み付け、セルの整列など現場で役立つ具体例を紹介します。 |
| 動的操作とパフォーマンス | ランタイムでの行追加やスクロール負荷の対策まで触れて安定した動きを作ります。 |
ここから順に試していけば短時間で実用的な表が作れるようになりますので、肩の力を抜いて楽しみながら進めてください。
Android博士最初は誰でも迷いますが大丈夫です、小さな一歩を重ねれば確実に使えるようになりますので気軽に取り組んでくださいね。
AndroidでTableLayoutを使って表を作る基本手順
Android博士TableLayoutはシンプルで扱いやすい表レイアウトです。最初はXMLで固定表を作ってから、慣れたらKotlinで動的に生成する流れがおすすめです。
TableLayoutを使う基本は二つのパターンに分かれます。XMLでセルを直書きする方法と、KotlinでTableRowをコード生成して追加する方法です。
- XMLでTextViewやButtonなどを並べる固定表。デザインが決まっている少量データに向いています。
- KotlinでTableRowとセルを生成する動的表。実行時にデータが変わる場合や一覧表示に便利です。
どちらを選ぶかは用途次第です。小さな設定表ならXML、大量や頻繁に更新するデータなら動的生成を検討してください。
XMLでTextViewやButtonなどのウィジェットを使った固定の表を作るパターン
XMLで固定の表を作る場合はres/layout内のレイアウトファイルにTableLayoutを配置します。TableRowの中にTextViewやButtonを並べて各セルを構成します。
この方法はレイアウトプレビューで見たまま調整できるので安心感があります。見た目を細かく整えたいときや、操作が少ない静的な表に向いています。
AndroidStudioのres/layout/activity_main.xmlでTableLayoutを追加する場所
AndroidStudioでapp/src/main/res/layout/activity_main.xmlを開きます。既存のルートレイアウト内を確認してください。
ルートレイアウトの直下にTableLayoutを配置します。android:idやandroid:layout_width、android:layout_heightを指定してください。
必要に応じてandroid:stretchColumnsやandroid:shrinkColumns属性を使って列の伸縮を指定すると見た目が安定します。
XMLにTableRowとウィジェットを並べて各セルを定義する手順
TableLayoutの中にTableRowを順に並べます。各TableRowが表の1行になります。
TableRowの中にTextViewやButtonなどを配置してセルを作ります。幅や高さはwrap_contentやmatch_parentで調整します。
セルを結合する場合はandroid:layout_span属性を使います。スタイルやpaddingで読みやすさを整えてください。
Kotlinでデータから動的にTableRowとウィジェットを追加するパターン
Kotlinで動的に表を作るパターンは、データの数が変わる場合やAPIから取得したリストを表示するときに便利です。TableRowを生成して必要なウィジェットを作り、順にaddViewしていく流れになります。
大量データの場合はRecyclerViewを検討したほうが効率的ですが、少量のデータで罫線付きやセル内にボタンが必要な場合はTableLayoutでの動的生成が手軽です。UI操作は必ずUIスレッド上で行ってください。
ActivityまたはFragmentでTableLayoutをfindViewByIdする手順
ActivityではonCreate内でfindViewById(R.id.テーブルのID)を使ってTableLayoutを取得します。ViewBindingを使っている場合はbinding.tableLayoutでも取得できます。
FragmentではonViewCreated内でview.findViewByIdかViewBindingのbinding.root経由で取得します。ライフサイクルに注意してnull参照を避けてください。
KotlinでTableRowとセルウィジェットを生成しループでaddViewする手順
データリストをforループで回してTableRowインスタンスを生成します。各行ごとにレイアウトパラメータを設定してください。
TextViewやButtonをコードで作り、レイアウトパラメータを与えたうえでTableRow.addViewで追加します。クリック処理が必要ならここでリスナーを設定します。
TableLayout.addViewでTableRowを追加します。表示を更新したいときは必要に応じてremoveAllViewsして再生成すると確実です。
Androidで列幅と比率を調整して見栄えを整える方法
表の見栄えを整えるときは列幅をただ決めるだけでなく画面サイズや中身の長さを考えて調整することが大事です。どの列を優先して見せるかを決めるだけで設計がぐっと楽になります。
主な手法はlayout_weightで比率を決める方法とshrinkColumnsとstretchColumnsで自動調整する方法と固定幅やwrap_contentで制御する方法です。状況に応じて使い分けると見た目と保守性が両立します。
実機や複数解像度で必ず確認して想定外のはみ出しや余白を潰していってください。ちょっとした調整の繰り返しで安定した表示が得られます。
- layout_weightで列の比率を厳密に決める方法。
- shrinkColumnsとstretchColumnsで自動的に詰めたり伸ばしたりする方法。
- 固定幅やwrap_contentで単純に見せる方法。
layout_weightでセルウィジェットの幅比率を決めるパターン
layout_weightはTableRow内の子ビューに残り幅を比率で分配させる仕組みです。android:layout_widthを0dpにしてandroid:layout_weightに値を入れると各セルが比率に応じた幅を取ります。
比率は数値の比で決まり小数や整数で指定できます。長いテキストが入るセルにはellipsizeやmaxLinesを併用すると見切れの印象を抑えられます。
XMLでセルにandroid:layout_weightとwidth=0dpを設定する場所と書き方
| 項目 | 内容 |
|---|---|
| 属性 | android:layout_width=”0dp”とandroid:layout_weightを各セルに設定する |
| 設定場所 | TableRowの直下にある各ビューに書く |
| 書き方例 |
shrinkColumnsとstretchColumnsで自動調整するパターン
shrinkColumnsは必要に応じて列幅を詰める機能でstretchColumnsは余った幅を指定列に割り当てる機能です。属性にはカンマ区切りで列番号やアスタリスクを指定でき動的に調整できます。
可変長テキストや狭い画面での調整に強く簡単に使えるのが利点です。ただしlayout_weightと混ぜると意図した通りにならないことがあるので片方に絞って試すのがおすすめです。
TableLayoutのshrinkColumnsとstretchColumns属性をXMLで指定する方法
| 項目 | 内容 |
|---|---|
| 属性指定例 | android:shrinkColumns=”1,2″android:stretchColumns=”0″ |
| XML設置場所 | TableLayoutタグの属性として追記する |
| 実用ポイント | 全列に効かせたいときはアスタリスク”*”を使い挙動を確認してから運用する |
応用AndroidでTableLayoutの大きな表をスクロールとパフォーマンス良く表示する方法
大きな表を端末で気持ちよく見せるにはスクロールのしやすさと描画負荷の両方を考えると安心です。ここでは現場で使えるシンプルな選択肢とちょっとした工夫をやさしく紹介します。
狭い範囲の表ならScrollViewやHorizontalScrollViewでラップするだけで手早く動きますが行数が増えると描画が重たくなります。その場合はRecyclerViewへ置き換えて行単位で再利用しDiffUtilやPagingを使うと安定して速くなります。セル高さを固定するとさらに描画コストが下がります。
ScrollViewやHorizontalScrollViewでスクロール表示するパターン
ScrollViewとHorizontalScrollViewでTableLayoutをラップする手は最も手軽です。XMLで親にScrollViewまたはHorizontalScrollViewを置き、その中にTableLayoutを入れるだけで縦横のスクロールを実現できます。
ただしラップ方式は全ての行が一度にレイアウトされるため行数が増えるとメモリとCPUの負担が大きくなります。行数が数百以上になる場合はRecyclerViewに切り替えて表示と再利用を任せると安定します。
縦長はScrollView、横長はHorizontalScrollViewでTableLayoutをラップする手順
親にScrollViewを置きTableLayoutをその子にするだけで縦スクロールが有効になります。レイアウトはXMLで完結するので実装が早いです。
親にHorizontalScrollViewを置きTableLayoutを子にすると横スクロールが有効になります。列が多いレイアウトに向いています。
行数が増えたら描画が重くなるためセル高さは固定にし不要なネストは避けてください。負荷が大きければRecyclerViewに切り替えてください。
大量データはRecyclerViewで代替してパフォーマンスを確保するパターン
大量データを扱う場面ではRecyclerViewにすることでパフォーマンスがぐっと安定します。ViewHolderパターンでビューを再利用するためスクロール時のオーバーヘッドが小さくなります。
行ごとにTableRow相当のレイアウトを用意してAdapterで差し替えればTableLayoutの役割を置き換えられます。DiffUtilやPagingライブラリを使うと更新やページングが滑らかになります。
RecyclerViewでTableRow相当のレイアウトを作りAdapterで差し替える手順
TableRow相当の横並びセルを持つitem_row.xmlを作ります。ConstraintLayoutやLinearLayoutで列を整列させ高さを固定してください。
ViewHolderでビュー参照を保持しAdapterでonBindViewHolderにデータをマッピングします。必要な場合はViewBindingを使うとミスが減ります。
Listの更新にはDiffUtilを使い変更差分だけ反映させます。大量データはPagingで分割読み込みするとメモリ使用が安定します。
よくある質問
- TableLayoutとTableRowの違いは何か
TableLayoutは行を縦に並べるコンテナで、TableRowが各行の中身を持つビューです。列幅やセルの配置はTableRow内の子ビューに対して設定するという感覚で使うとわかりやすいです。
- 列の幅を均等にしたい場合はどうするか
XMLでandroid:stretchColumns=”*”やandroid:shrinkColumnsを使うと手軽に調整できます。より細かな配分が必要なときはTableRow内の子にlayout_weightを指定すると細かく制御できます。
- 行が多くてパフォーマンスが心配なときはどうするか
行が数十件以上になるとTableLayoutだけでは描画負荷が高くなることがあります。大量データはスクロール性能とメモリ効率に優れるRecyclerViewに切り替えると扱いやすくなります。
- セルを横に結合したいときはどうするか
子ビューにandroid:layout_span属性を指定すると横方向に結合できます。複雑なレイアウトが必要な場合はTableRow内にさらにレイアウトを入れて分割して扱うと調整が楽になります。
まとめ
ここまで読んでくれてありがとう。TableLayoutは行と列が少ない固定的な表を素早く作るのに向いています。TableRowを使い、セルはlayout_weightやpaddingで調整すると見た目が整います。
動的にデータを追加したいときはActivityやFragment側でTableRowを生成してaddViewする方法がわかりやすいです。ただし行数が多くなると描画コストが上がるため、一覧が多い場合はRecyclerViewでグリッド表示にする方が軽やかに動きます。アクセシビリティ対応として各セルにcontentDescriptionを設定することを忘れないでください。
スタイルはstyles.xmlやテーマでまとめると保守が楽になります。端末幅の違いはlayout_weightやminWidthで吸収しつつ、必要ならresponsiveなレイアウトに切り替えてください。まずは小さな表を実装して挙動を確認しながら調整していくと安心です。