高级控件之网格视图(GridView)

一．网格视图的基础知识

        GridView网格视图是按照行,列分布的方式来显示多个组件,通常用于显示图片或是图标等,在使 用网格视图时,首先需要要在屏幕上添加GridView组件。

（一）XML配置：

android:id="@+id/gridView1" 
android:layout_width="match_parent"
android:layout_height="wrap_content" 
android:stretchMode="columnWidth"
android:numColumns="4" > 

（二）常用属性：

1. android:columnWidth 用于设置列的宽度
2. android:gravity 用于设置对齐方式
3. android:horizontalSpacing 用于设置各元素之间的水平间距
4. android:numColumns 用于设置列数
5. android:stretchMode 用于设置拉伸模式,其中属性值可以是
   //none(不拉伸),
   //spacingWidth(仅拉伸元素之间的间距),
   //columnWidth(仅拉伸表格元素本身)或
   //spacingWidthUniform(表格元素本身,元素之间的间距一起拉伸)
   6.android:verticalSpacing 用于设置各元素之间的垂直间距

（三）适配器

        GridView与ListView类似,都需要通过Adapter来提供显示的数据.但是,ListView可以通过 android:entries来提供资源文件的数据源,GridView没有这些属性,所以必须通过适配器来为其 添加数据。
        GridView的事件和ListView一样，都是设置setOnItemClickListener(OnItemClickListener listener);为对应的条目设置点击事件。

二．网格布局的一个示例

程序效果：

这里上面是一个GridView下面是一个ImageView，点击上面的GridView中的对应图片，会显示在下面的ImageView中。

（一）布局文件的代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
     >

    <GridView
        android:id="@+id/main_gv"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5"
        android:numColumns="5" />

    <ImageView
        android:id="@+id/main_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:src="@drawable/img01" />

LinearLayout>

（二）GridView中某一个视图的布局设置item_list.xm

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:padding="10dp" >

    <ImageView
        android:id="@+id/item_iv"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerVertical="true"
        android:padding="5dp"
        android:src="@drawable/email" />



RelativeLayout>

先放一些图片资源到drawable文件夹中，命名分别为w1到w13

（三）java代码设计

package com.example.lesson7_listview;

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

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.ImageView;
import android.widget.SimpleAdapter;

/* 
 * simpleAdapter和GridView的使用
 *  */

public class MainActivity extends Activity {

    // 数据源
    // 图片1
    int[] images = { R.drawable.w1, R.drawable.w2,R.drawable.w3,R.drawable.w4,R.drawable.w5,R.drawable.w6,
            R.drawable.w7,R.drawable.w8,R.drawable.w9,R.drawable.w10,R.drawable.w11,R.drawable.w12,R.drawable.w13,
            R.drawable.w14,R.drawable.w15,R.drawable.w16,R.drawable.w17,R.drawable.w18,R.drawable.w19};

    // GridView布局
    GridView gridview;

    //
    ImageView iv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 实例化ListView
        gridview = (GridView) findViewById(R.id.main_gv);

        //
        iv = (ImageView) findViewById(R.id.main_iv);
        // 创建data数据
        // 这里每一个条目的数据使用的是一个HashMap保存，所以value的值要用Object，可以存放图片数据
        List> data = new ArrayList>();
        for (int i = 0; i < images.length; i++) {
            HashMap map = new HashMap();
            map.put("image", images[i]);
            data.add(map);
        }

        // HashMap中存放数据的key，后面通过对应的key取数据
        String[] from = { "image" };

        // item_list.xml文件中对应数据要存放到的布局控件的位置
        int[] to = { R.id.item_iv };

        // 创建SimpleAdapter
        // 第一个参数是上下文
        // 第二个参数是适配器的数据
        // 第三个数据是listView的布局文件
        // 第四个参数是Adapter里面HashMap里面Key的name
        // 第五个参数是Adapter里面HashMap里面value的值要存放去的布局的位置
        SimpleAdapter adapter = new SimpleAdapter(this, data,
                R.layout.item_list, from, to);

        // 把Adapter放到ListView中显示
        gridview.setAdapter(adapter);

        // 为网格控件设置监听事件
        /*
         * 这个是不对的,要设置的是点击事件，二不是选择事件
         *  gridview.setOnItemSelectedListener(new
         * OnItemSelectedListener() {
         * 
         * @Override public void onItemSelected(AdapterView parent, View
         * view, int position, long id) { Toast.makeText(MainActivity.this,
         * "点击了" + position, Toast.LENGTH_SHORT).show(); //
         * iv.setImageResource(images[position]); }
         * 
         * @Override public void onNothingSelected(AdapterView parent) {
         * 
         * } });
         */

        gridview.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView parent, View view,
                    int position, long id) {
                iv.setImageResource(images[position]);

            }
        });

    }
}

网格视图同样是可以使用其他几种适配器来显示视图。