Android官方文档翻译 五 1.3Building a Simple User Interface

Building a Simple User Interface

创建一个简单的用户界面

This lesson teaches you to

这节课将教给你：

1. Create a Linear Layout

   创建一个线性布局

2. Add a Text Field

   增加一个文本域

3. Add String Resources

   增加一个String（字符串）资源

4. Add a Button

   增加一个按钮

5. Make the Input Box Fill in the Screen Width

   让输入框充满屏幕的宽度

---

The graphical user interface for an Android app is built using a hierarchy of View and ViewGroup objects. View objects are usually UI widgets such as buttons or text fields and ViewGroup objects are invisible view containers that define how the child views are laid out, such as in a grid or a vertical list.

对于一个app来说，生动的用户界面是由View和ViewGroup对象构建的。View对象通常是由诸如按钮和 文本域这样的UI小部件构成的，ViewGroup对象是一个诸如网格或者竖直的列表这样的无形的视图容器，它会定义自己的子视图如何布局。

Android provides an XML vocabulary that corresponds to the subclasses of View and ViewGroup so you can define your UI in XML using a hierarchy of UI elements.

Android提供了一个View和ViewGroup对应子类的XML词汇表，因此你可以在XML文件中通过使用UI元素的层次结构来定义你的UI。

Alternative Layouts

可供选择的布局

• Declaring your UI layout in XML rather than runtime code is useful for several reasons, but it’s especially important so you can create different layouts for different screen sizes.
  

因为种种原因，在XML文件中声明你的UI布局比在运行代码中更加有效，最重要的一个原因是对于不同大小的屏幕你可以创建不同的布局。

For example, you can create two versions of a layout and tell the system to use one on “small” screens and the other on “large” screens. For more information, see the class about Supporting Different Devices.
例如，你可以创建两个版本的布局，然后告诉系统在小屏幕上使用哪个或者在大屏幕上使用哪个。想获取更多的信息，请看“Supporting Different Devices”这节课。

---

Figure 1. Illustration of how ViewGroup objects form branches in the layout and contain other View objects.

图1 解释ViewGroup在布局中如何组成分支以及包含其他的View对象

In this lesson, you’ll create a layout in XML that includes a text field and a button. In the following lesson, you’ll respond when the button is pressed by sending the content of the text field to another activity.

在这节课中，你将在XML文件中创建一个包含一个文本域和一个按钮的布局。在接下来的课程中，你会完成当按钮被点击的时候发生响应：把文本域中的内容发送到另一个activity中。

Create a Linear Layout

创建一个线性布局

Open the fragment_main.xml file from the res/layout/ directory.

从目录：res/layout/中打开 fragment_main文件。

Note: In Eclipse, when you open a layout file, you’re first shown the Graphical Layout editor. This is an editor that helps you build layouts using WYSIWYG tools. For this lesson, you’re going to work directly with the XML, so click the fragment_main.xml tab at the bottom of the screen to open the XML editor.

注意：在Eclipse中，当你打开一个layout（布局）文件时，第一次显示的是图形布局编辑器。这是一个通过使用“所见即所得”（What You See Is What You Get）工具帮助你创建布局的一个编辑器。在这节课里，你将直接处理XML文件，所以，你要点击在屏幕底部出现的fragment_main.xml标签来打开XML编辑器。

The BlankActivity template you chose when you created this project includes the fragment_main.xml file with a RelativeLayout root view and a TextView child view.

当你创建项目的时候你选择了一个BlankActivity模板，这里面包括一个fragment_main.xml的文件，在该文件里含有一个相对布局（RelativeLayout）根视图和一个文本输入框（TextView）子视图。

First, delete the element and change the element to . Then add the android:orientation attribute and set it to “horizontal”. The result looks like this:

首先，删除元素，然后把元素换成。接着，添加android:orientation属性并设置其为“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 is a view group (a subclass of ViewGroup) that lays out child views in either a vertical or horizontal orientation, as specified by the android:orientation attribute. Each child of a LinearLayout appears on the screen in the order in which it appears in the XML.

线性布局是一个视图组（ViewGroup的一个子类），它通过android:orientation这个属性使子视图竖直或者水平排列。线性布局中每个子视图将在屏幕上按顺序展现，就像在XML文件中看到的这样。

The other two attributes, android:layout_width and android:layout_height, are required for all views in order to specify their size.

另外的两个属性：android:layout_width 和 android:layout_height，对于所有的视图都是必须要有的，它是为了指定视图的大小。

Because the LinearLayout is the root view in the layout, it should fill the entire screen area that’s available to the app by setting the width and height to “match_parent”. This value declares that the view should expand its width or height to match the width or height of the parent view.

因为线性布局是布局中的根视图，所以它应该充满屏幕的整个区域，通过把width 和 height设置成“match_parent”可以在app上实现。这个值表明视图应该扩展它的宽度和高度去匹配它父视图的宽度和高度。

For more information about layout properties, see the Layout guide.

想获取关于布局特性的知识，请看Layout向导。

Add a Text Field

增加一个文本框

To create a user-editable text field, add an element inside the .

创建一个用户可输入的文本框，在< LinearLayout>上添加一个元素。

Like every View object, you must define certain XML attributes to specify the EditText object’s properties. Here’s how you should declare it inside the element:

和其他每个视图对象一样，你必须定义确定的XML属性来指定EditText对象的特性。下面是你应该在< LinearLayout>元素中声明的内容：

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

About resource objects

关于资源对象

A resource object is simply a unique integer name that’s associated with an app resource, such as a bitmap, layout file, or string.

一个资源对象是存在于一个app中的具有一个独一无二的整数名字的对象，比如一个位图对象，一个布局文件，或者是一个字符串。

Every resource has a corresponding resource object defined in your project’s gen/R.java file. You can use the object names in the R class to refer to your resources, such as when you need to specify a string value for the android:hint attribute. You can also create arbitrary resource IDs that you associate with a view using the android:id attribute, which allows you to reference that view from other code.

每个资源都有一个相应的资源对象，这个对象在你的项目的gen/R.java文件中定义。比如当你需要给android:hint指定一个string类型的值时，你可以使用在R类中定义的对象名字去找到你的资源。你也可以使用android:id属性创建一个任意的资源ID，将其和你的视图连接起来，通过这个ID你可以在其他的代码中找到你的视图。

The SDK tools generate the R.java each time you compile your app. You should never modify this file by hand.

每次你编译你的app的时候，SDK工具会自动给你生成一个R.java文件。你不应该手动的去修改这个文件。

For more information, read the guide to Providing Resources.

想获取更多的消息，请读向导“Providing Resources”

About these attributes:

关于我们用到的这些属性：

• android:id

  This provides a unique identifier for the view, which you can use to reference the object from your app code, such as to read and manipulate the object (you’ll see this in the next lesson).

  它为视图提供了一个独一无二的标识符，你可以用它在你的app代码中引用其代表的对象，比如读取并对对象进行操作（你可以在下一节课中看到）

  The at sign (@) is required when you’re referring to any resource object from XML. It is followed by the resource type (id in this case), a slash, then the resource name (edit_message).

  at符号（@）是你在XML文件中引用任何资源对象都需要的。它后面紧跟着的是资源类型（在这个例子中是id），然后是一个斜杠（/），接着就是资源的名字了（edit_message）。

  The plus sign (+) before the resource type is needed only when you’re defining a resource ID for the first time. When you compile the app, the SDK tools use the ID name to create a new resource ID in your project’s gen/R.java file that refers to the EditText element. Once the resource ID is declared once this way, other references to the ID do not need the plus sign. Using the plus sign is necessary only when specifying a new resource ID and not needed for concrete resources such as strings or layouts. See the sidebox for more information about resource objects.

  当你第一次定义一个资源ID时你才需要在资源类型前加上一个加号（+）。当你编译app的时候，SDK工具会在你的项目的gen/R.java文件中使用ID名字去创建一个新的资源ID，以用来引用EditText元素。一旦资源ID通过这种方式声明后，对该ID的引用将不需要加号（+）了。当指定一个新的资源ID时，才必须使用加号。当引用诸如strings或者layouts这种具体的资源时是不需要使用加号的。请看花絮消息查看关于资源对象的更多内容。

• android:layout_width and android:layout_height

  Instead of using specific sizes for the width and height, the “wrap_content” value specifies that the view should be only as big as needed to fit the contents of the view. If you were to instead use “match_parent”, then the EditText element would fill the screen, because it would match the size of the parent LinearLayout. For more information, see the Layouts guide.

  不需要使用特定的大小去指定宽度和高度，“wrap_content”指定视图组件应该和它包裹的内容一样大小。如果你用“match_parent”来代替这个值，EditText元素将充满整个屏幕，因为它是要匹配自己的父元素LinearLayout的大小的。想知道更多的内容，请看Layouts guide。

• android:hint

  This is a default string to display when the text field is empty. Instead of using a hard-coded string as the value, the “@string/edit_message” value refers to a string resource defined in a separate file. Because this refers to a concrete resource (not just an identifier), it does not need the plus sign. However, because you haven’t defined the string resource yet, you’ll see a compiler error at first. You’ll fix this in the next section by defining the string.

  当文本域是空的时候，这个属性用来展现默认的字符串。“@string/edit_message”值指的是在一个单独的文件中定义的一个字符串资源，它用来代替一个写死的字符串值。因为它指的是一个具体的资源（不仅仅是一个标识符），所以它不需要使用加号。然而，由于你现在还没有定义这个string资源，因此你会看到一个编译错误。你将在下一个章节通过定义这个string来消除错误。

Note: This string resource has the same name as the element ID: edit_message. However, references to resources are always scoped by the resource type (such as id or string), so using the same name does not cause collisions.

注意：这个string资源和ID元素有相同的名字：edit_message。然而，引用资源时总是要先审视资源的类型的（比如id或者string），因此使用相同的名字不会造成冲突。

Add String Resources

增加一个字符串资源

When you need to add text in the user interface, you should always specify each string as a resource. String resources allow you to manage all UI text in a single location, which makes it easier to find and update text. Externalizing the strings also allows you to localize your app to different languages by providing alternative definitions for each string resource.

当你需要在用户界面增加一个文本框时，你总是需要定义一个string作为一个资源。string资源允许你在一个单一的位置管理所有的UI的文本，这让你找到或者更新文本变得更加容易。让strings客观化也允许你让你的app本土化，对于不同的语言，你只需要在每个string资源中提供一份不同的定义即可。

By default, your Android project includes a string resource file at res/values/strings.xml. Add a new string named “edit_message” and set the value to “Enter a message.” (You can delete the “hello_world” string.)

默认情况下，你的Android项目在res/values/strings.xml中包含一个string资源文件。增加一个string命名为“edit_message”，然后把值设置为：“Enter a message”(你可以删除“hello_world”这个string)。

While you’re in this file, also add a “Send” string for the button you’ll soon add, called “button_send”.

在这个文件中在为你将要添加的按钮增加一个“Send”字符串，命名为“button_send”。

The result for strings.xml looks like this:

现在，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>

For more information about using string resources to localize your app for other languages, see the Supporting Different Devices class.

关于使用string资源对于其他的语言让你的app本土化的更多信息，请看“Supporting Different Devices”课程。

Add a Button

增加一个按钮

Now add a < Button> to the layout， immediately following the < EditText> element:

现在，紧跟着< EditText>元素，往你的布局中添加一个< Button>：

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send" />

The height and width are set to “wrap_content” so the button is only as big as necessary to fit the button’s text. This button doesn’t need the android:id attribute, because it won’t be referenced from the activity code.

把高度和宽度设置为：“wrap_content”，按钮就会和按钮中的文本一样大了。这个按钮不需要android:id属性，因为在activity代码中不会引用它。

Make the Input Box Fill in the Screen Width

让输入框充满整个屏幕的宽度

The layout is currently designed so that both the EditText and Button widgets are only as big as necessary to fit their content, as shown in figure 2.

当前的布局设计的输入框和按钮都是和他们包裹的内容一样大，就像图2展现的那样

Figure 2. The EditText and Button widgets have their widths set to “wrap_content”.

图2.把EditText和Button控件的宽度值设置为“wrap_content”后展现的

This works fine for the button, but not as well for the text field, because the user might type something longer. So, it would be nice to fill the unused screen width with the text field. You can do this inside a LinearLayout with the weight property, which you can specify using the android:layout_weight attribute.

现在做的这些对于按钮已经很好了，但是对于文本域还不是足够的好，因为用户可能会输入更长的内容。因此，让文本域的宽度充满未使用的屏幕可能会更好一些。你可以在LinearLayout中通过使用权重属性来完成这个操作，这样，你就可以android：layout_weight属性来详细说明了。

The weight value is a number that specifies the amount of remaining space each view should consume, relative to the amount consumed by sibling views. This works kind of like the amount of in a drink recipe: “2 parts vodka, 1 part coffee liqueur” means two-thirds of the drink is vodka. For example, if you give one view a weight of 2 and another one a weight of 1, the sum is 3, so the first view fills 2/3 of the remaining space and the second view fills the rest. If you add a third view and give it a weight of 1, then the first view (with weight of 2) now gets 1/2 the remaining space, while the remaining two each get 1/4.

权重是一个用来指定每个视图相对于自己的兄弟视图占用空间后应该占用剩余空间大小的数。这就相当于在一个饮料配方中每种材料的数量：“两份伏特加，一份咖啡香甜酒”就表示在饮料中有三分之二的伏特加。例如，如果你把一个视图的weight设置成2，另一个视图的weight设置为1，总数是3，那么第一个视图将占用剩余空间的2/3，第二个视图将占用剩余的空间（第一个视图占用完成后的剩余）如果你增加了第三个视图，并且设置它的weight为1，那么第一个视图（weight为2的那个）现在将得到1/2的剩余空间，剩下的两个视图将分别得到1/4的空间。

The default weight for all views is 0, so if you specify any weight value greater than 0 to only one view, then that view fills whatever space remains after all views are given the space they require. So, to fill the remaining space in your layout with the EditText element, give it a weight of 1 and leave the button with no weight.

默认情况下，所有的视图的weight都是0，因此如果你只给一个视图定义weight值大于0，那么这个视图将充满在所有的视图获得他们需要的空间后的剩余空间。因此，为了让EditText元素在你的布局中充满整个剩余空间，请把它weight设置为1，并且不对button的weight进行设置。

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

In order to improve the layout efficiency when you specify the weight, you should change the width of the EditText to be zero (0dp). Setting the width to zero improves layout performance because using “wrap_content” as the width requires the system to calculate a width that is ultimately irrelevant because the weight value requires another width calculation to fill the remaining space.

当你定义weight的时候，为了提高布局的效率，你应该把EditText的width值改为0（dp）。把width值设置为0可以提高布局的性能，因为使用“wrap_content”作为宽度值需要系统去计算一个最终并无关的宽度值（由于这个宽度值需要其他的宽度去计算充满剩余空间是多大）。

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

Figure 3 shows the result when you assign all weight to the EditText element.

图3 展现了当你给EditText元素分配所有的weight值后的结果

Figure 3. The EditText widget is given all the layout weight, so fills the remaining space in the LinearLayout.

图3 EditText的宽度被分配了所有的布局宽度，因此在线性布局中充满了剩余的空间

Here’s how your complete layout file should now look:

下面是你写完布局文件后应该展现的内容：

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

This layout is applied by the default Activity class that the SDK tools generated when you created the project, so you can now run the app to see the results:

当你创建这个项目的时候，SDK工具已经帮你自动生成好了默认的可以应用布局文件的Activity，因此你现在可以运行app看看结果了：

• In Eclipse, click Run from the toolbar.
  

  在Eclipse中，在工具栏上点击Run

• Or from a command line, change directories to the root of your Android project and execute:

  如果是在命令行，可以改变目录到你的Android项目所在的根目录然后执行：

  ant debug
  adb install bin/MyFirstApp-debug.apk
  

Continue to the next lesson to learn how you can respond to button presses, read content from the text field, start another activity, and more.

继续进行下一节课你将可以学会如何给你的按钮添加点击响应事件，从文本域中读取内容，开启另一个activity，等等更多。

Next: Starting Another Activity

下一节：开启另一个Activity

这个是我自己翻译的，如果您发现其中有重要错误，敬请指出！