Android官方开发文档Training系列课程中文版：构建第一款安卓应用之创建用户界面

原文地址：http://android.xsoftlab.net/training/basics/firstapp/building-ui.html

在这节课中，你会创建一个xml的布局文件，它包含一个Text成员和一个Button成员。在下节课中，你会学习到当Button按下后启动并发送Text成员的内容到另一个Activity中。

安卓应用的灵活用户界面是建立在View和ViewGroup的层级基础之上。View是比如Button或者TextView这种通用的UI控件，ViewGroup是一种不可见的布局容器，它定义了子View该如何被放置，比如放置在Grid或者垂直的列表中。

布局都是ViewGroup的子类，在这个练习中，我们使用LinearLayout做演示。

创建一个线性布局

1. 在AS中，打开res/layout目录下的activity_my.xml文件。
   当你在创建这个工程的时候你选择了一个空白的Activity模板，这个工程包含一个activity_my.xml文件，文件中有一个RelativeLayout根View和一个TextView子View。
2. 在Preview模块下，点击隐藏按钮来关闭预览模板。
3. 删除< TextView >元素。
4. 更改< RelayoutLayout >元素为< LinearLayout >.
5. 添加 android:orientation 属性然后设置值为”horizontal”；
6. 移除android:padding属性和tools:context属性。
   res/layout/activity_my.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:orientation="horizontal" >
</LinearLayout>

LinearLayout是一个ViewGroup，它是ViewGroup的子类，它可以通过属性android:orientation布置子View为垂直排列或者水平排列。每一个LinearLayout的子View都会按照在XML文件中的顺序方式显示在屏幕上。

有两个属性：android:layout_width 和 android:layout_height，对于所有的View的尺寸来说是必须的。

因为LinearLayout是布局的根目录，它应该会填充屏幕的整块区域，因为在宽和高的属性中设置了”match_parent”，这个值表明了这个View应该扩展它的宽或者高到父View的高宽。

添加一个Text属性

正如每一个View对象一样，你必须在XML文件中声明EditText对象的属性。
1. 在activity_my.xml文件的< LinearLayout >的元素中，定义一个< EditText >的元素，并且设置它的id属性为@+id/edit_message。
2. 设置layout_width和layout_height属性为wrap_content。
3. 定义hint属性为一个名称为edit_message的字符串。
< EditText >元素应该是这样的：
res/layout/activity_my.xml

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

以下是你添加的< EditText >的属性介绍：
android:id

• 这个提供了View的唯一标识符，你可以从应用代码中使用这个对象的引用，比如用来读取并且操作这个对象。
• 符号@在xml中引用任何资源对象的时候是必须的。紧接着后面跟的是资源的类型，在这里是id，再最后是资源的名称，这里是edit_message。
• 在资源类型前的符号+是指当你第一次要指定一个资源ID。当你编译APP的时候，SDK工具会使用这个ID的名称在工程的gen/R.java文件中创建一个新的资源ID的引用，这个引用表示的就是XML中的EditText对象。如果使用这种方式声明了ID，那么在后面就不需要再使用+，其它地方引用的时候也不需要+。

android:layout_width 和 android:layout_height

• 用来指定高宽的尺寸，”wrap_content”是指View应该根据它内容的多少来指定它的大小。如果你想使用 “match_parent”，那么EditText元素将会填充整个屏幕，因为它会扩展到父布局LinearLayout的大小。

android:hint

• 这个属性用来在Text中内容为空的时候展示，为了不使用硬编码的字符串，这里使用了@string/edit_message的值引用另一个文件中的一个字符串资源。这里不需要使用+标志，然而，因为你还没有指定一个字符串资源，你将会在编译的时候看到错误，你将会在下面定义了字符串资源后修复这个错误。

Note: 这里的字符串资源命名和EditText元素的名称一样，但是，它们属于不同的资源类型，一个是string，一个是id，所以使用相同的名称并无大碍。

添加一个字符串资源

默认情况下，在工程的res/values/下的strings.xml文件便是字符串资源文件了。这里，你将会添加一个名为”edit_message”的字符串然后设置其值为”Enter a message.”
1. 在AS中，在res/values目录下打开string.xml
2. 添加一行名为”edit_message”值为”Enter a message.”的字符串资源
3. 添加一行名为”button_send”值为“Send”的字符串资源。
4. 移除”hello world”那一行。
那么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="action_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
</resources>

在用户界面上的文字，总是要指定每一个资源。字符串资源允许你管理所有的UI文字，它可以使你更轻松的找到和更新文字。外部化存储的字符串资源允许你去简单定义不同的语言版本app

添加一个按钮

1. 在AS中，打开res/layout下的activity_my.xml文件。
2. 在< LinearLayout >标签中，< EditText > 元素后面定义一个< Button >.
3. 设置按钮的高宽为”wrap_content”，所以按钮的高宽就是根据内容的大小来定义的。
4. 使用android:text属性定义按钮的文本，设置其值为刚刚在string.xml中定义的button_send的字符串资源

你的< LinearLayout >应该看起来像这样：
res/layout/activity_my.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:orientation="horizontal" >
      <EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        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>

Note： 这里不需要给Button指定android:id属性，因为这里不需要在Activity代码中使用Button的引用。

现在这个布局文件显示的应该是这个样子：

这下按钮就可以工作了，但是和text不同，text稍后会被用户输入一些东西，它便会很好的填充屏幕上没有使用的空间。你可以使用LinearLayout的权重属性做到这一点，可以使用android:layout_weight来指定权重。

如果所有的weight值都是0，那么如果你在其中一个View中指定任何比0大的值，那么这个View将会把剩下的空余空间全部占满。

使输入框填充屏幕的宽度

如果需要使EditText占据屏幕上的剩余空间，那么只需要做到以下几点：
1. 在EditText的属性中添加layout_weight，并设置值为1。
2. 另外，EditText的layout_width属性可以设置为0dp：

<EditText
    android:layout_weight="1"
    android:layout_width="0dp"
    ... />

3 . 当指定了权重会影响布局效果，应该把EditText的宽设置为0，因为使用了wrap_content的话会要求系统计算一次不必要的宽度，因为权重会要求系统进行重新计算并使用剩余的宽度。
以下就是使用了权重的效果：

以下是修改好的布局：

<?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>

运行APP

在AS中点击toolbar上的Run按钮。

如果要使用命令行，切换路径到工程下，然后执行：

ant debug
adb install bin/MyFirstApp-debug.apk

下一节会学习如何响应button的点击事件，读取EditText的内容，然后启动另一个Activity。