Android开发第1-3课：建立一个简单的用户交互界面

本课将会教你：

1. 创建一个线性布局
2. 添加一个文本编辑框
3. 添加字符窜资源
4. 添加按键
5. 使得输入框填充屏幕宽度

你应该还读了：

• 布局

这个Andorid 的app用户图像界面使用了View对象和ViewGroup对象。 对象通常是UI窗体，例如按钮或者文本编辑框，而视图容器组件通常是不可见的，用于决定子视图的布局，例如网格布局或者垂直列表布局。

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

比较布局方案

在几种情况下，用XML代替运行时代码来声明你的UI布局你非常有效的，更重要的是，你可以为不同大小的屏幕创建不同的布局。例如，你可以为一个布局创建两个版本，告诉系统在小屏幕时使用小布局，大屏幕时使用大布局。想了解更多的信息，请看有关多设备至此的说明。

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

在本课中，你将会使用XML来创建一个布局，包括文本编辑框，和按键。在接下来的课程中，你将会响应按键事件：当按下一个按键时，将文本编辑框的内容发送到另外一个activity中。

创建一个线性布局

---

从res/layout/目录中打开 activity_main.xml 文件。

注意: 在Eclipse中，当你打开一个布局文件，你将会首先看到图形布局编辑器。这个编辑器可以帮助你通过WYSIWYG工具来建立布局。 在本课中，你将会直接使用XML，所以请在屏幕底部点击点击activity_main.xml选项来打开XML编辑器。如下图红色圈住的部分所示。

你在本工程中所创建的空白活动模版包括一个activity_main.xml文件， 此文件中包含RelativeLayout根视图和一个TextView子视图。

首先, 删除 <TextView> 元素并且将<RelativeLayout> 元素改为<LinearLayout>。然后添加android:orientation 属性并且设置为"horizontal"。代码如下所示：

<?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" ></LinearLayout>

实际修改前截图：——我的实际代码和教程的有点出入，应该是版本有所不同。

实际修改后截图：——改为LinearLayout后，添加orientation属性。

LinearLayout 是一个用于布局垂直或者水平方向的的子视图的视图组，由 android:orientation 属性指定。 在LinearLayout 布局中的每个子视图都按在XML出现的循序进行排列。

另外两个属性, android:layout_width 和 android:layout_height, 是所有视图都必须具备的，用于决定视图的大小。

由于 LinearLayout 是当前布局的顶层视图, 它应该填充整个屏幕，为此将宽高属性设置为"match_parent"。 这个值说明，当前的视图的宽高将会拉伸以适应父视图。

想了解更多的布局属性，请看布局向导。

添加一个文本编辑框

---

为了添加一个用户可编辑的文本编辑框，在<LinearLayout>中添加一个 <EditText>元素。

和其他 View 对象一样，你必须定义确定的XML属性来指定EditText 对象的属性。 下面演示了如何在<LinearLayout> 中声明它的元素：

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

截图如下：

关于资源对象

一个资源对象就是一个简单的独一无二的整数名字，这个整数名字和一个app的资源相关，例如位图，布局文件或者字符窜。

每一个 资源都有一个对应的资源对象，这个对象定义在你的工程的gen/R.java文件中。 你可以利用R类中的对象名字来引用你的资源，例如当你需要为 android:hint 属性指定一个字符串的值。 你也可以创建任意的资源ID，并且通过android:id 属性来和一个视图相关联，这样你就可以在其他代码中引用这个视图。

你每次编译你的app，SDK 工具自动产生 R.java。你不应该手动修改这个文件。

想了解更多信息，请看提供资源的方法的相关介绍。

关于这些属性：

android:id

这个id为视图提供一个独一无二的标识符，在你的app代码中，可以通过这个id来引用这个对象，例如都取并操作这个对象（在下一课中，你将会看到）。

当你在XML中引用资源的时候，必须使用符号@。@后面跟着资源的类型(id in this case)，一个斜杆，然后是资源名字(edit_message)。

资源类型前的加号 (+)，只是在第一次定义的一个资源id的时候需要。当你编译app时，SDK工具使用这个ID 名字来在你的工程中的gen/R.java文件中创建和一个新的资源ID，用于引用EditText 元素。一旦资源ID被使用这种方法来声明了一次，再次引用这个ID就不需要加号来了。 加号只是在定义一个新的资源ID都的时候需要，而在定义确定的资源时不需要，例如字符窜和布局。 有关资源对象的更多介绍，请看上面。

android:layout_width 和android:layout_height

这里不直接定义宽高的大小，而是用 "wrap_content" 来指定当前的视图应该和内容的大小相匹配。如果你想要使用"match_parent", 那么EditText元素将会填充陪屏幕, 因为它应该和父LinearLayout的大小一致。想了解更多信息，请看布局向导。

android:hint

这个属性指定当文本框为空的时候将会现实的内容。这里使用"@string/edit_message" 来引用定义在另外一个文件的字符窜资源，而不是使用硬编码。由于它引用的是确定的资源(而不仅仅是一个标识符)，因此不需要加号。然而，由于你还没有定义这个字符串资源，你将会看到编译错误。在下一节中，你将会改进这个错误。

注意: 这个字符串资源和元素ID:edit_message有同样的名字。然而，引用资源的时候通常会用资源类型类做限定（例如id或者字符串），因此使用同样的名字也不会引起冲突。

添加一个字符串资源

---

当你需要在用户界面中添加文本时，你应该将每个字符串指定为一个资源。字符串资源使得你可以在同一个地方管理所有的UI文本，这使得查找和更新文本都变得很容易。 另外，字符窜也允许你将你的app本地化到不同的语言，只需为每个字符串资源提供可选的定义即可。

默认情况下，你的Android工程包含一个字符串资源文件res/values/strings.xml.。添加一个新的字符串名字"edit_message"，并且将它的值设为 "Enter a message." (你可以删除"hello_world" 字符串。)

当你打开这个文件时，另外为按键添加一个 "Send" 字符串，下面将会创建一个按键，叫"button_send"。

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="menu_settings">Settings</string>    <string name="title_activity_main">MainActivity</string></resources>

修改前截图：——将原来的Helllo world！删除掉。

修改后截图：

要了解更多有关将你的app本地化到其他语言中的信息，请看支持不同设备类型的介绍。

添加一个按键

---

现在在你的布局中添加<Button>，紧跟着<EditText> 元素:

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

截图如下所示:

由于宽高设置为 "wrap_content"，所以按键的大小将会根据按键的文本去调整。这个按钮不需要android:id 属性，因为它不会被引用。

使得输入框填充屏幕宽度

---

当前的布局被设计为 EditText 和Button 窗体的大小都和其内容相适应，如figure 2所示。

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

这对于一个按键来说是好的，但是对文本编辑框来说就不是这样了，因为用户可能会输入一些较长的文本。所以，如果能够是的文本编辑框填充未用的宽度空间，将会更好。你可以在LinearLayout中修改weight 属性来达到这个目的，例如你可以指定使用android:layout_weight 属性。

这个 weight 的值是一个指定每个视图除了本身消耗的空间外，占据的剩余空间的大小的数字 ，和兄弟视图都的总空间耗费相关。 这个有点像饮料配方的总数: "2份vodka, 1 份 coffee liqueur"，也就是说2/3的饮料是 vodka。例如，如果你将一个视图的weight为 2，另一个视图的 weight为1，则总和为3，所以第一个视图填充2/3的剩余空间，第一个视图 view填充剩余的空间。 如果你添加第三个视图，并且将其 weight设定为1，那么第一个视图的将会获得1/2的剩余空间，其两个分别获得1/4的剩余空间。

所有的视图的默认weight的值都是0，所以如果你指定任意一个weight的值大于0，那么它将占据剩余的所有空间。所以，为了使得EditText 元素在你的布局中填充剩余空间，将它的 weight设为1，其它的保留为0。如下所示。

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

当你指定weight时，为了提高布局的效率，你应该修改EditText的with为0 (0dp)。将width设为0可以提高布局性能，应为使用"wrap_content"作为 width要求系统计算width 是最后不相干的，因为weight值要求另外一个width计算去填充剩余的空间。

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

截图如下所示：

Figure 3显示了当你为EditText 元素设置了 weight时的效果。

Figure 3. The EditText widget isgiven all the layout weight, so fills the remaining space in theLinearLayout.

下面是你的完整布局的示例：

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

截图如下：——注意，红色圈住的属性不能设为“wrap_content”，否则文本编辑框不能填充屏幕宽度。

这个布局默认被默认的 Activity 类所应用， 它在你创建你的工程的时候由SDK工具产生，所以你现在可以运行app来看一下结果。

• 在Eclipse中，在工具栏中点击 Run 。
  
• 或者在命令行中，将当前目录改到你的Android工程的根目下，然后执行：

  ant debugadb install bin/MyFirstApp-debug.apk

在下一课中将会教你如何相应按键事件，还有如何从文本框最中读取内容。请看下一课。