GridView编撰的一个图片浏览器

学完GridView，做了一个图片浏览的功能的小组件。什么是GridView呢？

GridView(网格视图)是按照行列的方式来显示内容的，一般用于显示图片，图片等内容，比如实现九宫格图，用GridView是首选，也是最简单的。

分析步骤

1.准备好数据源

2.创建一个List

3.创建适配器

4.绑定GridView和Adapter之间的关联

5.注册事件监听

程序结果图：

代码下载地址：https://github.com/GXS1225/GridViewShow.git

代码

MainActivity.java

package cn.bzu.ui;
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.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.SimpleAdapter;

public class MainActivity extends Activity {
    private GridView smallImageGrid;
    private ImageView showImage;

    // 1.准备好数据源
    private int[] pics = { R.drawable.a, R.drawable.b, R.drawable.c,
            R.drawable.d, R.drawable.e, R.drawable.f };// 存放图片id的数组
    private String [] tvInformation={"第一个头像","第二个头像","第三个头像","第四个头像","第五个头像","第六个头像"};

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 查找组件
        smallImageGrid = (GridView) this.findViewById(R.id.imagelist);
        showImage = (ImageView) this.findViewById(R.id.imageshow);

        //2.创建一个List<Map>集合，用于将图片ID转换为List集合
        List<Map<String, Object>> data = new ArrayList<Map<String, Object>>();

        for (int i = 0; i < pics.length; i++) {
            Map<String, Object> item = new HashMap<String, Object>();
            item.put("pic", pics[i]);
            item.put("tvInformation", tvInformation[i]);
            data.add(item);
        }
        //3.创建适配器
        SimpleAdapter simpleAdapter = new SimpleAdapter(this, data,
                R.layout.grid, new String[] { "pic","tvInformation" }, new int[]{R.id.smallImage,R.id.tvInformation});

        //4.绑定GridView和Adapter之间的关联
        smallImageGrid.setAdapter(simpleAdapter);

        //  为showImage组件设置默认图片
        showImage.setImageResource(pics[0]);
        // 5.注册事件监听
        smallImageGrid.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position,
                    long id) {
                showImage.setImageResource(pics[position]);
            }
        });
    }

    public class GridViewHandler implements OnItemClickListener {

        /**
         * AdapterView adpaterview：发生点击事件的AdapterView； View
         * view：AdapterView中被用户点击的Item（GridView中的Item）； int
         * positon：被点击的Item在Adapter中的位置 long id：被点击的Item的Id
         */

        @Override
        public void onItemClick(AdapterView<?> adapter, View view,
                int position, long id) {
            showImage.setImageResource(pics[position]);
        }

    }

}

xml布局

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginTop="20dp"
    android:layout_height="fill_parent" >

    <GridView
        android:id="@+id/imagelist"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:horizontalSpacing="20dp"
        android:numColumns="3"
        android:verticalSpacing="10dp" >
    </GridView>

    <ImageView
        android:id="@+id/imageshow"
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:adjustViewBounds="true"
        />
</LinearLayout>

grid.xml

<?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/smallImage"
        android:layout_width="90dp"
        android:layout_height="90dp"/>
    <TextView 
        android:id="@+id/tvInformation"
        android:layout_width="80dp"
        android:layout_height="20dp"
        android:layout_gravity="center_horizontal"
     />

</LinearLayout>