GridLayoutとtableLayoutのメモ

時間が出来たので、今更ながらにAndroidプログラミングの勉強も兼て電卓アプリを作成してみた。

 

作成したといっても基本的な機能を手探りで作って、画面はとりあえずボタンを配置してTextViewで数値を表示しているだけのテストアプリなので、公開しているわけではないのですが。

 

この電卓アプリ作成で「tableLayout」と「GridLayout」の違いと、行をまたぐ時のちょっとしたこつが分かったのでメモしておきます。

 

まぁ一回作ってみたら誰でも分かる事だけど、初めてだとちょっと調べるのに時間がかかるのでメモ的にブログを書いてみたのです。ネタもないしw

 

 


 

 

GridLayoutのrowSpanとcolumnSpan、行と列の占有の初歩的なメモ書き

 

まず、GridLayoutAndroid 4.0以上から使えるレイアウトで、htmlのテーブルのような格子状のデザインを作れるのですが、列と行を数字で指定してボタンや画像などを簡単に配置出来るのです。

 

 

行を指定 → android:layout_column="0"

 

 

 

列を指定 → android:layout_row="0"

 

 

 

そして、2行にまたがってボタンを配置したいのなら

 

 

 

android:layout_rowSpan="2" ← 2行を占有

 

 

2列にまたがってボタンを配置したいなら

 

 

android:layout_columnSpan="2" ← 2列を占有

 

 

とホームページのテーブルと同じように指定するだけで配置出来た。

 

 

 

とまとじゅーすのブログ-電卓アプリ縦レイアウト

とまとじゅーすのブログ-電卓アプリ縦GridLayout

 

 

 

全てのボタンを1つのGridLayoutの中に配置して指定するだけで完結出来た。

 

 

ただし、例えば「android:layout_width="60dp"」の様にdp等で横幅を指定していると、「layout_columnSpan="2"」と指定しても反映されなかった。

 

 

なので、幅の指定の優先度は「android:layout_width=""」の方が上のようなので、列幅や行幅を指定する時はdp等もレイアウトにあった幅に指定する必要があるという事が分かった。

 

 

 


 

 

 

tableLayoutの列と行の占有についてのメモ書き

 

さて、tableLayoutなのですが、GridLayoutと同じようにrowSpanとcolumnSpanで行と列の占有幅を指定出来ると思ったんだけど、実は横、つまり列幅は指定出来るのけど行幅は指定出来ないのです。

 

つまり、htmlのテーブルのように指定出来ないので、少し工夫する必要が出て来るのです。

 

それで、調べたり試行錯誤を少々繰り返した結果、LinearLayoutと組み合わせるのがシンプルで分かりやすいと個人的には思ったのでメモしておきます。

 

まぁ下の電卓アプリのレイアウトの図を見てもらえば直ぐに分かると思います。

 

 

とまとじゅーすのブログ-電卓アプリ横レイアウト

とまとじゅーすのブログ-電卓アプリ横tableLayout

 

 

TableLayoutの中にTableLowがあり、その中にボタンを配置するのですが、そのままだと縦方向に2行分の配置が出来ないので、まずはLinearLayoutで「android:orientation="vertical"」と縦のレイアウトを指定し、通常のボタンを2つ配置。

 

 

2行分配置したいボタンだけLinearLayoutの外に出して、高さをfill_parentに指定する事で2行分占有するというレイアウトにしています。

 

 

 

ところでこの電卓アプリは背景画像やボタンを好きな物に変えたいと思ったから作ってみたのです。
自作だからキャラクターの画像とかを背景やボタンに配置出来るしw

 

 

 

 

もしかしたらmicroSDの中の画像を読み込んで配置出来るようにしたり、レイアウトを変更して機能も少し追加してうぷするかもしれない。

 

 

 

 


 

 

 

どうでもいい日記

 

 

さて、3月から未経験の仕事と言うか職種で働いているので、今以上に仕事で覚えなくちゃいけない事がたくさん増えるかもしれないし、通勤時間が少々長くなってるので、平日に関してはしばらく自由な時間が取れない日々が続きそうだ。

 

 

なので、漢詩アプリ等は来月以降になりそうです。lol

ブログ移行してます → Newとまとじゅーすのブログ