3.创建简单的UI-Google官网上的Android初学训练

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

本节, 创建包含一个文本框和一个按钮的布局. 下一节，实现按钮点击后将文本框的内容传递到另一个Activity.

Android app 的UI采用 View 和 ViewGroup 对象形成的层次结构. View 对象通常是buttons 或text fields这样的控件。 ViewGroup对象是布局容器, 如grid 或 vertical list.

Android 提供 XML 对应 View 和 ViewGroup 的词语。你可以使用XML定义一个层次结构的UI.

Layouts 是 ViewGroup的子类。 本例中, 使用 LinearLayout.

Alternative Layouts

可为不同的屏幕尺寸定义不同的布局，具体内容请查看 Supporting Different Devices.

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

创建线性布局

1. 在 Android Studio, 从 res/layout 目录, 打开 activity_my.xml 文件.

    activity_my.xml 文件当前包含一个 RelativeLayout 根view 和一个 TextView 子view.

2. 在 Preview 面板, 点击隐藏图标  关闭 Preview pane.

   在 Android Studio, 当打开一个布局文件, 首先显示 Preview pane. 在此面板，使用 WYSIWYG 的设计模式. 本节, 直接使用 XML.

3. 删除 <TextView> 元素.
4.  <RelativeLayout> 改为 <LinearLayout>.
5. 添加 android:orientation 属性，值设为 "horizontal".
6. 移除 android:padding 属性和 tools:context 属性.

改之后是这样的:

res/layout/activity_my.xml

<LinearLayout xmlns:android="/apk/res/android"    xmlns:tools="/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal" ></LinearLayout>

LinearLayout 是一个 view group ( ViewGroup的子类) 水平或垂直方式布局被其包含的子view, 方向由 android:orientation 属性指定.  LinearLayout的子view按其在 XML文件中出现的顺序显示在屏幕上.

另两个属性, android:layout_width 和 android:layout_height, 是所有view必须的，用来指定尺寸.

因为 LinearLayout 是此布局的根view, 因此将其宽度和高度设为 "match_parent"用来充满整个屏幕。该值的意思是容器有多大，就显示多大.

更多信息请查看 Layout 指南.

添加文本框

和其他 View 对象一样, 必须指定 EditText 对象的一些XML格式的属性.

1. 在 activity_my.xml 文件, 在 <LinearLayout> 元素, 定义一个 <EditText> 元素，其id 属性设为 @+id/edit_message.
2. 定义 layout_width 和 layout_height 属性为 wrap_content.
3. 定义 hint 属性为一个字符串对象 edit_message.

 <EditText> e元素的定义如下:

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

唯一标识, 用来在代码中表示此元素.

 (@) 表示引用 XML中定义的资源. 随后紧跟资源的类型 (本例中类型是id), 一个斜线, 随后是资源名称(edit_message).

 (+) 只在第一次定义资源的Id时使用.当编译app时, SDK tools 使用此 ID 在项目的 gen/R.java 文件创建一个新的资源Id用来表示EditText. 

android:layout_width 和android:layout_height

"wrap_content" 表示大小随内容变化而不是固定大小. 如果使用 "match_parent",  EditText将充满整个屏幕.

android:hint

文本框内容为空时显示的提示. 不是使用具体的字符串常量，而是通过 "@string/edit_message" 引用定义在另一个独立文件中的字符串资源. 

添加字符串资源

默认包含一个 res/values/strings.xml. 添加一个名为 "edit_message" 的字符串，值为 "Enter a message."

1. 在Android Studio, 从 res/values 目录, 打开 strings.xml.
2. 添加 "edit_message" 字符串，值为"Enter a message".
3. 添加 "button_send" 字符串，值为 "Send"..
4. 移除 "hello world" 字符串.

 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>

这样的好处是可以在一个地方管理所有UI文本字符串，修改和更新会很方便。还为app的本地化提供便利.

使用字符串资源支持多国语言，请查看 Supporting Different Devices class.

添加按钮

1. 在 Android Studio, 从 res/layout 目录,打开 activity_my.xml 文件.
2. 在 <LinearLayout> 中, 定义一个 <Button> 元素，紧随在 <EditText>元素之后.
3. 添加并设置属性之后， <LinearLayout> 应是这样的:

res/layout/activity_my.xml

<LinearLayout xmlns:android="/apk/res/android"    xmlns:tools="/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 属性，因为不需要在代码中引用它.

现在两个元素的大小只有内容需要的那么大, as shown in figure 2.

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

这样设置宽度不太适合文本框，这里可以将文本框宽度设置为占据按钮之外的宽度，二者充满屏幕宽度. 在 LinearLayout 使用 android:layout_weight 属性可以实现.

weight值是一个数字，代表view可占据的空间, 和同级views空间相关. 例如一个view设为1，另一个设为2，则第一个占据1/3，而第二个占据2/3.

weight默认值是 0, 如果只有一个view指定了大于0的weight，则其占据剩余所有空间.

1. 

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

完整的 activity_my.xml是这样的:

res/layout/activity_my.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"    xmlns:tools="/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

运行app，查看效果。

 next lesson 学习如何相应按钮事件，向另一个Activity发送信息等。