网格视图是在应用程序中比较常见的视图。
首先介绍一下GridView类,GridView类位于android.widget包下,该视图是将其他空间以二维格式显示到表格中的,而这些控件全部来自于ListAdapter适配器。
GridView类的属性同样有两种配置方式,即XML属性配置和Java代码中配置。如表中列出了常见的属性和方法。
其次,介绍一下网格视图的使用,下面将通过一个完整的案列详细介绍网格视图的使用方法,在该案例中同样列出了各个动漫名人,包括其照片及描述,案例的开发步骤如下:
- 创建一个新的Android项目,名称为Samples_6_2.
- 将要用到的图片资源存放到res/drawable-mdpi目录下,如下图所示。
- 定义程序中要用到的字符串资源,修改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>
- 在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>
- 打开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>
- 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>
- 接下来是对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;
}
}