GridViewはデータをグリッド状(格子状)に表示するためのビューです。
画像などのデータをサムネイルのように表示したい場合に利用できます。
詳細は続きからどうぞ。
GirdViewで扱うデータはBaseAdapterを継承したクラスを使って取得します。
以前紹介したGalleryと同じような手順になりますので、併せてご覧下さい。
レイアウトファイル
まず、レイアウトファイルでGridViewを定義します。
<?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/myGrid" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:numColumns="auto_fit" android:columnWidth="60dp" android:stretchMode="columnWidth" android:gravity="center" />
BaseAdapterの拡張
res/drawableに保存してある画像ファイルを返すようにBaseAdapterを拡張します。
下記の4つのメソッドをオーバーライトしています。
getViewメソッド
getViewメソッドをオーバーライドして画像を表示するためのImageViewを返すようにします。
public View getView(int position, View convertView, ViewGroup parent) { // 画像表示用のImageView ImageView imageView; // convertViewがnullならImageViewを新規に作成する if (convertView == null) { imageView = new ImageView(gridView.this); imageView.setLayoutParams(new GridView.LayoutParams(50, 50)); // convertViewがnullでない場合は再利用 } else { imageView = (ImageView) convertView; } // ImageViewに画像ファイルを設定 imageView.setImageResource(mThumbIds[position]); // ImageViewを返す return imageView; }
setImageResourceメソッドで指定しているmThumbIdsは表示する画像のリソースIDを定義したint配列です。
何番目の要素かを示す引数positionをインデックスにすることで表示する画像のリソースIDを取得できます。
private Integer[] mThumbIds = { R.drawable.img_01, R.drawable.img_02, R.drawable.img_03, (以下繰り返し...) };
また、convertViewがnullでない場合はImageViewを再利用することで無駄な処理をさせないようにしています。
getCountメソッド
getCountメソッドでは用意した画像ファイルの数を返すようにmThumbIdsの大きさを返すようにしています。
public final int getCount() { // mThumbIdsの大きさを返す return mThumbIds.length; }
getItemメソッドとgetItemIdメソッド
getItemメソッドとgetItemIdメソッドは今回のサンプルでは使用していないので、とりあえずpositionを返すようにしています。
public final Object getItem(int position) { return position; } public final long getItemId(int position) { return position; }
setAdapterでアダプタを設定する
最後にGridViewにsetAdapterを設定して実際に画像を表示します。
// グリッドにアダプタを設定する mGrid = (GridView) findViewById(R.id.myGrid); mGrid.setAdapter(new myAdapter());