GridView网格视图简单介绍

简单介绍一下GridView的功能，
Gr idView的可以设置的属性。


首先是实现的效果
需要实现的功能为，当我们点击下面的GridView的图片缩略时，上面将会显示出我们点击的图片的大图。

首先按要求定义一个布局文件

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:layout_gravity="center_horizontal"/>
    <GridView android:id="@+id/grid01"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:horizontalSpacing="1pt"
        android:verticalSpacing="1pt"
        android:numColumns="4"
        android:gravity="center">
    </GridView>

</LinearLayout>

接下来是代码实现

package com.test.gridview;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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

public class MainActivity extends Activity {
//声明成员变量
    private GridView grid;
    private ImageView imageView;
//将我们需要显示的图片创建一个数组放入
    int[] imageIds = new int[]{
        R.drawable.umeng_socialize_share_music,
        R.drawable.umeng_socialize_share_pic,
        R.drawable.umeng_socialize_share_video,
        R.drawable.umeng_update_btn_check_off_focused_holo_light,
        R.drawable.umeng_update_btn_check_off_holo_light,
        R.drawable.umeng_update_btn_check_off_pressed_holo_light,
        R.drawable.umeng_update_btn_check_on_focused_holo_light,
        R.drawable.umeng_update_btn_check_on_holo_light,
        R.drawable.umeng_update_btn_check_on_pressed_holo_light,
        R.drawable.umeng_update_close_bg_normal,
        R.drawable.umeng_update_close_bg_tap
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //创建一个List集合，List集合对象为map
        List<Map<String,Object>> listitem = 
                new ArrayList<Map<String,Object>>();
        //利用循环将图片放入集合中。
        for(int i = 0; i<imageIds.length;i++){
            Map<String,Object> map = new HashMap<String,Object>();
            map.put("image", imageIds[i]);
            //经常忘记下面这个
            listitem.add(map);
        }
        //找到图片组件
        imageView = (ImageView)findViewById(R.id.imageView);
        //创建一个SimpleAdapter适配器
        SimpleAdapter simpleadapter = new SimpleAdapter
                (this, listitem, R.layout.cell, 
                        new String[]{"image"},new int []{R.id.grid01});
        grid = (GridView)findViewById(R.id.grid01);
        //为GridView绑定Adapter
        grid.setAdapter(simpleadapter);

        //添加列表项被选中时的监听器
        grid.setOnItemSelectedListener(new OnItemSelectedListener() {

            @Override
            public void onItemSelected(AdapterView<?> parent, View view,
                    int position, long id) {
                //显示当前被选中的图片
                imageView.setImageResource(imageIds[position]);
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {
            }
        });
        grid.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                //显示被单击时的图片
                imageView.setImageResource(imageIds[position]);
            }
        });

    }
}

在创建SlmpleAdapter时，我们看到第三个参数为GridView中的每个图片显示的具体布局控件，为它重新写一个ImageView控件来显示图片。

<?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="wrap_content"
    android:orientation="horizontal" >

    <ImageView android:id="@+id/image2"
         android:layout_width="85dp"
         android:layout_height="85dp"
          android:padding="10dp"
         android:layout_gravity="center"
         android:src="@drawable/umeng_socialize_share_pic"
         />
</LinearLayout>