Home> Tutorial > Hello, Views > Grid View

Grid View

GridViewクラスは、ViewGroupクラスを継承したものであり、2次元のスクロール可能なグリッドにアイテムを表示するものです。

本チュートリアルでは、画像のサムネイルを格子状に並べたものを作成します。
画像のサムネイルを選択するとトースト(Toast）でメッセージが表示されるようにします。
（トースト：画面下にふわっと表示されてフェードアウトするテキストのことです。）

GridViewの使い方サンプル

「HelloGridView」という名前のAndroidプロジェクトを作成します。
サンプル画像をダウンロードしてきます。ダウンロードしてきた画像は、「res/drawable/」ディレクトリを作成し、格納してください。

デフォルトでは、高解像度・中解像度・低解像画面用に「drawable-hdpi」「drawable-mdpi」「drawable-ldpi」という3つのディレクトリが作成されており、各ディレクトリに画像を配置すれば、解像度によって使用する画像を切替可能です。

「res/layout/main.xml」ファイルを開き、以下のように修正します。


<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/gridview"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:columnWidth="90dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>

GridViewはスクリーン全体で表示されます。

Javaソースを開き、以下のようにonCreate()メソッドを修正します。

public void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    GridView gridview = (GridView) findViewById(R.id.gridview);
    gridview.setAdapter(new ImageAdapter(this));
    gridview.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView parent, View v, int position, long id) {
            Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show();
        }
    });
}

「main.xml」ファイルがレイアウトとして設定された後、GridViewがfindViewById(int)メソッドによって得られます。
setAdapter()メソッドでは、グリッドに画像を表示させるためにカスタムアダプタ（ImageAdapterクラス）をセットしています。
ImageAdapterクラスは次で作成します。

グリッドがクリックされた際に動作させるためには、setOnItemClickListener()メソッドにAdapterView.OnItemClickListenerのインスタンスを渡します。
この匿名インスタンスは、選択された画像の0からはじまる位置番号をトースト（Toast）で表示させるonItemClick() メソッドを定義しています。

BaseAdapterクラスを継承した「ImageAdapter.java」を以下のように作成します。

public class ImageAdapter extends BaseAdapter {    private Context mContext;
    public ImageAdapter(Context c) {
        mContext = c;
    }
    public int getCount() {
        return mThumbIds.length;
    }
    public Object getItem(int position) {
        return null;
    }
    public long getItemId(int position) {
        return 0;
    }
    // Adapterから参照される新しいImageViewを作成
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {  // インスタンスが生成されていない場合、作成
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
        } else {
            imageView = (ImageView) convertView;
        }
        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }
    // references to our images
    private Integer[] mThumbIds = {
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7
    };
}

親クラスであるBaseAdapterクラスを継承してメソッドを実装していきます。
コンストラクタとgetCount()メソッドは特に説明する必要もないと思います。
getItem(int)メソッドは、Adapterで指定された場所のオブジェクトを返却すべきですが、この例ではnullを返却するようにしています。
同様に、getItemId(int)メソッドは、選択されたアイテムの行番号を返却すべきですが、この例では不要なので0を返却しています。

getView()メソッドは必須です。
このメソッドは画像ごとに新しいViewを作成し、ImageAdapterに追加しています。
このメソッドが呼び出されると、ImageViewのインスタンス有無を判断し、インスタンスが作成されていない場合はインスタンスを作成します。

setLayoutParams(ViewGroup.LayoutParams) メソッドは、Viewの高さと幅を設定します。各画像は、画面の大きさに従って適切にリサイズ・トリミングが行われます。
setScaleType(ImageView.ScaleType)メソッドは、中心に向かってトリミングされることを定義しています。
setPadding(int, int, int, int)メソッドは、画像の周囲の空白サイズを定義します。

getView()メソッドに渡されたViewがnullでなければ、作成済のViewインスタンスを再利用してImageViewが初期化されます。

mThumbIds配列は、画像リソース名（R.drawable.sample_x）を定義します。