【Android】GridViewの余白を整えるための試行錯誤
こんにちわ。pencoです。
先日GridViewにカスタムのViewをセットしたら、左右の余白が均等にならず、痛い目にあったので、その時のことを書きたいと思います。
目標
まず、目指す形はこんな感じです。
横5列、縦20行で100個のViewをGridViewを使って並べています。
左右の余白を少し多めにとって、真ん中にぎゅっと並ぶようにしたいです。
作ってみよう
では作ってみます。
基本のレイアウト
GridにセットするカスタムのViewは以下の通りです。
grid_item.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" > <ImageView android:id="@+id/conditionsImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="fitXY" android:src="@drawable/cell_empty" /> <TextView android:id="@+id/qNum" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="2dp" android:text="Q01" android:textColor="#000000" /> </RelativeLayout>
メインのレイアウトは、まずこんな感じに作ります。
main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#f4f2eb" > <GridView android:id="@+id/gridView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numColumns="5" > </GridView> </RelativeLayout>
行間を空ける
行と行の間が空いてないですね。
その割に列と列の間に余白が出来ているし、左に偏ってますね。
そこで、下記のようにGridViewの設定を修正します。
<GridView android:id="@+id/gridView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numColumns="5" android:verticalSpacing="10dp" android:listSelector="@drawable/clear_grid" > </GridView>
@drawable/clear_grid は、GridViewのアイテムのデフォルトの背景画像を使用しないようにするためのxml で、こちらのサイト様を参考にさせて頂きました。
列間を調整
行間は空きましたが、列間の余白は空いたままです。
ちょっとこのままでは分かりにくいので、grid_item.xml の各Viewの背景を塗り分けてみることにします。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ff0000" > <ImageView android:id="@+id/conditionsImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ffff00" android:scaleType="fitXY" android:src="@drawable/cell_empty" /> <TextView android:id="@+id/qNum" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="2dp" android:background="#ff00ff" android:text="Q01" android:textColor="#000000" /> </RelativeLayout>
気持ち悪い配色ですみません。
えー、これで見ると、行間の余白はGridViewで、列間の余白はアイテム(中身に設定した)のViewによるものだということが判ります。
そこで、こちらのサイト様を発見しました。
android:stretchMode についてはなにも設定していないので、デフォルトの columnWidth が設定されていることになります。
GridView のコードを見ると、
mColumnWidth = requestedColumnWidth + spaceLeftOver / mNumColumns;
となっているので、mColumnWidth つまり、アイテムのViewのWidth が余白込みの値に設定されることになります。そのため、列間の余白はアイテムのViewによるものになってたんですねー。

実際に計算してみます。
requestedColumnWidth = 75
mNumColumns = 5
spaceLeftOver は全体の幅が480なので、requestedColumnWidth*mNumColumns を引いて
480 – (75*5) = 105 ということになります。
そこで、上記式を計算すると、
mColumnWidth = 75 + 105 / 5
となり 96 になります。96px は2つ前の図で赤く塗られたアイテムのView全体の幅と一致するので、mColumnWidth が余白込みの値に設定されていたのだと分かります。
な…なんとなく伝わりましたでしょうか…?
センター合わせにして完成
アイテムのViewの幅が変わってしまうのなら、中身をセンターに揃えればいいじゃない。と、いうことで、
grid_item.xmlを変更します。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:id="@+id/conditionsImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:scaleType="fitXY" android:src="@drawable/cell_empty" /> <TextView android:id="@+id/qNum" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@id/conditionsImage" android:layout_alignTop="@id/conditionsImage" android:layout_marginLeft="2dp" android:text="Q01" android:textColor="#000000" /> </RelativeLayout>
このままだと、全体に広がった感じになってしまうので、GridView 全体にもマージンをつけて、真ん中にぎゅっとした感じにします(spaceLeftOver に使われる値が減るってことですね)
<GridView android:id="@+id/gridView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numColumns="5" android:verticalSpacing="10dp" android:layout_marginBottom="10dp" android:layout_marginLeft="24dp" android:layout_marginRight="24dp" android:layout_marginTop="10dp" android:listSelector="@drawable/clear_grid" > </GridView>
完成!!
コメントをどうぞ