Android培训---构建一个简单用户界面

本文译自：http://developer.android.com/training/basics/firstapp/building-ui.html

Android应用程序的图形用户界面是使用View和ViewGroup对象层来构建的。通常View对象是一些UI小窗口，如按钮和文本域。ViewGroup对象是一个不可见的View容器，它定义了其中的子View的布局方式，如在一个格子中，或者一个垂直的列表。

Android提供了一个XML词汇表，它对应着View和ViewGroup的子类，因此你可以使用UI元素层次树在XML中定义你的UI。

图1.ViewGroup对象分支和其包含的View对象

在本节课程中，你会在XML中包含一个文本域和按钮的布局。在下面的课程中，你会响应按钮的按下事件，并文本域中的内容发送给另外一个Activity。

提示：有几个原因导致在XML中声明布局，而不是在运行时的代码中进行布局，其中尤其重要的是你可以给不同的屏幕尺寸创建不同的布局。例如，你可以创建两个版本的布局，并且告诉系统那个是“small”屏幕使用的布局，那个是“large”屏幕使用的布局。

创建线性布局

在res/layout目录中打开activity_main.xml文件。

注意：在Eclipse，当你打开一个布局文件时，你首先看到的是图形布局编辑器。这是一个使用WYSIWYG工具帮你构建布局的编辑器。本节课，你会直接使用XML来工作。因此点击在屏幕底部activity_main.xml标签来打开XML编辑器。

使用BlankActivity模板创建的工程中的activity_main.xml文件会带有一个RelativeLayout根view和一个TextView子view。

首先，删除<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属性来指定。LinearLayout中的每个子元素会按照它在XML中的顺序显示在屏幕上。

为了指定它们的尺寸，还需要另外两个属性：android:layout_width和android:layout_height。

因为LinearLayout是布局中的根view，通过宽度和高度设置为“match_parent”让这个布局填充到应用程序可用的整个屏幕区域。这个值声明了容器内的View应该继承容器的宽度和高度，以便子View能够跟其父View的宽度和高度匹配。

添加一个文本域

在<LinearLayout>元素内部添加一个<EditText>元素来创建一个用户可编辑的文本域。

跟每个View对象一样，你必须定义某些XML属性来指定EditText对象的属性。以下内容应该声明在<LinearLayout>元素内部：

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

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

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

以下是这些属性的说明：

android:id

这个属性给该view提供了一个唯一的标识，你可以在应用程序代码中使用这个标识来引用该view对象，如读和维护该对象。

在引用来自XML中的任何资源对象时，必须使用@符号。@符号后面跟的资源类型（本属性中是id），再后面是“/”，然后是资源名称（eidt_message）。

只有在第一次定义资源ID时才需要在资源类型之前添加“+”号。当你编译该应用程序时，SDK工具会使用该ID名在工程的gen/R.java文件中创建一个新的资源ID，用来引用EditText元素。一旦用这种方式声明了资源ID，其他对该ID的引用不需要在使用“+”号了。只有在指定新的资源ID时才需要使用“+”号，并且不需要指定具体的资源，如字符串或布局。

android:layout_width和android:layout_height

应该给View的宽度和高度指定“wrap_content”值，而不是指定特定的宽度和高度，这样View就能够跟它的内容具有一样的尺寸。如果使用“match_parent”值，那么EditText元素会填充整个屏幕，因为它会跟它的父元素LinearLayout的尺寸一致。

android:hint

这个属性定义了文本域为空时所显示的默认字符串。“@string/edit_message”值引用了一个在另一个文件中定义的字符串资源，而不是使用字符串的硬编码。因为它引用了一个具体的资源（不是一个标识符），所以它不需要“+”号。但是，因为你还没有定义字符串资源，所以你会看到一个编译错误。通过下面定义的字符串，就可以修正这个错误。

注意：该字符串资源使用了与该元素ID属性相同的名称：edit_message。但是，引用资源的范围始终受到资源类型的限制（如id或string），因此使用相同的名称不会导致冲突。

添加字符串资源

当需要在用户界面中添加文本时，应该始终把每个字符串都作为一个资源来指定。你可以使用一个单独的位置来管理所有UI文本相关的字符串资源，这样会让查找和更新文本更加容易。通过提供每个字符串资源的外部的可选定义，就可以针对不同语言，实现应用程序的本地化。

默认情况下，你的Android工程包括一个字符串资源文件：res/values/strings.xml。打开这个文件并且删除名叫“hello_world”的<string>元素，然后添加一个新的名叫“edit_message”的<string>元素，并且把它的值设置为“Enter a message”

在这个文件中，还要给按钮添加一个“Send”字符串，叫做“button_send”

以下是strings.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="menu_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" />

它的高度和宽度被设置成“wrap_content”，因此按钮只会跟填充到按钮上的文字一样大。这个按钮不需要android:id属性，因为Activity的代码中不会引用这个按钮。

让输入框适应屏幕的宽度

当前的布局设计中，EditText和Button的大小会跟它的内容一样大，如图2所示：

图2.EditText和Button的宽度被设置为“wrap_content”。

这个样式对于按钮来说还好，但文本域却不是太好，因为用户可能会录入更长的字符。因此，让该文本域填充未使用的宽度会更好。你可以在LinearLayout的内部元素中使用权重属性，（android：layout_weight）来做这件事。

这个权重值是一个数字，它指定每个view应该消耗的布局中剩余空间的量，这个量要相对与姊妹view所消耗的量。这有点像饮料的配方：2份伏特加酒、1份咖啡。这意味该饮料的三分之二是伏特加酒。例如，如果你一个view的权重是2，另一个view的权重是1，它们的和是3，因此第一个view会消耗掉剩余空间的三分之二，第二个view会消耗掉剩余的部分。如果你添加了第三个view，并给它设定的权重是1，那么第一个view（权重是2的视图）就会获得二分之一的剩余空间，剩余的空间每个或的四分之一。

所有的view的默认权重都是0，因此如果你只给一个view指定了任意比0大的值，那么在所有的view都被分配给了它们所需要的空间后，剩下的空间都会分配给这个权重大于0的view。因此要把你的布局中剩余空间都用来填充EditText元素，就要给它的权重设置为1，并且不给按钮设置权重。

   <EditText

       android:layout_weight="1"

       ... />

在指定权重时，为了改善布局的效率，你应该把EditeText的宽度设定为0（0dp）。把宽度设置为0，会改善布局的性能，因为使用“wrap_content”作为宽度，还需要系统计算与权重计算不相关的宽度。

<EditText

       android:layout_weight="1"

       android:layout_width="0dp"

       ... />

图3.显示了给EditText设置权重后的结果。

图3.EditText被给予了布局的全部权重，因此它填充了LinearLayout中全部剩余空间。

以下是完整的布局文件：

<?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工具生成的默认的Activity类，因此现在你可以运行该应用程序来看一下结果：

1. 在Eclipse中，点击工具栏中的Run按钮；

2. 或者在命令行窗口中，进入你的Android工程的根目录，然后执行以下命令：

ant debug

adb install bin/MyFirstApp-debug.apk