Hello, Views (Grid View編)

Grid View | Android Developers

http://developer.android.com/intl/ja/resources/tutorials/views/hello-gridview.html
んー。説明読んでもよくわからない。
とりあえずやってみる。

プロジェクトHelloGridViewを作成します。
アクティビティ名はHelloGridViewとします。
チュートリアルのページから、sample_images.zipをダウンロードし、res/drawable/に展開しておきます。
res/layout/main.xml を開き、以下のように変更します。

1 2 3 4 5 6 7 8 9 10 11 12

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

src/パッケージ名/HelloGridView.javaを以下のように変更します。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

package com.blogspot.logroid.helloGridView;   import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.GridView; import android.widget.Toast;   public class HelloGridView extends Activity {     /** Called when the activity is first created. */     @Override     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();             }         });     } }

新規にクラスファイルを作成します。
クラス名はImageAdapterとします。
スーパークラスはBaseAdapterを指定します。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

package com.blogspot.logroid.helloGridView;   import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.GridView; import android.widget.ImageView;   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) {   // TODO 自動生成されたメソッド・スタブ   return null;  }    public long getItemId(int position) {   // TODO 自動生成されたメソッド・スタブ   return 0;  }    public View getView(int position, View convertView, ViewGroup parent) {         ImageView imageView;         if (convertView == null) {  // if it's not recycled, initialize some attributes             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     }; }

実行します。

左上の画像をタップしてみました

今回出てきたキーワードについて解説。

GridView

ビューをグリッドで表示することが出来るレイアウト

BaseAdapter

基本的なアダプター
xmlで、ビューを配置するのではなく、java側で要素の数に合わせて繰り返しビューを配置したい場合などに利用する
getCount、getItem、getItemId、getViewを実装すれば良いみたい

getCount

BaseAdapterのメソッド
この数の分だけgetViewで作成したオブジェクトを並べる
今回は、画像を定義したmThumbIdsの長さを返している

getItem

対応するオブジェクトを返す
必要ない場合はnullを返す

getItemId

対応するIDを返す
必要ない場合は0を返す

getView

ビューオブジェクトを返すメソッド
getCountの数分呼ばれる