[安卓教学] 建立你的第一个安卓应用 - 第三课 - 创建一个简单的用户界面

一个安卓应用（Android app）的图形用户界面（graphical user interface）是由一系列有层级关系的View（视图组件）和ViewGroup（视图组件组）对象构成。View对象通常是像按钮（buttons）或者文字输入框（text fields）之类的图形界面部件（UI widgets），同时，ViewGroup对象是定义子视图对象如何布局的不可见容器（invisible view containers），好比一个网格（grid）或者一个纵向列表（vertical list）。

Android对于View和ViewGroup的子类提供一系列基于XML的命名和定义，所以，你能够用XML来定义你的用户界面。此类XML包含一系列有层级关系的UI元素（UI elements）。

图示1：展现ViewGroup是如何生成布局分支以及如何包含其余View对象

在这节课中，你将使用XML建立包含一个文字输入项和一个按钮的布局（layout）。而后，在下一节课，你将响应这个按钮的按下事件（button is pressed，译者注：就是按下按钮的事件），而且将文字输入项的内容发送到另一个activity。

布局选择（Alternative Layouts）

有不少缘由能够说明使用XML而不是在运行时代码中声明你的用户界面布局是很是重要的，但之中最重要的一点是你能够针对不一样的屏幕大小建立不一样的布局。例如，你能够建立两个版本的布局，而后告诉系统针对小屏幕使用其中之一，针对大屏幕使用另一个布局。需更多信息，请参考“Supporting Different Devices”课程。

建立一个线性布局（Linear Layout）

打开“res/layout/”目录中的“fragment_main.xml”（译者注：最新的ADT会生成此文件，若是使用旧版本的ADT，打开activity_main.xml。建议升级更新你的ADT，不然之后会和文档对不上。）文件。

注意：在Eclipse中，当你打开一个布局文件，首先是在图形布局编辑器中打开。此编辑器帮助你以所见即所得的方式建造布局。在这节课中，你将直接面对XML。因此，点击位于屏幕底部的“fragment_main.xml”标签页，打开XML编辑器。

在建立此项目时选择的BlankActivity模板包含“fragment_main.xml”文件。此布局文件包含一个RelativeLayout根视图组件（root view）和一个TextView子视图组件（child view）。

第一步，删除“<TextView>”节点（element，译者注：这里是XML节点的意思，也翻译成XML元素。在英文文档中，布局文件中的视图组件都称为element，其中也有元件的意思。在译文中，若是不影响理解有时会省去element的翻译）而且替换“<RelativeLayout>”节点为“<LinearLayout>”。而后，添加“android:orientation”属性（attribute），而且设置为“horizontal”（水平的）。结果以下：

<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”的设置使子视图组件基于水平（horizontal）或者竖直（vertical）方向对齐分布。LinearLayout的每一个子视图组件按照在XML文件中出现的顺序展示在屏幕上。

另外两个属性“android:layout_width”和“android:layout_height”是用来设置视图组件大小的，对于全部视图组件都是必须设置的。

由于LinearLayout是此布局的根视图组件，它应该设置宽度（width）和高度（height）为“match_parent”以充满此应用可用的整个屏幕区域。

如需更多关于布局属性的信息，请参阅Layout指南。

添加一个文字输入组件（Text Field）

要建立一个用户可编辑的文字输入项，需在“<LinearLayout>”内添加一个“<TextEdit>”节点。

像每一个视图（View）对象同样，你必须经过定义某些XML属性（attributes）来指定“EditText”对象的特性（properties）。下面示例展现如何在“<LinearLayout>”节点（element）内部声明它：

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

关于以上属性（attributes）：

• android:id

  此属性指定该视图的惟一标识符。你可使用此标识符在你的应用代码中引用该视图对象，好比，读取和控制（manipulate）这个对象（你将在下一课看到如何实现）。

  当你从XML中引用任何资源对象（resource object）时，必须使用@符号。而后接资源类型（此例为“id”），一个斜线（slash，“/”），再而后是资源名称（“edit_message”）。

  在资源类型以前的加号（“+”）仅当你第一次定义一个资源ID的时候须要。当你编译此应用，SDK工具将使用这个ID的名字在你的项目的“gen/R.java”文件中生成一个新的资源ID。这个新的资源ID能够用来用“EditText”元素。一旦这个资源ID按照此方法声明，其余对于此ID的引用就不须要加号了。加号只在指定一个新的资源ID的时候必须，同时，对于实体资源，好比，字符串和布局，是不须要加号的。对于资源对象更多的信息，参见下面的介绍。

  关于资源对象（resource objects）

  每一个资源对象就是一个惟一整形数的名字，这个名字与一个应用的资源绑定，好比一个位图，布局文件或者字符串。

  每一个资源都有一个对应的资源对象定义在项目的“gen/R.java”文件中。你可使用R这个类中的对象名字来引用你的资源，好比当你须要一个字符串来指定“android:hint”属性的时候。你也能够经过“android:id”属性来链接一个视图组件和一个指定的资源ID，此资源ID将能够用来在代码中引用这个视图组件。

  每次编译，SDK工具都会自动生成“R.java”文件。你不该该编辑此文件。

  须要更多信息，请阅读“Providing Resources”指南。

• android:layout_width和android:layout_height

  相对于使用肯定的值设置宽度和高度，“wrap_content”值能够用来指定此视图组件只需按照内容须要调整大小。若是使用了“match_parent”值，这个“EditText”元素将填满屏幕，应为他将适应它的父件“LinearLayout”的大小。更多信息，参见Layouts指南。

• android:hint

  此值是这个文字输入项为空时所显示的默认字符串。与其使用代码中写死的字符串，“@string/edit_message”引用一个在另一个文件中定义的字符串资源。由于它引用一个实体资源（不只仅是一个标识符），因此不须要加号。可是，因为你尚未定义此字符串资源，你将看到一个编译错误。你将在下一章节定义一个字符串以修复这个错误。

  注意：此字符串资源使用了与这个节点的ID相同的名字：“edit_message”。可是，资源的引用老是以资源类型来决定做用域的（好比，“id”或“string”），因此使用了一样的名字并不会产生冲突。

添加字符串资源

当你须要在用户界面上添加文字时，应该总使用字符串资源。字符串资源容许你在一个地方管理全部的UI文字，这将使查找和更新文字更简单。外部定义字符串也能够经过提供不一样的字符串资源使你能够对于不一样语言本地化你的应用。

默认状况下，你的Android项目包含一个字符串资源文件“res/values/string.xml”。在此文件中添加一个名字为“edit_message”的字符串，而且设置值为“Enter a message.”（你能够删除“hello_world”字符串。）

在这个文件中，同时为一个即将用到的按钮添加一个“Send”字符串。名字使用“button_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>

须要更多为其余语言本地化你的应用的信息，请参阅课程“Supporting Different Devices”。

添加一个按钮

如今，在“<EditText>”节点下面，紧接着在布局（layout）中添加一个“<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：宽度设置为“wrap_content”的EditText和Button部件

对于按钮来讲，这没问题，可是对于文字输入框，这并很差，由于用户可能输入较长的内容。因此，让文字输入框占据剩余的屏幕宽度会比较好。咱们能够经过“LinearLayout”的“weight”（权重）属性（property）来实现。使用“android:layout_weight”属性来指定。

“weight”（权重）值是一个数字，该数字指定每一个视图组件相对于与它同级别的其余视图组件所应该占据的剩余空间的量。这相似于在一个饮料配方中的原料量：“2份伏特加，1份咖啡甜酒”表示饮料中的2/3是伏特加。例如，若是你设置一个视图组件的权重为2，另一个为1，总和为3，因此第一个视图组件占据2/3的剩余空间，第二个占据其他的。若是你再添加一个视图组件，而且设置权重为1，这时，第一个视图组件（权重为2的）将得到1/2的剩余空间，另外的两个各得1/4。

全部视图组件的缺省权重为“0“。因此若是给其中任意一个视图组件指定一个大于0的权重，这个视图组件将占据除去其余视图所须要的空间后剩余的全部空间。因此，要让EditText在布局中占据剩下的空间，只须要设置它的权重为1同时保留按钮为无权重。

<EditText
        android:layout_weight="1"
        ... />

当你设置了权重，为了加强布局的效率，你应该更改“EditText”的宽度为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类，因此你如今能够经过运行你的应用看到结果：

• 经过Eclipse，点击工具栏上的“Run”。

• 或者经过命令行，切换到你的Android项目的根目录，而后运行：

  ant debug
  adb install bin/MyFirstApp-debug.apk

继续下一课，你将学习到如何响应按按钮的事件，如何从字符输入框中读取内容，如何启动另外一个activity，等等。

此文章总体或部分翻译自Android Open Source Project的文档。依照Creative Commons 2.5 Attribution License使用并分享。此文章（译文，中文）原始连接为“[安卓教学] 建立你的第一个安卓应用 - 第三课 - 创建一个简单的用户界面”。原文（英文）连接为“Building a Simple User Interface”。

< 上一课

课程介绍

下一课 >