构建简单的用户界面

上一课下一课

Android的图形用户界面通过 View 和 ViewGroup 的层叠来构建。 View 对象是普通的
UI 小部件，例如按钮和文本框；ViewGroup 对象是不可见的视图容器，定义如何布局其子视图，例如网格和纵向列表。

Android 提供了对应于 View 和 ViewGroup 子类的
XMl 标签，你可以在 XML 通过 UI 元素的层叠来创建你的 UI。

图1 - 在布局中，ViewGroup 对象是如何形成分支并包含其它 View 对象的插图。

在这一次教程里，你将学到怎样用XML创建一个带有文本输入框和按钮的界面。 在接下来的课里， 你将学会对按钮做出响应，当按钮被按下的时候文本框里的内容被发送到另外一个Activity。

创建线性布局

---

从目录 res/layout/ 里打开 activity_main.xml 文件。

注意：在 Eclipse 中，当你打开布局文件的时候，首先看到的是 ADT 布局编辑，这个编辑页是使用所见即所得的工具帮助你创建布局。 对于本课来说，你是直接在 XML 里进行操作，因此点击屏幕下方的 activity_main.xml标签进入 XML 编辑状态。

创建该项目时你选择的 BlankActivity 模版提供了以 RelativeLayout 为根视图，
并包含 TextView 子视图的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的子类），
用于水平放置或者垂直放置子视图的部件，由属性android:orientation 来设定方向。LinearLayout布局里的子元素按照
XML 里设定的顺序显示在屏幕上。

另外的两个属性android:layout_width 和 android:layout_height用来指定视图的大小，对所有视图来说都是必须的。

因为布局中 LinearLayout 是跟视图，他应该充满整个屏幕区域，
这是通过设置他的高度和宽度为“match_parent”来实现的。 该值表明， 视图应该扩展其高度和宽度以匹配其父视图的高度和宽度。

关于布局属性的更多信息，参见布局 向导。

添加文本框

---

在 <LinearLayout> 布局中，添加一个 <EditText>元素就可以创建一个用户可编辑的文本框。

EditText类属于View的一个用于展示可编辑的文本的子类。 和View的别的类一样，你需要设置XML里的某些属性来指定EditText的具体功能，下边是你应该在线性布局里指定的一些属性元素：

与其他视图对象一样，你需要设置
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

他为视图提供唯一标识，你可以在程序的代码里进行引用，你可以对这个类进行读和修改的操作 （在下一课里会用到）。

当你想从 XML 里使用资源类的时候必须使用“@”符号。 其后是资源类型(这里是 id)、斜线、和资源名称
(edit_message)。

资源类型前的加号 (+) 在你首次定义资源 ID 时使用。在你编译应用时，SDK 工具使用该 ID 名称在项目的 gen/R.java 文件中创建新的资源
ID，使它参照到 EditText 元素。
资源 ID 以这种方式生成一次，其它对该 ID 的参照就不需要加号了。 加号只用于指定新的资源 ID 时，对于类似 字符串、布局这样的实际资源不需要他。 关于资源对象的更多信息参见侧边栏。

android:layout_width 和 android:layout_height

对于宽和高不建议指定具体的大小，使用“wrap_content”指定之后， 这个视图只是占据内容大小的空间。如果你使用了“match_parent”，这时 EditText将会布满整个屏幕，因为它将适应父布局 LinearLayout的大小。更多信息，参见布局向导。

android:hint

这是文本框为空时默认显示的字符串。 参照另外文件中定义的字符串资源的“"@string/edit_message"”值用于代替使用硬编码的字符串值。 它指向具体的资源（不是单纯的标识符）， 因此不需要加号。 然而，因为你还没有定义该字符串资源，首先你会看到一个编译错误。
在下一小节中通过定义该字符串会解决这个问题。

注意： 有与此字符串资源同名的元素 ID：edit_message。 不过，对资源的参照根据资源的类型限定了范围（比如 id 或 string），
因此使用相同的名称也不会引起冲突。

添加字符串资源

---

当你需要在用户界面中添加文本时，你应该总是使用资源来指定每个字符串。 字符串资源允许你在一个位置管理所有的 UI 文本，这使寻找个更新文本更容易。 外部的字符串， 也可以让您根据不同的语言，为每个字符串资源提供可供选择的定义来本地化你的应用程序。

默认情况下，你的 Andr​​oid 项目包括一个字符串资源文件，它在“res/values/strings.xml”。 添加一个名为“edit_message”的新字符串，将其值设置为“Enter
a message”。 （你可以删除名为“hello_world”字符串）。

既然你在编辑该文件，顺便为即将添加的按钮“button_send”添加一个值为“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属性，因为活动的代码中不会用到它。

使输入框宽度充满整个屏幕

---

如图2所示，目前布局设计成使 EditText 和 Button 两个小部件的大小适合其内容。

图2. EditText 和 Button 小部件宽度设置为“wrap_content”。

该设置对按钮来说，工作得很好，但并不适用于文本字段，因为用户可能输入更长的文字。 因此， 使文本字段充满屏幕宽度的未使用区域会比较好。 在 LinearLayout 布局中，
你可以通过指定 android:layout_weight 属性设置权重来实现。

权重值是一个数字，指定每个视图所要占用的剩余空间量，对于兄弟视图的相对占用量。这有点像调酒配方： “两份伏特加酒，一份咖啡利口酒”，即三分之二的饮料是伏特加酒。例如，如果你设置一个视图的权重是 2、 另一个权重为1，总和是3。所以第一个视图填充剩余的空间的三分之二，第二个视图填充其余空间。 如果添加了第三个视图，并设它的权重为1，那么现在第一个视图（权重2）得到1/2的剩余空间， 剩下的两个各获得1/4。

所有视图的默认权重为 0，因此，如果只有一个视图的权重大于 0， 则该视图填充为各视图分配必要空间后剩余的所有空间。因此，要使 EditText 元素填充布局的剩余空间，设它的权重为1，保持按钮没有权重。

    <EditText

        android:layout_weight="1"

        ... />

为了提高布局效率，指定了权重时，你应该将 EditText 的宽度设为零（0dp）。
设置宽度为零会提高布局性能，是因为使用“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 类加载，
所以你现在可以运行应用来查看结果：

• 在Eclipse中，从工具栏中单击“Run”。
• 或者从命令行，将目录切换到你的 Andr​​oid 项目的根目录下，然后执行：

  ant debug
  
  adb install bin/MyFirstApp-debug.apk

继续下一课，你可以学习如何响应按钮按下，读取文本字段的内容，启动另一个活动，等等。