【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. 案例執行結果