Android-GridView控件網格視圖

在使用網格視圖(GridView)時，首先須要在屏幕上添加GridView組件，一般使用<GridView>標記在XML佈局文件中添加，其基本語法：       

<GridView 
    屬性列表
>
</GridView>

GridView組件所支持的屬性以下:

屬性	描述
columnWidth	設置列的寬度
gravity	設置對齊方式
horizintalSpaing	設置各元素之間的水平間距
numColumns	設置列數,大於1的常數
stretchMode	拉伸模式‍
verticalSpacing	設置各元素之間的垂直間距

 

GridVew和ListVew相似，須要經過Adapter來提供須要顯示的數據。

如圖：咱們須要使用Grid實現以下的效果(即一個圖片和一個標題)：

 

首先，添加主頁面的XML佈局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="4"
        android:stretchMode="columnWidth" >
    </GridView>
</LinearLayout>

其次，每一個表格的佈局,即一個圖片和一個文本

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imgView"
        android:layout_width="wrap_content"
        android:layout_height="70px"
        android:paddingLeft="10px"
        android:scaleType="fitCenter" />

    <TextView
        android:id="@+id/imgTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="5px" />

</LinearLayout>

每項的信息實體:

public class MyGridViewItemInfo {

	private int imgId;
	private String title;
	public int getImgId() {
		return imgId;
	}
	public void setImgId(int imgId) {
		this.imgId = imgId;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
}

自定義Adapter:

public class MyGridViewAdapter extends BaseAdapter{
	
	private final List<MyGridViewItemInfo> infos = new ArrayList<MyGridViewItemInfo>();
	private Context context;
	
	public MyGridViewAdapter(Context context,List<MyGridViewItemInfo> infos){
		this.infos.clear();
		this.infos.addAll(infos);
		this.context = context;
	}

	@Override
	public int getCount() {
		return this.infos.size();
	}

	@Override
	public Object getItem(int arg0) {
		return this.infos.get(arg0);
	}

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

	@Override
	public View getView(int arg0, View view, ViewGroup arg2) {
		if(view == null){
			View view2 = LayoutInflater.from(this.context).inflate(R.layout.grid_view_item, null);
			MyGridViewItemInfo info = (MyGridViewItemInfo)this.getItem(arg0);
			ImageView imageView = (ImageView)view2.findViewById(R.id.imgView);
			imageView.setImageResource(info.getImgId());
			TextView textView = (TextView)view2.findViewById(R.id.imgTitle);
			textView.setText(info.getTitle());
			return view2;
		}
		return view;
	}

}

 

最後：

public class MyGridViewAvtivity extends Activity {

	private final int[] imageleds = new int[] { R.drawable.img01, R.drawable.img02, R.drawable.img03, R.drawable.img04,
			R.drawable.img05, R.drawable.img06, R.drawable.img07, R.drawable.img08, R.drawable.img09, R.drawable.img10,
			R.drawable.img11, R.drawable.img12, R.drawable.img01, R.drawable.img02, R.drawable.img03, R.drawable.img04,
			R.drawable.img05, R.drawable.img06, R.drawable.img07, R.drawable.img08, R.drawable.img09, R.drawable.img10,
			R.drawable.img11, R.drawable.img12 };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.grid_view);

		final GridView gridView = (GridView) findViewById(R.id.gridView);
		List<MyGridViewItemInfo> infos = new ArrayList<MyGridViewItemInfo>();
		for (int i = 0; i < imageleds.length; i++) {
			MyGridViewItemInfo info = new MyGridViewItemInfo();
			info.setImgId(imageleds[i]);
			info.setTitle("這是標題" + i);
			infos.add(info);
		}
		MyGridViewAdapter adapter = new MyGridViewAdapter(this, infos);
		gridView.setAdapter(adapter);
	}

}