项目2-6 院系简介界面设计
学习目标
■ 掌握Android网格布局技术。
■ 掌握ScrollView组件的使用方法。
■ 学会运用Android网格布局设计院系简介界面。
项目描述
运用Android网格布局技术与ScrollView组件相结合的方法，设计一个院系简介界面，要求在界面上能实现院系图标和院系文字资料的滚动显示。
知识储备
2.6.1 网格布局
网格布局是在Android 4.0版本中提出的，它使用GridLayout表示，在网格布局中，屏幕被虚拟的细线划分成行、列和单元格，每个单元格放置一个组件，并且这个组件可以跨行或跨列摆放。
注意
网格布局与表格布局相类似，它们都是以行、列的形式管理放入其中的组件，但网格布局可实现组件的跨行或跨列摆放，而表格布局则只能实现组件的跨列摆放，而不能实现组件的跨行摆放。
在Android中，可以使用XML布局文件定义网格布局管理器，也可以使用Java来创建，但推荐使用XML布局文件定义网格布局管理器。在XML布局文件中，定义网格布局管理器是使用GridLayout标记，其基本语法格式如下：
<Grid Layout xmlns:android="http://schemas.android.com/apk/res/android"属性列表>
</GridLayout>
网格布局常用的XML属性如表2-16所示。
表2-16 网格布局常用的XML属性
为了控制网格布局管理器中各子组件的布局分布，网格布局管理器提供了 GridLayout.LayoutParams内部类，在该类中提供了表2-17所示的XML属性，用来控制网格布局管理器中各子组件的布局分布。
表2-17 GridLayout.LayoutParams的XML属性
示例：用网格布局设计计算器界面，该计算器界面如图2-14所示。
分析该界面，可以将该界面分解成一个6×4的网格，其中第一个文本框横跨4列，第6个按钮横跨 4 列，中间每个按钮各占一格。为了实现该界面，在 XML 布局文件中定义一个GridLayout，并在该GridLayout中依次定义文本框及各行的按钮。XML布局文件代码如下：
<?xml version="1.0" encoding="utf-8"?>
<GridLayout 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:rowCount="6"
android:columnCount="4"
android:id="@+id/grid"
tools:context="com.zzhn.zheng.test.Calculator">
<!-- 定义一个横跨4列的文本框，并设置该文本框的前景色、背景色等属性 -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="4"
android:textSize="50sp"
android:layout_gravity="right"
android:background="#eee"
android:textColor="#000"
android:text="0" />
<!-- 定义第2行4个按钮 -->
<Button
android:text="7" />
<Button
android:text="8" />
<Button
android:text="9" />
<Button
android:text="/" />
<!-- 定义第3行4个按钮 -->
<Button
android:text="4" />
<Button
android:text="5" />
<Button
android:text="6" />
<Button
android:text="*" />
<!-- 定义第4至第5行4个按钮方法同第2行一样，这里省略 -->
<!-- 定义第6行一个横跨4列的按钮 -->
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_columnSpan="4"
android:text="CLEAR" />
</GridLayout>
注意
网格布局和其他布局不同，可以不为组件设置Layout_width和Layout_height属性，因为组件的宽高已经由几行几列决定了。
2.6.2 ScrollView组件
在 Android 中，由于手机屏幕的高度有限，当组件要显示超过一屏幕的信息时，可使用ScrollView 为普通组件添加垂直滚动条，这样在浏览时可以自动地进行滚屏操作。因此， ScrollView被称为滚动视图。
ScrollView里面最多只能包含一个组件，如果有多个组件，则要设置一个内嵌布局管理器，其基本语法格式如下：
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent ">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
……
</LinearLayout>
</ScrollView>
默认情况下，ScrollView只能为其他组件添加垂直滚动条，如果需要添加水平滚动条，则可用另一个滚动视图HorizontalScrollView来实现。
项目实施
1.项目分析
运用Android网格布局技术，设计一个院系简介界面，要求在界面上能显示院系图标和院系文字说明，并能实现整个界面的垂直滚动和每个院系文字说明的水平滚动，效果如图2-18所示。
图2-18 院系简介界面
院系简介界面设计特点：每个院系由两列数据组成，第1列数据由跨两行的院系图标组成，第2列数据由两行文字说明组成，一行说明院系简介，另一行说明开设课程。整个界面是由各院系图标和文字说明一行行组成的。
分析结果：
① 界面采用网格布局技术。
② ImageView组件跨两行显示。
③ HorizontalScrollView 实现文字的水平滚动。
④ ScrollView 实现整个界面的垂直滚动。
2.项目实现
（1）新建院系简介项目。
启动 Android Studio，在 Android Studio 起始页选择【Start a new Android Studio project】，或在Android Studio主页选择菜单栏上【File】→【New】→【New Project】，新建Android工程。在New Project页面上输入应用程序的名称（DepartmentiInfo）、公司域名（com.zzhn.zheng）和存储路径，单击【Next】按钮。然后，选择工程的类型以及支持的最低版本，单击【Next】按钮。之后选择是否创建 Activity以及创建 Activity 的类型，选择【Empty Activity】，单击【Finish】按钮。
（2）布局文件设计。
首先在res/layout文件夹中打开activity_main.xml布局文件，使用网格布局技术，添加垂直滚动条ScrollView组件和线性布局（LinearLayout）管理器。在定义每一个院系图标和说明时，都需要用线性布局（LinearLayout）管理器，对 ImageView 组件、水平滚动条HorizontalScrollView组件和TextView组件进行布局管理，并设置这些组件的属性等。
注意
文字说明内容通常设置在strings.xml文件中。
操作方法：展开【res】→【layout】文件夹，双击【activity_main.xml】文件，打开右侧布局文件text编辑窗口，在编辑窗口中输入activity_main.xml文件代码，如下：
<?xml version="1.0" encoding="utf-8"?>
<GridLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.zzhn.zheng.test.MainActivity">
<ScrollView
android:layout_height="match_parent"
android:layout_width="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- 定义第一个院系图标和说明 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_height="90dp"
android:layout_width="90dp"
android:src="@drawable/fxy"
android:layout_rowSpan="2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:textSize="20sp"
android:layout_gravity="left"
android:text="@string/xbinfo"/>
</HorizontalScrollView>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_gravity="left"
android:text="@string/xbclass"
android:textSize="20sp"/>
</HorizontalScrollView>
</LinearLayout>
</LinearLayout>
<!-- 定义第2个至第n个院系图标和说明方法同上，省略 -->
</LinearLayout>
</ScrollView>
</GridLayout>
（3）调试运行。
① 单击工具栏上的 AVD Manager 图标
，打开虚拟设备对话框，在虚拟设备对话框中单击启动虚拟设备的命令按钮，打开Android Studio模拟器。
② 单击工具栏上的“三角形”运行按钮
，运行本项目。
项目总结
通过本项目的学习，读者应学会运用网格布局技术进行界面布局设计和垂直滚动条与水平滚动条的设计方法。
① 将默认的相对布局修改成GridLayout网格布局。
② 创建ScrollView组件，然后，创建线性布局（LinearLayout）管理器管理界面中所有组件，以实现垂直滚动效果。
③ 定义每一个院系图标和说明时，都需要用线性布局（LinearLayout）管理器，对ImageView组件、水平滚动条HorizontalScrollView组件和TextView组件进行布局管理。
④ 利用strings.xml文件设置文字说明内容。
项目训练——用网格布局与滚动视图结合设计菜谱界面
参照院系简介界面的设计方法设计一个菜谱显示界面。
练习题
2-6-1 在网格布局中如何实现跨行或跨列设置组件？
2-6-2 在网格布局中行数和列数的起始计算值是多少？
2-6-3 在网格布局中是不是一定要设置组件Layout_width和Layout_height属性？
2-6-4 说明ScrollView和HorizontalScrollView的使用方法和作用。