网格视图在Android应用程序中的使用

网格视图是在应用程序中比较常见的视图。
首先介绍一下GridView类，GridView类位于android.widget包下，该视图是将其他空间以二维格式显示到表格中的，而这些控件全部来自于ListAdapter适配器。

GridView类的属性同样有两种配置方式，即XML属性配置和Java代码中配置。如表中列出了常见的属性和方法。

其次，介绍一下网格视图的使用，下面将通过一个完整的案列详细介绍网格视图的使用方法，在该案例中同样列出了各个动漫名人，包括其照片及描述，案例的开发步骤如下：

1. 创建一个新的Android项目，名称为Samples_6_2.
2. 将要用到的图片资源存放到res/drawable-mdpi目录下，如下图所示。
   
3. 定义程序中要用到的字符串资源，修改res/values目录下的strings.xml文件。

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Samples_6_2</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="hello">当前无选中选项</string>
    <string name="a">江户川柯南</string>
    <string name="b">灰原哀</string>
    <string name="c">工藤一新</string>
    <string name="d">毛利兰</string>
    <string name="e">怪盗基德</string>

    <string name="adis">中毒后，身体成6岁小学生的模样</string>
    <string name="bdis">原黑衣组织成员，服毒后变成小学生模样</string>
    <string name="cdis">著名高中生侦探</string>
    <string name="ddis">女主角</string>
    <string name="edis">充满传奇色彩超级怪盗</string>
</resources>

1. 在res/values目录下创建colors.xml文件，并添加颜色属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#CD3333</color>
    <color name="green">#00FF7F</color>
    <color name="blue">#0000AA</color>
    <color name="white">#FFFFFF</color>
    <color name="black">#050505</color>
    <color name="gray">#737373</color>
</resources>

1. 打开res/layout目录下的activity_main.xml文件，修改其内容。

<?xml version="1.0" encoding="UTF-8"?>
<!-- 定义一个线性布局 -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <!-- 添加一个TextView控件 -->
    <TextView 
        android:id="@+id/TextView01"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello"
        android:textColor="@color/green"
        android:textSize="24dip"/>
    <!-- 添加一个GridView控件 -->
    <GridView 
        android:id="@+id/GridView01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:verticalSpacing="5dip"
        android:horizontalSpacing="5dip"
        android:stretchMode="columnWidth"/>
</LinearLayout>

1. res/layout目录下创建grid_row.xml文件，并添加GridView控件的布局内容。

<?xml version="1.0" encoding="utf-8"?>
<!-- 添加一个水平线性布局 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout01"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
    <!-- 添加一个ImageView控件 -->
    <ImageView 
        android:id="@+id/ImageView01"
        android:scaleType="fitXY"
        android:layout_width="100dip"
        android:layout_height="98dip"/>
    <!-- 添加一个TextView控件 -->
    <TextView 
        android:id="@+id/TextView02"
        android:layout_width="100dip"
        android:layout_height="wrap_content"
        android:textColor="@color/green"
        android:textSize="24dip"
        android:paddingLeft="5dip"/>
    <!-- 添加一个TextView控件 -->
    <TextView 
        android:id="@+id/TextView03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="24dip"
        android:paddingLeft="5dip"/>

</LinearLayout>

1. 接下来是对Activity类的编写，MainActivity.java类

package com.example.samples_6_2;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.HashMap;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.GridView;
import android.widget.SimpleAdapter;
import android.widget.AdapterView;
import android.view.View;
import android.widget.TextView;
import android.widget.LinearLayout;
import android.widget.AdapterView.OnItemClickListener;

public class MainActivity extends Activity {
    //所有资源字符串id的数组
    int [] nameIds={R.string.a,R.string.b,R.string.c,R.string.d,R.string.e};
    //所有资源图片id的数组
    int [] drawableIds={R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e};
    //所有描述字符串id数组
    int [] msgIds={R.string.adis,R.string.bdis,R.string.cdis,R.string.ddis,R.string.edis};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);//设置当前显示的用户界面
        //得到GridView的引用
        GridView gv=(GridView)this.findViewById(R.id.GridView01);
        //创建适配器
        SimpleAdapter sca=new SimpleAdapter(
                this,   //Context
                generateDataList(),                 //数据List
                R.layout.grid_row,                  //行对应layout的id
                new String[]{"col1","col2","col3"},     //列名列表  
                new int[]{R.id.ImageView01,R.id.TextView02,R.id.TextView03});   //列对应控件Id列表
        gv.setAdapter(sca); //为GridView设置数据适配器
        gv.setOnItemSelectedListener(new OnItemSelectedListener()
        {
              public void onItemSelected(AdapterView<?> arg0,View arg1, int arg2, long arg3)
              {
                  //获取主界面TextView
                  TextView tv=(TextView)MainActivity.this.findViewById(R.id.TextView01);
                  //获取当前选中选项对应的LinearLayout
                  LinearLayout ll=(LinearLayout)arg1;
                  //获取其中的TextView
                  TextView tvn=(TextView)ll.getChildAt(1);
                  //获取其中的TextView
                  TextView tvnL=(TextView)ll.getChildAt(2);
                  StringBuilder sb=new StringBuilder();
                  //获取姓名信息
                  sb.append(tvn.getText());
                  sb.append("  ");
                  //获取描述信息
                  sb.append(tvnL.getText());
                  tv.setText(sb.toString());
              }
              public void onNothingSelected(android.widget.AdapterView<?> arg0)
              {

              }
        });
        gv.setOnItemClickListener(new OnItemClickListener()
        {
              public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3)
              {
                  //获取主界面TextView
                  TextView tv=(TextView)MainActivity.this.findViewById(R.id.TextView01);
                  //获取当前选中选项对应的LinearLayout
                  LinearLayout ll=(LinearLayout)arg1;
                  //获取其中的TextView
                  TextView tvn=(TextView)ll.getChildAt(1);
                  //获取其中的TextView
                  TextView tvnL=(TextView)ll.getChildAt(2);
                  StringBuilder sb=new StringBuilder();
                  //获取姓名信息
                  sb.append(tvn.getText());
                  sb.append("  ");
                  //获取描述信息
                  sb.append(tvnL.getText());
                  tv.setText(sb.toString());
              }
        });
    }

    public List<? extends Map<String,?>> generateDataList() //得到数据
    {
        ArrayList<Map<String,Object>> list=new ArrayList<Map<String,Object>>();
        int rowCounter=drawableIds.length;  //得到表格的行数
        //循环生成每行包含对应各个列数据的Map;col1、col2、col3为列名
        for(int i=0;i<rowCounter;i++)
        {
            HashMap<String,Object> hmap=new HashMap<String,Object>();
            //第一列为图片
            hmap.put("col1", drawableIds[i]);
            //第二列为姓名
            hmap.put("col2", this.getResources().getString(nameIds[i]));
            //第三列为描述
            hmap.put("col3", this.getResources().getString(msgIds[i]));
            list.add(hmap);
        }
        return list;
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

1. 运行效果如下图所示：