[Android] GridView的基本使用教學

GridView是一種網格狀的二維視覺元件，將item依照順序放置於網格中顯示，它繼承了AbsListView這個類別，因此不難想像它的使用方式與ListView一樣，都是透過setAdapter的方式將data與View呈現在GridView中。


程式碼說明

1.在Layout XML中建立GridView，設定其外觀屬性，它將會影響item的呈現效果，以下列舉幾個常用的屬性：
(1) numColumns-一列要顯示的item數量
(2) verticalSpacing-列與列之間的距離
(3) horizontalSpacing-行與行之間的距離
(4) columnWidth-設定行的固定寬度

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >
  <GridView 
    android:id="@+id/image_grid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="3"
    android:verticalSpacing="5dp"
    android:horizontalSpacing="5dp"
    android:columnWidth="120dp"
    android:stretchMode="columnWidth"
    android:gravity="center"    
  />
</LinearLayout>

2.建立繼承BaseAdapter類別，有許多需要實作的方法，getView()是其中最重要的，它負責將特定位置的資料轉換為在GridView中呈現的View。

package com.grid;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;

public class GridViewAdapter extends BaseAdapter {
 
Integer[] data={R.drawable.image1,R.drawable.image2,
                R.drawable.image3,R.drawable.image4,
                R.drawable.image5,R.drawable.image6,
                R.drawable.image7,R.drawable.image8};
private Context context;
 
public GridViewAdapter(Context context){
  this.context = context;
}
 
@Override
public int getCount() {
  return data.length;
}

@Override
public Object getItem(int position) {
  return data[position];
}

@Override
public long getItemId(int position) {
  return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
  ImageView image;
  if(convertView==null){
    image = new ImageView(context);
    image.setLayoutParams(new GridView.LayoutParams(120, 120));
    image.setScaleType(ScaleType.CENTER_CROP);
  }else{
    image = (ImageView)convertView;
  }
  image.setImageResource(data[position]);
  return image;
}

}

3.執行setAdapter()

package com.grid;

import android.app.Activity;
import android.os.Bundle;
import android.widget.GridView;

public class GridViewDemoActivity extends Activity {
    
@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
        
  //get grid view reference
  GridView grid = (GridView)findViewById(R.id.image_grid);
  grid.setAdapter(new GridViewAdapter(getApplicationContext()));
}
}