Android官方入门文档[3]构建一个简单的用户界面

Building a Simple User Interface
构建一个简单的用户界面

This lesson teaches you to
1.Create a Linear Layout
2.Add a Text Field
3.Add String Resources
4.Add a Button
5.Make the Input Box Fill in the Screen Width

You should also read
•Layouts

这节课教你
1.创建一个线性布局
2.添加一个文本字段
3.添加字符串资源
4.添加一个按钮
5.输入框中填写屏幕宽度

你也应该阅读
•布局

In this lesson, you create a layout in XML that includes a text field and a button. In the next lesson, your app responds when the button is pressed by sending the content of the text field to another activity.
在本课程中，您将创建一个XML格式的布局，其中包括一个文本字段和一个按钮。在下一课，当按钮被发送文本字段的内容到另一个活动按您的应用程序响应。

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. ViewGroup objects are invisible view containers that define how the child views are laid out, such as in a grid or a vertical list.
一个Android应用程序的图形用户界面使用View和一个ViewGroup对象的层次结构建造。查看对象通常是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提供对应于查看和ViewGroup中的子类，因此您可以使用UI元素的层次结构定义XML的UI的XML词汇。

Layouts are subclasses of the ViewGroup. In this exercise, you'll work with a LinearLayout.
布局是一个ViewGroup的子类。在这个练习中，你将与一个LinearLayout中。

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. 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.
声明你的UI布局XML，而不是运行时代码是有几个原因非常有用，但它是特别重要的，所以你可以创建不同的布局不同的屏幕尺寸。例如，您可以创建两个版本的布局，并告诉系统使用一个关于“小”屏幕和其他的“大”屏幕。欲了解更多信息，请参阅类有关支持不同的设备。

Figure 1. Illustration of how ViewGroup objects form branches in the layout and contain other View objects.
图1.中的ViewGroup对象如何形式的分支机构布局和包含其他视图对象。

Create a Linear Layout
创建一个线性布局

--------------------------------------------------------------------------------
1.In Android Studio, from the res/layout directory, open the activity_my.xml file.
The BlankActivity template you chose when you created this project includes the activity_my.xml file with a RelativeLayout root view and a TextView child view.
1.在Android Studio，从RES/布局目录中，打开activity_my.xml文件。
当你创建这个项目，你选择的BlankActivity模板包括了RelativeLayout的根视图和一个TextView子视图的activity_my.xml文件。

2.In the Preview pane, click the Hide icon  to close the Preview pane.
In Android Studio, when you open a layout file, you’re first shown the Preview pane. Clicking elements in this pane opens the WYSIWYG tools in the Design pane. For this lesson, you’re going to work directly with the XML.
2.在预览窗格中，单击隐藏图标关闭预览窗格。
在Android Studio，当你打开一个布局文件，你首先显示预览窗格中。单击元素此窗格中打开的设计窗格中的所见即所得工具。在这一课中，你会直接与XML的工作。

3.Delete the <TextView> element.
3.删除<的TextView>元素。

4.Change the <RelativeLayout> element to <LinearLayout>.
4.<RelativeLayout的>元素更改为<LinearLayout>。

5.Add the android:orientation attribute and set it to "horizontal".
5.加入了android：方向属性并将其设置为“水平”。

6.Remove the android:padding attributes and the tools:context attribute.
6.删除了android：填充属性和工具：上下文属性。

The result looks like this:
结果如下：

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 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.
LinearLayout是，规定了子view在任何一个垂直或水平方向，所指定的视图组（ViewGroup中的一个子类），特别是android:orientation属性。一LinearLayout的每个孩子出现在它出现在XML的顺序在屏幕上。

Two other 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.
因为所述LinearLayout是在布局根视图，它应该填充整个屏幕区域是可用的应用程序通过设定的宽度和高度，以“match_parent”。该值声明认为应该扩大它的宽度或高度来匹配父视图的宽度或高度。

For more information about layout properties, see the Layout guide.
有关布局属性的更多信息，请参见布局指南。

Add a Text Field
添加一个文本字段

--------------------------------------------------------------------------------

As with every View object, you must define certain XML attributes to specify the EditText object's properties.
如同每一个视图对象，必须定义某些XML属性来指定EditText对象的属性。

1.In the activity_my.xml file, within the <LinearLayout> element, define an <EditText> element with the id attribute set to @+id/edit_message.
1.在activity_my.xml文件，在<LinearLayout中>元素中，定义设置为@+ ID/ edit_message id属性的<EditText>元素。

2.Define the layout_width and layout_height attributes as wrap_content.
2.定义layout_width和layout_height属性作为WRAP_CONTENT。

3.Define a hint attribute as a string object named edit_message.
3.定义提示属性作为字符串对象命名edit_message。

The <EditText> element should read as follows:
在<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" />

Here are the <EditText> attributes you added:
这里有您所添加的<EditText>属性：

android:idThis 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).
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).
Android：id此规定来看，你可以用它来从您的应用程序代码中引用的对象，例如读取和操作对象（你会看到这个在下一课）的唯一标识符。
当你提到的任何资源对象从XML at符号（@）是必需的。其次是由资源类型（ID在这种情况下），斜线，则该资源名称（edit_message）。

Resource Objects
资源对象

A resource object is a unique integer name that's associated with an app resource, such as a bitmap, layout file, or string.
资源对象是同一个应用程序相关联的资源，例如位图，布局文件或字符串的唯一整数名称。

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.
每个资源都在项目的根/ R.java文件中定义的相应的资源对象。您可以使用对象名称中的R类是指你的资源，比如当你需要指定为Android的字符串值：提示属性。你也可以创建你联想到使用了android视图任意的资源ID：id属性，它允许你引用从其他代码视图。

The SDK tools generate the R.java file each time you compile your app. You should never modify this file by hand.
SDK工具生成R.java文件中的每个编译您的应用程序的时间。你不应该手工修改此文件。

For more information, read the guide to Providing Resources.
欲了解更多信息，请阅读指南提供了资源。

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. With the resource ID 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第一次。当您编译应用程序时，SDK工具使用ID名称来创建你的项目的根/ R.java文件指EditText元素的新资源ID。与资源ID声明一次这种方式，其他引用到ID不需要的加号。指定一个新的资源ID，而不是所需要的具体资源，如字符串或布局只有在使用加号是必要的。看到sidebox有关资源对象的更多信息。

android:layout_width and android:layout_heightInstead 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.android:hintThis 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.
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.
Android：layout_width和android：使用特定尺寸的宽度和高度layout_heightInstead的“WRAP_CONTENT”值指定为需要，以适应视图中的内容来看应该只有那么大。如果你要改用“match_parent”，那么元件EditText会填满屏幕，是因为它会匹配的父LinearLayout的大小。欲了解更多信息，请参阅布局guide.android:hintThis是默认的字符串时显示的文本字段为空。而是采用了硬编码字符串值中，“@字符串/ edit_message”值是指在一个单独的文件中定义的字符串资源。因为这是指一种具体的资源（不只是一个标识符），它不需要加号。但是，因为你还没有定义字符串资源呢，你会看到在第一次编译错误。你会被定义字符串解决这个问题，在接下来的一节。
注：此字符串资源具有相同的名称作为元素ID：edit_message。然而，提及的资源由资源类型（例如ID或字符串）总是范围，所以使用相同的名称不会引起冲突。

Add String Resources
添加字符串资源

--------------------------------------------------------------------------------

By default, your Android project includes a string resource file at res/values/strings.xml. Here, you'll add a new string named "edit_message" and set the value to "Enter a message."
默认情况下，你的Android项目包括RES/价值/ strings.xml中的字符串资源文件。在这里，您将添加一个名为“edit_message”新的字符串，其值设置为“输入信息”。

1. In Android Studio, from the res/values directory, open strings.xml.
1.在Android Studio，从RES/值目录，打开strings.xml中。

2. Add a line for a string named "edit_message" with the value, "Enter a message".
2.添加一条线，一个名为“edit_message”的字符串值，“输入信息”。

3. Add a line for a string named "button_send" with the value, "Send".
3.添加一条线一个名为“button_send”的价值，“发送”字符串。

You'll create the button that uses this string in the next section.
您将创建一个使用此字符串在下一节的按钮。

4. Remove the line for the "hello world" string.
4.拆下线为“Hello World”的字符串。

The result for strings.xml looks like this:
该结果的strings.xml如下：
res/values/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 text in the user interface, always specify each string as a resource. String resources allow you to manage all UI text in a single location, which makes the text easier to find and update. Externalizing the strings also allows you to localize your app to different languages by providing alternative definitions for each string resource.
在用户界面的文字，总是指定每个字符串作为一个资源。字符串资源允许您管理在一个位置，这使得文本更容易找到并更新所有的UI文本。外部化的字符串，您还可以通过提供替代定义每个字符串资源本地化您的应用程序，以不同的语言。

For more information about using string resources to localize your app for other languages, see the Supporting Different Devices class.
有关使用字符串资源本地化您的应用程序的其他语言的详细信息，请参阅支持不同设备类。

Add a Button
添加一个按钮

--------------------------------------------------------------------------------
1.In Android Studio, from the res/layout directory, edit the activity_my.xml file.
1.在Android Studio，从RES/布局目录，编辑activity_my.xml文件。

2.Within the <LinearLayout> element, define a <Button> element immediately following the <EditText> element.
2.在<LinearLayout>元素，定义了一个<按钮>元素立即<EditText>元素下面。

3.Set the button's width and height attributes to "wrap_content" so the button is only as big as necessary to fit the button's text label.
3.设置按钮的宽度和高度属性“WRAP_CONTENT”等按钮只有那样大的必要，以适应按钮的文字标签。

4.Define the button's text label with the android:text attribute; set its value to the button_send string resource you defined in the previous section.
4.定义了Android按钮的文本标签：文本属性;其值设置为您在上一节中定义的button_send字符串资源。

Your <LinearLayout> should look like this:
您<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: This button doesn't need the android:id attribute, because it won't be referenced from the activity code.
注：此按钮不需要了android：id属性，因为它不会从活动代码引用。

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.
布局目前设计为使得两者EditText和按钮构件只大如必要，以满足他们的内容，如图2。

Figure 2. The EditText and Button widgets have their widths set to "wrap_content".
图2EditText和Button控件有它们的宽度设置为“WRAP_CONTENT”。

This works fine for the button, but not as well for the text field, because the user might type something longer. 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.
这工作正常的按钮，但没有得到很好的文本字段，因为用户可能输入一些较长。这将是很好的填补了未使用的屏幕宽度与文本字段。 android:layout_weight属性：你可以用layout_weight属性，它可以指定一个LinearLayout内做到这一点。

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 ingredients in a drink recipe: "2 parts soda, 1 part syrup" means two-thirds of the drink is soda. 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.
权重值是一个数字，指定的剩余空间每个视图应该消耗，相对于由同级意见消耗的量。这工作有点像成分的饮料配方的量：“2份苏打水，1份糖浆”是指三分之二的饮料是汽水。例如，如果你给一个视图2的weight，另一个为1的weight，总和是3，所以在第一视图填充剩余空间的2/3和第二视图填充的其余部分。如果添加了第三种view，并给它权重为1，那么第一个预览（重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.
默认权重为所有的意见是0，所以如果你指定的任何权重值大于0，只有一个view，那么这种view罢了毕竟意见给予他们需要的空间，无论空间仍然存在。

Make the Input Box Fill in the Screen Width
让输入框填满屏幕宽度

--------------------------------------------------------------------------------

To fill the remaining space in your layout with the EditText element, do the following:
为了填补剩余空间与元素EditText布局，做到以下几点：

1. In the activity_my.xml file, assign the <EditText> element's layout_weight attribute a value of 1.
1.在activity_my.xml文件，分配<EditText>元素的layout_weight属性值1。

2. Also, assign <EditText> element's layout_width attribute a value of 0dp.
2.另外，分配<EditText>元素的属性layout_width的0dp值。

res/layout/activity_my.xml
<EditText
    android:layout_weight="1"
    android:layout_width="0dp"
    ... />

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的宽度为零（0dp）。因为使用“WRAP_CONTENT”的宽度要求系统计算的宽度最终是无关紧要的，因为权重值需要另一个宽度计算，以填补剩余空间的宽度设置为零提高布局的表现。

Figure 3 shows the result when you assign all weight to the EditText element.
图3显示了当你将所有的weight到EditText元素的结果。

Figure 3. The EditText widget is given all the layout weight, so it fills the remaining space in the LinearLayout.
图3.插件EditText给出所有的布局的weight，因此它填补了LinearLayout的剩余空间。

Here’s how your complete activity_my.xmllayout file should now look:
这是你的完整的activity_my.xmllayout文件现在应该怎么看：

res/layout/activity_my.xml
<?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>

Run Your App

运行您的应用程序

-------------------------------------------------- ------------------------------
This layout is applied by the default Activity class that the SDK tools generated when you created the project. Run the app to see the results:
这种布局是由SDK工具，当你创建项目生成的默认Activity类应用。运行应用程序来查看结果：

• In Android Studio, from the toolbar, click Run .
•在Android的工作室，从工具栏，单击运行。

•或者在命令行，改变你的Android项目的目录根和执行：
• Or from a command line, change directories to the root of your Android project and execute:
ant debug
adb install bin/MyFirstApp-debug.apk

Continue to the next lesson to learn how to respond to button presses, read content from the text field, start another activity, and more.
继续下一课，学习如何应对按键，读取文本字段的内容，启动另一个活动，等等。

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