第三章 用户界面设计
写在前面：
有人问为什么网络上那么多教程，直接学习就好了，为啥还要浪费时间跟精力自己重新写一系统的帖子？
写博客不是一种情怀，而是对自己所学所用知识的总结。写文章是一种态度，是对自己已知能力的输出的考核。
最重要一点，人生在世，总要留点痕迹不是？
本文同时发表至简书，不为什么，用他的MarkDown在线编辑爽得要哭。
第一节 应用组成预览
从第二章创建的应用是由一个Activity和一个布局(layout)构成。
- Activity
- activity是SDK中Activity类的一个具体实例，负责管理用户与信息屏的交互。应用的功能则是通过一个个Activity子类来实现。简单的应用可能只要一个子类。而复杂的应用则会有多个子类。
- 布局（layout）
- layout定义了一系列用户界面对象以及它们显示在屏幕上的位置。组成布局的定义保存在XML中。每个定义用来创建屏幕上的一个对象，如文本或按钮。
如上图所示，Eclipse已默认打开activity_quiz.xml布局文件，同时在Android图形布局工具中显示了预览界面。但为了更好的了解布局的内部原理，先学习XML如何定义布局。
代码清单3-1 默认的activity布局
<RelativeLayout 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.example.geoquiz.QuizActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
</RelativeLayout>
在代码3-1中可以看到activity的布局默认两个组件（widget）:RelativeLayout 与TextView。
组件是组成用户界面的构造模块，类似HTML中的各种标签。 组件可以显示文字、图像与用户交互，甚至是布置屏幕上的其他组件。 SDK中内置了很多种组件，通过配置各种组件可获得所需的用户界面及行为。
但根据第二章的需求分析可以得到默认的组件布局并不符合或满足需求。而实际上我们需要比默认的组件布局更复杂的组件布局。
- 一个垂直的LinearLayout组件，用于框住整个布局界面
- 一个TextView组件，用于展示问题内容
- 一个水平的LinearLayout组件，用于固定两个按钮
- 两个Button组件，用于用户选择答案
最后以实际需求要的组件，在XML中定义
代码3-2 在XML文件中定义组件（activity_quiz.xml）
<LinearLayout 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:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp"
android:text="@string/question_text" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/true_button"
tools:ignore="ButtonStyle" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/false_button" />
</LinearLayout>
</LinearLayout>
第二节 视图层级结构
根据XML所定义的组件，可以得到XML布局对应的视图层级结构
从布局的视图层次结构可以看到，LinearLayout组件是其根元素。而作为根元素LinearLayout组件必须指定Android XML资源文件的命名空间属性为http://schemas.android.com/apk/res/android。
LinearLayout组件继承自View子类的ViewGroup组件。ViewGroup组件是一个包含并配置其他组件的特殊组件。而LinearLayout组件可以实现一列或一排的样式布置。其他的ViewGroup子类还包括FrameLayout、TableLayout和RelativeLayout。
若某个组件包含在一个ViewGroup中，该组件与ViewGroup构成父子关系。
第三节 组件属性
在XML配置中，可以看到有些配置的信息，如android:layout_width等。这些属性都是一些常用属性。现在我们来看一下。
- android:layout_width和android:layout_height
可以这么认为，所有组件都需要这两个属性。它们通常被设置为以下两种属性值之一：
- match_parent：视图与其父视图大小相同
- wrap_content：视图将根据其内容自动调整大小
根LinearLayout组件的高度与宽度值均设定为match_parent。但根LinearLayout也有父视图：View--Android提供该父视图来容纳应用的整个视图层级结构。
- android:orientation属性
android:orientation属性是两个LinearLayout组件都具有的属性，决定了才者子组件是水平放置还是垂直放置。
LinearLayout子组件的定义顺序决定在屏幕上显示的顺序。
在竖直的LinearLayout,第一个定义的子组件出现在屏幕的最上端。
在水平的LinearLayout,第一个定义的子组件出现在屏幕的最左端。 - android:text属性
TextView与Button组件都有android:text属性。该属性是指定组件显示的文字内容。
请注意，android:text属性不是字符串字面值，而是对字符串资源的引用。同时由于在activity_quiz.xml文件中引用的字符串资源不存在。要进行添加这些资源。
第三节 创建字符串资源
每个项目都有包含一个名为string.xml的默认字符串文件。
代码3-3 添加字符串资源
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">GeoQuiz</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
<string name="question_text">This is question zone!</string>
<string name="true_button">True</string>
<string name="false_button">False</string>
</resources>
现在，在项目的任何XML文件中，只要引用到@string/false_button，应用运行时就行得到false
小结
本章节主要是介绍一个activity组成及相应布局。下一章将对Button操作进行代码实现。
您还可以阅读第二章