Android應用開發入門（三十）UI控件GridView的使用

前言

　　這篇文章介紹一下Android平台下，GridView控件的開發。針對GridView控件的一些常用屬性、方法，以及注意事項進行講解，最後將以一個Demo展示GridView控件的使用。

GridView

　　GridView一個以二維網格的格式展示數據的控件，它與ListView具有相同的繼承結構，同樣直接繼承與AbsListView，並且使用一個ListAdapter接口的適配器來綁定數據。其實它的展示效果有點類似於TableLayout布局，可以看看另外一篇 http://www.fengfly.com/plus/view-213369-1.html。相信有過UI編程經驗的人，都對GridView這個控件不會陌生。

　　GridView效果圖：

　　對於GridView而言，有一些特定的屬性需要了解一下，Android也為這些屬性提供了對應的getter/setter方法：

• android:columnWidth：指定每一列的固定寬度。
• android:gravity：指定每個填充項的填充方向。
• android:horizontalSpacing：指定水平行之間的間距。
• android:verticalSpacing：指定垂直列之間的間距。
• android:numColumns：指定列數。

 　　對於android:numColumns屬性而言，如果設定為1，可以當成一個ListView使用。而GridView的方法與事件，大部分和ListView類似，可以參見另外一篇講解ListView，這裡不再詳解了。

 數據填充

　　GridView和ListView一樣，都需要通過一個ListAdapter的適配器來填充數據。對於復雜的數據，一般會使用選擇繼承BaseAdapter。對於一些簡單的數據樣式，通過XML布局展示的，可以使用SimpleAdapter。它們都是比較常用的ListAdapter子類。

　　下面通過一個Demo簡單講解一下GridView的使用。

　　布局代碼：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context=".MainActivity" > 
 
    <GridView 
        android:id="@+id/gridview" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:horizontalSpacing="6dp" 
        android:numColumns="3"          
        android:padding="20dp" 
        android:verticalSpacing="6dp" /> 
 
    <ImageView 
        android:id="@+id/iamgeview" 
        android:layout_width="match_parent" 
        android:layout_height="150dp" /> 
 
</LinearLayout> 

　　實現代碼：

package com.bgxt.gridviewdemo;  
 
import java.util.ArrayList;  
import java.util.HashMap;  
import java.util.List;  
import java.util.Map;  
 
import android.os.Bundle;  
import android.app.Activity;  
import android.view.Menu;  
import android.view.View;  
import android.widget.AdapterView;  
import android.widget.GridView;  
import android.widget.ImageView;  
import android.widget.SimpleAdapter;  
import android.widget.AdapterView.OnItemClickListener;  
import android.widget.AdapterView.OnItemSelectedListener;  
 
public class MainActivity extends Activity {  
 
    private ImageView imageView;  
    private int[] resIds = new int[] { R.drawable.bmp1, R.drawable.bmp2,  
            R.drawable.bmp3, R.drawable.bmp4, R.drawable.bmp5, R.drawable.bmp6,  
            R.drawable.bmp7, R.drawable.bmp8, R.drawable.bmp9, R.drawable.bmp10 };  
 
    @Override 
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        GridView gridView = (GridView) findViewById(R.id.gridview);  
        imageView = (ImageView) findViewById(R.id.iamgeview);  
        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();  
        for (int i = 0; i < resIds.length; i++) {  
            Map<String, Object> cell = new HashMap<String, Object>();  
            cell.put("imageview", resIds[i]);  
            list.add(cell);  
        }  
 
        SimpleAdapter simpleAdapter = new SimpleAdapter(MainActivity.this,  
                list, R.layout.cell, new String[] { "imageview" },  
                new int[] { R.id.ivCell });  
        gridView.setAdapter(simpleAdapter);  
        gridView.setOnItemClickListener(itemClick);  
        imageView.setImageResource(resIds[0]);  
    }  
 
    @Override 
    public boolean onCreateOptionsMenu(Menu menu) {  
        // Inflate the menu; this adds items to the action bar if it is present.  
        getMenuInflater().inflate(R.menu.main, menu);  
        return true;  
    }  
 
    private OnItemClickListener itemClick = new OnItemClickListener() {  
 
        @Override 
        public void onItemClick(AdapterView<?> parent, View view, int position,  
                long id) {  
            // TODO Auto-generated method stub  
            imageView.setImageResource(resIds[position]);  
        }  
    };  
 
} 

　效果展示：

 　　源碼下載