【Android 开发】：UI控件之 GridView 网格控件的使用

1. GridView 概要

    GridView 控件用于显示一个网格图像，GridView 主要是用在一些相册的布局显示图片。

    GridView 采用的是二维表的方式显示单元格，就需要设置二维表的行和列。设置 GridView 的列可以使用 <GridView> 标签的 columnWidth 属性。也可以使用GridView类的setColumnWidth方法来设置列数，GridView中的单元格会根据列数自动拆行显示，因此不需要设置GridView的行数，但是需要设置android:numColumns属性。否则GridView只会显示一行。

2. GridView 网格控件显示相册

1) 布局文件

<?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="horizontal" >

    <GridView
        android:id="@+id/gridview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:horizontalSpacing="6dp"
        android:numColumns="4"
        android:padding="20dp"
        android:verticalSpacing="6dp" />
    
    <ImageView android:id="@+id/imageview"
        android:layout_width="fill_parent"
        android:layout_height="150dp"/>

</LinearLayout>

2) 单元格布局文件

<?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/imageview"
	    android:layout_width="48dp"
	    android:layout_height="48dp"/>
    
</LinearLayout>

3) 程序主要文件

public class GridViewDemo extends Activity implements OnItemSelectedListener, OnItemClickListener {

    private ImageView imageView;
    private GridView gridView;
    private int[] resIds = new int[] {
            R.drawable.item1, R.drawable.item2, R.drawable.item3, R.drawable.item4,
            R.drawable.item5, R.drawable.item6, R.drawable.item7, R.drawable.item8,
            R.drawable.item9, R.drawable.item10, R.drawable.item11, R.drawable.item12,
            R.drawable.item13, R.drawable.item14, R.drawable.item15, R.drawable.item16,
    };

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        initComponent();

        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(GridViewDemo.this, list, R.layout.cell,
                new String[] {
                        "imageview"
                }, new int[] {
                        R.id.imageview
                });
        gridView.setAdapter(simpleAdapter);
        gridView.setOnItemClickListener(this);
        gridView.setOnItemSelectedListener(this);        
        imageView.setImageResource(resIds[0]);

    }

    //当用户选择或者点击图片的时候，让这些图片产生效果
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        // TODO Auto-generated method stub
        imageView.setImageResource(resIds[position]);
    }

    @Override
    public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
        // TODO Auto-generated method stub
        imageView.setImageResource(resIds[position]);

    }

    @Override
    public void onNothingSelected(AdapterView<?> parent) {
        // TODO Auto-generated method stub

    }

    private void initComponent() {
        gridView = (GridView) findViewById(R.id.gridview);
        imageView = (ImageView) findViewById(R.id.imageview);
    }
}

3. 案例执行结果