项目2-5 校园生活小助手主界面设计
学习目标
■ 掌握GridView组件的使用方法，了解GridView组件事件监听处理机制。
■ 掌握GridView组件与Adapter适配器相结合的应用。
■ 学会运用GridView组件进行校园生活小助手主界面设计。
项目描述
运用GridView组件与SimpleAdapter适配器相结合的方法，设计应用程序项目的主界面，如校园生活小助手主界面设计，要求在主界面上能显示应用程序项目的图片。
知识储备
2.5.1 GridView组件
在Android中，GridView被称为网格视图，它是按照行、列分布的方式来显示多个数据项的可滚动的视图组件，通常用于显示图片或图标等，如在Android手机中显示应用程序界面和实现九宫格图等界面时，经常是采用GridView组件进行界面设计。
GridView和ListView有共同的父类AbsListView，它们的区别在于：ListView只在一个方向分布，而GridView会在两个方向分布。在使用网格视图时，首先需要在屏幕上添加GridView组件，通常是使用GridView标记在XML布局文件中添加。
1.GridView组件在XML文件中的基本语法
格式如下：
<GridView
属性列表
/>
2.GridView的常用属性和方法
GridView的常用属性和方法如表2-15所示。
表2-15 GridView的常用属性和方法
GridView与ListView的使用方式相似，GridView也需要通过Adapter提供显示的数据，开发者可通过 SimpleAdapter来为 GridView提供数据，也可以通过自定义 Adapter并继承自BaseAdapter为GridView提供数据。不论是哪种方式，GridView与ListView的用法基本一致。
3.GridView组件监听器
GridView 组件的监听器用于监听用户选择了哪个 item 选项，设定该监听器的方法为public void onItemClick(AdapterView<?> parent, View view, int index, long id)，它的功能是用于监听GridView选项被选中的事件。当用户单击GridView的某个item选项时，为获得该选项index的值，需要为GridView添加OnItemClickListener监听器，并根据index的值决定将要跳转到下一级程序的界面窗口。
2.5.2 GridView应用案例
下面通过【例2-9】介绍运用GridView组件设计一款手机显示菜谱界面的方法。
【例2-9】在Android Studio中创建新项目，名称为GridViewDemo。修改项目下的布局文件activity_main_xml，添加一个GridView组件，通过定义SimpleAdapter适配器，可以提供数据源的列表项，并设置数据列表项为菜谱图片和菜谱名称。
第一步，修改GridViewDemo项目res/layout目录下的布局文件activity_main_xml，将默认添加的TextView组件删除，并添加一个GridView组件，布局代码如下：
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="3"
android:id="@+id/ms_gridview"
android:verticalSpacing="20dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"/>
第二步，创建GridView中数据选项布局文件meishi_item.xml的方法：右击【res】→【layout】目录，选择快捷菜单【New】→【XML】→【Layout XML File】，输入meishi_item，单击【Finish】按钮。
在数据选项布局文件 meishi_item.xml 中设置显示菜谱图片和菜谱名称的组件，并将线性布局修改为相对布局。布局代码如下：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:id="@+id/ms_img"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ms_desc"
android:layout_centerHorizontal="true"
android:layout_below="@+id/ms_img"/>
</RelativeLayout>
第三步，在MainActivity.java程序中先定义相关的变量，创建适配器需要的数据集合对象getData()方法，然后在onCreate()方法中获取布局文件中的GridView组件资源，定义数据源适配器，最后将适配器与GridView组件相关联。关键代码如下：
public class MainActivity extends Activity {
private GridView gridView;
private List<Map<String,Object>> data_list;
private SimpleAdapter sim_adapter;
//将网格中的图片、文字资源定义在相应数组里
public static int[] icon = {R.drawable.ms1,R.drawable.ms2,R.drawable.ms3,
R.drawable.ms4,R.drawable.ms5,R.drawable.ms6,R.drawable.ms7,R.drawable.ms8,
R.drawable.ms9,R.drawable.ms10,R.drawable.ms11,R.drawable.ms12};
private String[] iconName = {"臭豆腐","糖油粑粑","血旺","龙脂猪血","宝庆猪血 丸子","洞庭银鱼","君山银针鸡片","腊味合蒸", "椒盐馓子","麻辣小龙虾","红烧猪脚","长沙米粉"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gridView = (GridView) this.findViewById(R.id.ms_gridview);
SimpleAdapter simpleAdapter = new SimpleAdapter(this,getData(),R.layout.m-
eishi_item,new String[]{"img","txt"},new int[]{R.id.ms_img,R.id.ms_desc});
gridView.setAdapter(simpleAdapter);
｝
//创建适配器需要的数据集合对象
public List<Map<String,Object>>getData(){
List<Map<String,Object>> list = new ArrayList<Map<String, Object>>();
for(int i = 0;i<icon.length;i++){
Map<String,Object> map = new HashMap<String,Object>();
map.put("img",icon[i]);
map.put("txt",iconName[i]);
list.add(map); }
return list; }
｝
菜谱界面运行结果如图2-16所示。
图2-16 显示菜谱界面
项目实施
1.项目分析
运用GridView组件与SimpleAdapter适配器相结合的方法，设计校园生活小助手应用程序项目的主界面，要求在主界面上能显示应用程序项目的图片，效果如图2-17所示。
图2-17 校园生活小助手界面
校园生活小助手界面设计特点：
① 整个界面由标题和2列3行的数据项组成。
② 每个数据项由一个图片组成。
分析结果：
① 界面可采用相对布局或线性布局技术。
② 用一个图片组件表示标题。
③ 用一个GridView组件实现网格视图功能。
2.项目实现
（1）新建校园生活小助手项目。
启动 Android Studio，在 Android Studio 起始页选择【Start a new Android Studio project】，或在Android Studio主页菜单栏上选择【File】→【New】→【New Project】，新建 Android 工程。在 New Project 页面上输入应用程序的名称（SchoolHelper）、公司域名（com.zzhn.zheng）和存储路径，单击【Next】按钮。然后，选择工程的类型以及支持的最低版本，单击【Next】按钮。之后选择是否创建Activity以及创建Activity的类型，选择【Empty Activity】，单击【Finish】按钮。
（2）布局文件设计。
首先在res/layout文件夹中，打开布局的activity_main.xml文件，使用线性布局技术，添加ImageView、GridView组件，设置ImageView、GridView组件属性，删除原有的TextView组件。
操作方法：展开【res】→【layout】文件夹，双击【activity_main.xml】文件，打开右侧布局文件text编辑窗口，在编辑窗口中输入activity_main.xml文件代码，如下：
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/bg"/>
<GridView
android:id="@+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="2"
android:stretchMode="columnWidth">
</GridView>
创建GridView中item选项布局文件grid_item.xml。
操作方法：右击【res】→【layout】目录，选择快捷菜单【New】→【XML】→【Layout XML File】，输入grid_item，单击【Finish】按钮。在选项布局文件grid_item.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:padding="20dp"
android:gravity="center">
<ImageView
android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/schoolview_on"/>
</LinearLayout>
（3）编写Java程序代码。
首先在 MainActivity.java 程序中定义相关的变量，创建适配器需要的数据集合对象getData()方法。然后在onCreate()方法中获取布局文件中的GridView组件，再定义数据源适配器。最后将适配器与GridView组件相关联，并设置GridView组件的监听器。关键代码如下：
public class MainActivity extends Activity {
private GridView gridView;
//网格中的图片资源定义在一个数组里面
private int[] img = new int[]{R.drawable.schoolview_on,R.drawable.timg,
R.drawable.schooltel_on,R.drawable.note_on,R.drawable.course_on,
R.drawable.music_on};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_school_helper);
gridView = (GridView)this.findViewById(R.id.gridView);
//定义数据源适配器
SimpleAdapter simpleAdapter = new SimpleAdapter(this,getData(),
R.layout.
grid_item,new String[]{"img"},new int[]{R.id.img});
gridView.setAdapter(simpleAdapter);
//设置监听
gridView.setOnItemClickListener(itemlist);
}
//创建适配器需要的数据集合对象
public List<Map<String,Object>> getData(){
List<Map<String,Object>> list = new ArrayList<Map<String, Object>>();
for (int i =0;i<img.length;i++){
Map<String, Object> map = new HashMap<String,Object>();
map.put("img",img[i]);
list.add(map);
}
return list;
}
//监听事件处理
private AdapterView.OnItemClickListener itemlist = new AdapterView.OnItem-
ClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int index, long id)
{ //根据index值判断从哪里开始跳转到哪个窗口
switch (index){
case 0:
//校园风光，从哪里开始跳转到哪个窗口
break;
……
}
//执行跳转
}
};
}
（4）调试运行。
① 单击工具栏上的 AVD Manager图标
，打开虚拟设备对话框，在虚拟设备对话框中单击启动虚拟设备的命令按钮，打开Android Studio模拟器。
② 单击工具栏上的“三角形”运行按钮
，运行本项目。
项目总结
通过本项目的学习，读者应学会运用GridView组件实现网格视图界面的设计方法。
① 创建一个添加了GridView组件的布局文件，并设置相应属性。
② 创建GridView组件中item选项的布局文件。
③ 创建数据源，并实现数据源、SimpleAdapter适配器和GridView组件三者之间的相互关联。
④ 设置GridView组件的监听器。
项目训练——用GridView组件实现应用程序列表界面
模拟手机屏幕设计一个应用程序列表界面，要求界面上至少包括8个应用程序项目，按4列排列，每个应用程序项目由图标和文字组成，所选应用程序项目的图标由读者朋友们自定。
练习题
2-5-1 如何设置GridView组件的缩放模式？
2-5-2 如何设置GridView组件的列数？
2-5-3 说明GridView使用方法和作用。
2-5-4 如何监控GridView组件中item选项的变化？