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

一．网格视图的基础知识

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

（一）XML配置：

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

（二）常用属性：

android:columnWidth 用于设置列的宽度

android:gravity 用于设置对齐方式

android:horizontalSpacing 用于设置各元素之间的水平间距

android:numColumns 用于设置列数

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

<?xml version="1.0" encoding="utf-8"?>
<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<HashMap<String, Object>> data = new ArrayList<HashMap<String, Object>>();
for (int i = 0; i < images.length; i++) {
HashMap<String, Object> map = new HashMap<String, Object>();
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]);

}
});

}
}

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