[Android] TableLayout 意外とうまくできないマス目配置

マス目、格子状に区切ったレイアウトをしたい場合にTableLayoutを使うと簡単にできるようです。どういうわけかうまく行かないことが度々あるので整理してみたいと思います。
 
tablelayout 05 - [Android] TableLayout 意外とうまくできないマス目配置

Android Studio 3.5.3
API 29

 



TableLayout

 
マス目としてはGridViewを使うという選択肢もありますが、要素が固定で簡単に作りたい場合はTableLayoutが合っているかもしれません。

作成の基として TableLayoutタブでくくり、その中に入れたい行数分のTableRowタグを作り、そこにボタン、画像などを入れます。

 
実際に作ってみると分かりやすいでしょう。
 

 

Buttonを並べる

 
ボタンを3x3で9個マス目状に並べてみます。
(MainActivity.javaではデフォルトのままでこのactivity_main.xmlを呼んでいるだけなので割愛します。)
activity_main.xml

 
strings.xml

 
このようになりました。
 
tablelayout 01 - [Android] TableLayout 意外とうまくできないマス目配置
 
これで目的が達成していればこれでいいのですが、いやいや、横幅いっぱいにした方が綺麗だろうというご意見が出てくるわけです。

 

横幅いっぱいにレイアウト

 
横幅いっぱいにするのですが、当然均一にしてほしいという要望があるはずなので、ここはweightを使います。
 

 
これを使ってそれぞれ修正します。

activity_main.xml

 
strings.xml

 

tablelayout 02 - [Android] TableLayout 意外とうまくできないマス目配置
 
うまくいきました。ところでこのようなレイアウトにする場合は画像を使うケースが多いのではないでしょうか。

 

画像を並べる

 
画像の場合はボタンと違って高さがあります。またその画像の縦横の大きさも関係します。
 
例えば256×256 pxelの同じ画像を並べようとするとこのようになります。
 

activity_main.xml

 
strings.xml

 

tablelayout 03b - [Android] TableLayout 意外とうまくできないマス目配置
 
横幅がオーバーしているので、均等になるように以下のweightを設定してみます。
 

 
tablelayout 03 - [Android] TableLayout 意外とうまくできないマス目配置
 
横幅は均等になりましたが、高さがうまくいっていません。

 

高さを均一にする

 
weightを縦方向に設定する方法で試してみます。今回weightをかけるところはTableRowになります。
 

 
これでコードを記述すると

activity_main.xml

 
strings.xml

 

tablelayout 04 - [Android] TableLayout 意外とうまくできないマス目配置
 
高さも均一になりました。ただ高さが均一ですがこの場合、縦方向のスペースが空きすぎではと思います。

 

縦方向に詰める

 
ここまでくるとあまり良い方法が見つかりません、android:shrinkColumnsが効くかと思ったのですが…
安直ですが縦をdpで指定することしか思いつかないですね。ここが結局TableLayoutの限界のような気がします。
 

 

activity_main.xml

 
strings.xml

最初の1列目のみの設定であとは追従してくれました。
 
tablelayout 05 - [Android] TableLayout 意外とうまくできないマス目配置

 

小さい画像

 
実は画像サイズをもっと小さくすればこの辺りはうまくできるようです。
 
256×256から128×128のサイズに変更します。
 
もっとも簡単なコードでやってみます。

activity_main.xml

 
strings.xml

tablelayout 06 - [Android] TableLayout 意外とうまくできないマス目配置
 
なんだか遠回りしたような気がしますが、レイアウトで自動的に拡大縮小してくれるのに期待しすぎてはいけないのでしょう。Out of Memoryにハマる危険性もありますし、これ以上の細かい設定はコーディングでTableLayoutなど使わずに計算して記述するほうが結局は早いのでしょうね
 

誤字脱字、意味不明で分からにゃイ、
などのご意見はこちらから mailフォーム

ブックマークしておくと便利です このエントリーをはてなブックマークに追加

 

アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう。

オンラインスクールは色々ありますが、以下の3つはAndroidが学習できる老舗スクールです。


TECH ACADEMY
Androidアプリコース


こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。


侍エンジニア塾
侍エンジニア塾 無料体験レッスン


とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


CodeCamp
~約8,000名の受講生と80社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp




直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。




シェアする

  • このエントリーをはてなブックマークに追加

フォローする