2015-06-25

Adapter类Three之GridView网格视图

GridView网格视图与我们前面学的ListView有点大同小异。

ListView的话只显示一列，而我们这个GridView的话可以显示多列，当然我们可以在设置numColumns = 1，或者不写的话，那么我们的GridView变成了ListView，同样这里也是需要通过adapter来提供数据的。

好的，鉴于部分读者说那个使用适配器的流程还不是很清晰，这里的话再总结下:

Adapter负责提供每个”列表项”组件
ListView，GridView，Spinner，Gallery等Adapter都只是一个容器，负责采用合适的方式显示adapter提供的列表项

当前我们学过的ArrayAdapter和SimpleAdapter

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,R.layout.array_item,data);

SimpleAdapter adapter = new SimpleAdapter(this,listTtem,R.layout.(自定义每个列表项中的布局),new String[]{"key"},new int[] {对应组件的资源的id})

跟着就是适配器视图.setAdapter

好的，废话不多，上实例:

代码:

step 1:

main.xml代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:id="@+id/LinearLayout1"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:gravity="center_horizontal"  
    android:orientation="vertical"  
    tools:context=".MainActivity" >  
  
    <ImageView  
        android:id="@+id/imgView"  
        android:layout_width="100dp"  
        android:layout_height="100dp"  
        android:layout_gravity="center_horizontal"  
        android:background="@drawable/a1" />  
      
    <GridView  
        android:id="@+id/GridView"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:gravity="center"  
        android:horizontalSpacing="1pt"  
        android:numColumns="3"  
        android:verticalSpacing="1pt"  
     />  
  
</LinearLayout>

代码解释:

这里的话我们先后定义了一个ImageView和一个GridView

GridView的属性分析：

numColumns = 3：设置GridView有三列
horizontal/VerticalSpacing：设置GridView中各个元素间的水平/竖直间距
ColumnWidth：设置GridView的列的宽度
stretchMode：设置拉伸模式，依次为：

step 2:

定义GridView里面每个格子中的布局,这里很简单,紧紧是显示一个ImageView:

imalayout.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/imgmodel"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_gravity="center_horizontal"   
    />  
  
</LinearLayout>

step 3:

MainActivity.java

package com.jya.demo;  
  
import java.util.ArrayList;  
import java.util.HashMap;  
import java.util.List;  
import java.util.Map;  
  
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;  
import android.app.Activity;  
  
public class MainActivity extends Activity {  
  
    //定义一个图片资源id的数组  
    int[] imgids = new int[]  
            {  
                R.drawable.a1,R.drawable.a2,R.drawable.a3,R.drawable.a4,  
                R.drawable.a5,R.drawable.a6,R.drawable.a7,R.drawable.a8,  
                R.drawable.a9,R.drawable.a10,R.drawable.a11,R.drawable.a12  
            };  
    //定义一个ImageView和一个GridView  
    private ImageView img;  
    private GridView gridView;  
      
      
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
          
        //创建一个存储Map集合的List对象  
        List<Map<String, Object>> list = new ArrayList<Map<String,Object>>();  
        for(int i = 0;i < imgids.length;i++)  
        {  
            Map<String, Object> listItem = new HashMap<String, Object>();  
            listItem.put("images", imgids[i]);  
            list.add(listItem);  
        }  
          
        //实例化那ImageView和GridView  
        img = (ImageView) findViewById(R.id.imgView);  
        gridView = (GridView) findViewById(R.id.GridView);  
          
        //创建一个simpleAdapter  
        //参数依次为上下文,提供数据的list,制定一个每个网格中的组件的布局,根据key取出List中的value作为列表项可多个;最后一个是要填充的组件  
        SimpleAdapter simple = new SimpleAdapter(this,list,R.layout.imglayout, new String[]{"images"},new int[] {R.id.imgmodel});  
        //为GridView设置Adapter  
        gridView.setAdapter(simple);  
        //为gridView设置一个监听器,这里也可以用setOnItemSelectedListener  
        gridView.setOnItemClickListener(new OnItemClickListener() {  
            @Override  
            public void onItemClick(AdapterView<?> parent, View view, int postion, long id) {  
                img.setImageResource(imgids[postion]);        
            }  
        });  
    }  
}

运行截图:

代码解释:

1.我们先定义了图片的资源数组,定义了一个GridView与ImageView并实例化

2.接着创建一个List对象存储Map<String,Object>集合,根据key值依次存入List中

3.创建一个simpleAdapter用于封装列表项

4.gridView.setAdapter:设置Adapter

5.添加一个选项点击事件