1.3 创建一个简单的用户界面

http://developer.android.com/training/basics/firstapp/building-ui.html

android应用软件的图形用户界面由View和ViewGroup对象的层级结构构建而成。View对象通常为具体的UI部件，如按钮、文本框，ViewGroup对象是不可见的View容器，用来编排子View布局，如网格布局或者垂直列表等。

android系统支持开发者使用XML语法对View和ViewGroup的子类进行描述，从而将各种UI元素组合在一起构建出图形界面。

本章节介绍使用XML语言创建一个包含一个文本框和一个按钮的图形布局。而下节中，将会实现通过按钮将文本框内容传递到另一个activity。

创建一个线性布局

打开res/layout下的activity_main.xml

注意：在Eclipse中打开一个layout文件，默认为图形编辑界面，这个界面使得开发者可以使用WYSIWYG工具对layout进行编辑。在本章节中，开发者将直接使用XML，所以需要点击屏幕下方的activity_main.xml标签以进入XML编辑界面。

创建工程时选择的BlankActivity模板自动生成包含一个RelativeLayout的根View和一个TextView的子View的activity_main.xml文件。

首先，删除默认的TextView，将RelativeLayout改成LinearLayout；

然后，添加android:orientation属性，并将其值设为"horizontal"，完整代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="horizontal" >
</LinearLayout>

LinearLayout是一个ViewGroup的派生类，其中的子View根据android:orientation属性的值按照水平或者垂直方向排列，其顺序则根据具体子view在XML文件中定义的顺序确定。

所有View都应该包含android:layout_width和android:layout_height两个属性，用于确定View的大小。

由于LinearLayout是界面的根View，所以将width和height两个属性设置为"match_parent"，使其大小与软件可用的屏幕大小保持一致。

更多关于界面布局的介绍，参见界面布局。

添加文本框

在<LinearLayout>中添加<EditText>元素，即可向界面布局中添加一个可编辑的文本框。

与所有View对象一样，开发者需要在XML中为<EditText>元素定义若干属性以赋予这个View对象一些特性，本例详细代码如下：

<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />

相关属性介绍如下：

android:id

为一个View对象指定一个独有的识别码，开发者可以在代码中用它来引用该对象，如读取或者操作该对象（下节中介绍）。

引用XML中的资源对象时需要使用@，随后跟资源类型（本例中为id）、斜杠以及资源名称（edit_message）。

当一个资源的ID第一次被定义时，需要在资源类型前增加一个+号。编译应用软件时，SDK tools使用这个ID在工程文件gen/R.java中创建一个新的资源与之关联，本例中为EditText。一旦资源ID被定义，其他地方引用这个资源时就不需要额外添加+号。+号仅在资源ID定义时需要用到，其他具体的资源，如string、界面布局等不需要使用+号。

关于资源对象的详细信息请参见旁边文字描述（略）

android:layout_width和android:layout_height

本例中这两个属性的值使用"wrap_content"，而不是具体值，从而使得View对象能够根据内容自动调节自己的大小。而如果使用"match_parent"，EditText则会充满整个屏幕。

android:hint

用于指定文本框为空时的显示内容。本例中使用了"@string/edit_message"引用一个独立文件的字符串资源而不是一个硬编码的字符串作为这个属性的值。由于字符串资源属于具体的资源（而不是一个标识），+在此处没有被使用。然而，由于目前还没有定义这个字符串资源，此时会出现一个编译错误，下段介绍如何定义这个字符串从而消除编译错误。

注意：这个字符串资源与前面的ID资源名称相同，都叫edit_message，但是由于资源通常根据资源类型进行划分，名称相同而类型不同的资源不会造成冲突。

添加字符串资源

在用户界面添加的文本，都需要开发者为其指定相应的字符串资源，从而使得开发者能够在一个独立的位置对图形界面的文字进行处理，方便了文本的查找和更新。将字符串资源集中到一处，还能够方便应用软件的本地化，通过为每个字符串资源提供替代定义使之适应多种语言。

缺省情况下，Android工程在res/values/strings.xml文件中定义各种字符串资源。添加一个名称为"edit_message"的字符串，使其值为"Enter a message"（由于不需要显示hello world，"hello_world"字符串可以被删除）。

另外添加一个名称为"button_send"的字符串，值设置为"send"，做为将要添加的按钮提供显示内容。

完成资源添加后，string.xml如下所示：

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

<resources>

<string name="app_name">My First App</string>

<string name="edit_message">Enter a message</string>

<string name="button_send">Send</string>

<string name="action_settings">Settings</string>

<string name="title_activity_main">MainActivity</string>

</resources>

支持不同设备包含了使用字符串资源实现应用软件本地化适应多种语言环境的详细信息。

添加按钮

然后，在<EditText>元素下面添加一个<Button>

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/button_send"
/>

按钮的height和width属性被设置成"wrap_content"使得按钮的大小能够刚刚适合按钮的文字。按钮不需要id属性，因为activity不需要引用该按钮。

使输入框适应屏幕宽度

截至目前为止，界面布局包含的EditText和Button部件严格根据自己的内容显示大小，如图2所示。



图2

对于按钮来说，如此显示无可厚非，但是对于输入框，当用户输入一些较长的内容却不那么美观，如果能够使输入框充满未被使用的屏幕空间则会看起来更加舒服。在LinearLayout，通过对android:layout_weight属性进行设置可以达到上述目的。

权重值设定了每个View相对于其他兄弟View可以分配到的屏幕剩余空间，其分配方式与饮料配方的原料分配类似：“2分伏特加，1分咖啡”表示饮料的2/3为伏特加。例如，一个View分配权重2，另一个View分配权重1，总计3，所以第一个View占用2/3的剩余空间，第二个View占用其他剩余空间。当第三个View加入且其权重为1，则第一个View将占用1/2空间，另两个View各占1/4。

所有View的默认权重均为0，所以当一个View被分配任意大于0的权重，则这个View将占用满足其他View的显示空间后的所有屏幕剩余空间。因此，本例中为了使文本框填充界面布局的所有剩余空间，将文本框权重设为1，同时忽略按钮权重。

<EditText

android:layout_weight="1"

... />

为了提升界面布局的工作效率，开发者应该将文本框的width设置为0——width设置为"wrap_content"时，系统需要多进行一次无意义的运算，因为权重值的设置使得基于另一个width运算即可获得剩余空间的大小。

<EditText

android:layout_weight="1"

android:layout_width="0dp"

... />

图3显示了设置文本框权重后的布局效果。



图3

如下展示了界面布局文件的完整代码：

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

<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:orientation="horizontal">

<EditText android:id="@+id/edit_message"

android:layout_weight="1"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:hint="@string/edit_message"
/>

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/button_send"
/>

</LinearLayout>

该界面布局被应用到工程创建时SDK tools生成的默认activity类，至此可以通过运行应用软件查看显示效果：

Eclipse环境，点击工具栏的Run按钮。