GridView的应用

GridView是网格列表，它和ListView很类似，都是View的子类。因此操作它的方法和操作ListView的方法类似。

步骤:
 1.将数据结构存储数据Data
 2.用适配器关联数据Data和View组件
 3.为GridView设置适配器 (setAdapter())

step1:新建android工程，命名为GridViewTest。

step2:设置布局文件main.xml和main1.xml

main.xml

<?xml version="1.0" encoding="utf-8"?>  
<GridView xmlns:android="http://schemas.android.com/apk/res/android"   
    android:id="@+id/gridview01"  
    android:layout_width="fill_parent"   
    android:layout_height="fill_parent"  
    android:numColumns="auto_fit"  
    android:verticalSpacing="10dp"  
    android:horizontalSpacing="10dp"  
    android:columnWidth="90dp"  
    android:stretchMode="columnWidth"  
    android:gravity="center"  
/>

main1.xml用于设计GridView的item

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

    <ImageView 
        android:id="@+id/imageview01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
        
    <TextView
        android:id="@+id/textview01"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

step3:设计主类GridViewTest.java(用两个主类来分别展示使用SimpleAdapter、BaseAdapter)

1.使用SimpleAdapter

package com.cb.gridview;

import java.util.ArrayList;
import java.util.HashMap;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.SimpleAdapter;

/*
 * GridView和ListView相同,都是GridView/ListView组件  和  数据Data  和  适配器Adapter
 * 步骤:
 * 1.选择要存储的数据Data，用一维或二维动态数组存储
 * 2.用适配器关联数据Data和View组件，
 * 3.为GridView设置适配器 (setAdapter())
 */

public class GridViewTest extends Activity {
    private GridView mGridView;
    private int[] images = new int[] { R.drawable.nash1, R.drawable.nash2,
            R.drawable.nash3, R.drawable.nash4, R.drawable.nash5,
            R.drawable.nash1, R.drawable.nash2, R.drawable.nash3,
            R.drawable.nash4};

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mGridView = (GridView) findViewById(R.id.gridview01);

        // 创建动态数字,存储Data
        ArrayList<HashMap<String, Object>> listitems = new ArrayList<HashMap<String, Object>>();

        for (int i = 0; i < 9; i++) {
            HashMap<String, Object> item = new HashMap<String, Object>();
            item.put("ItemImages", images[i]);
            item.put("ItemTexts", "第" + (i + 1) + "个");

            listitems.add(item);
        }

        /**
         * Constructor
         * 
         * @param context
         *            The context where the View associated with this
         *            SimpleAdapter is running
         * @param data
         *            A List of Maps. Each entry in the List corresponds to one
         *            row in the list. The Maps contain the data for each row,
         *            and should include all the entries specified in "from"
         * @param resource
         *            Resource identifier of a view layout that defines the
         *            views for this list item. The layout file should include
         *            at least those named views defined in "to"
         * @param from
         *            A list of column names that will be added to the Map
         *            associated with each item.
         * @param to
         *            The views that should display column in the "from"
         *            parameter. These should all be TextViews. The first N
         *            views in this list are given the values of the first N
         *            columns in the from parameter.
         */
        // 使用SimpleAdapter适配器 建立数据Data和main1.xml中组件的关联
        SimpleAdapter adapter = new SimpleAdapter(GridViewTest.this, listitems, // Data数据
                R.layout.main1, // 布局文件
                new String[] { "ItemImages", "ItemTexts" }, new int[] {
                        R.id.imageview01, R.id.textview01 });

        mGridView.setAdapter(adapter); // 为GridView设置适配器

        // 处理选中事件
        mGridView.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent,// The AdapterView
                                                            // where the click
                                                            // happened
                    View view, // The view within the AdapterView that was
                                // clicked
                    int position, // The position of the view in the adapter
                    long id // The row id of the item that was clicked
            ) {
                // TODO Auto-generated method stub
                HashMap<String, Object> items = (HashMap<String, Object>) parent
                        .getItemAtPosition(position);

                // 显示选中项的ItemText信息
                setTitle((String) items.get("ItemTexts"));
            }
        });
    }
}

2.使用BaseAdapter

package com.cb.gridview;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

/*
 * GridView和ListView相同,都是GridView/ListView组件  和  数据Data  和  适配器Adapter
 * 步骤:
 * 1.将数据结构存储数据Data
 * 2.用适配器关联数据Data和View组件
 * 3.为GridView设置适配器 (setAdapter())
 */

public class GridViewTest2 extends Activity {
    private GridView mGridView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mGridView = (GridView) findViewById(R.id.gridview01);

        ImageAdapter adapter2 = new ImageAdapter(this);//创建适配器(继承自BaseAdapter)
        mGridView.setAdapter(adapter2);

    }
}

// 定义ImageAdapter类,继承于 BaseAdapter
class ImageAdapter extends BaseAdapter {

    private Context mContext;
    private int[] images = { R.drawable.nash1, R.drawable.nash2,
            R.drawable.nash3, R.drawable.nash4, R.drawable.nash5,
            R.drawable.nash1, R.drawable.nash2, R.drawable.nash3,
            R.drawable.nash4, R.drawable.nash5, R.drawable.nash1,
            R.drawable.nash2, R.drawable.nash3, R.drawable.nash4,
            R.drawable.nash5 };

    public ImageAdapter(Context c) {
        mContext = c;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return images.length;
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        ImageView mImageView;
        if (convertView == null) {
            // 给ImageView设置资源
            mImageView = new ImageView(mContext);
            // 设置布局 图片120×120显示
            mImageView.setLayoutParams(new GridView.LayoutParams(85, 85));
            // 设置显示比例类型
            mImageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
        } else {
            mImageView = (ImageView) convertView;
        }
        mImageView.setImageResource(images[position]);

        return mImageView;
    }

}

step4:执行结果如下

1.使用SimpleAdapter效果图，在标题栏显示被单击图片的文字

2.使用BaseAdapter效果图