お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

【Android】GridViewの余白を整えるための試行錯誤

こんにちわ。pencoです。
先日GridViewにカスタムのViewをセットしたら、左右の余白が均等にならず、痛い目にあったので、その時のことを書きたいと思います。
 

目標

 
まず、目指す形はこんな感じです。
横5列、縦20行で100個のViewをGridViewを使って並べています。
左右の余白を少し多めにとって、真ん中にぎゅっと並ぶようにしたいです。
device-2014-02-12-125823

作ってみよう

 
では作ってみます。

基本のレイアウト

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>

 
この状態で実行してみます。
grid01

行間を空ける

行と行の間が空いてないですね。
その割に列と列の間に余白が出来ているし、左に偏ってますね。
そこで、下記のように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 で、こちらのサイト様を参考にさせて頂きました。

GridViewの項目の余白が消せない原因と解決法

これでもう一度実行してみます。
grid02
 

列間を調整

行間は空きましたが、列間の余白は空いたままです。
ちょっとこのままでは分かりにくいので、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>

 
grid03

気持ち悪い配色ですみません。
えー、これで見ると、行間の余白はGridViewで、列間の余白はアイテム(中身に設定した)のViewによるものだということが判ります。
 
そこで、こちらのサイト様を発見しました。

GridViewのstretchModeについて

android:stretchMode についてはなにも設定していないので、デフォルトの columnWidth が設定されていることになります。
GridView のコードを見ると、

mColumnWidth = requestedColumnWidth + spaceLeftOver / mNumColumns;

となっているので、mColumnWidth つまり、アイテムのViewのWidth が余白込みの値に設定されることになります。そのため、列間の余白はアイテムのViewによるものになってたんですねー。

grid04

実際に計算してみます。
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>

 
完成!!

コメントをどうぞ

メールアドレスは公開されません。* が付いている欄は必須項目です。


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00