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

本课将会教你：

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

你应该还读了：

布局

这个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 other

View

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属性。



[code]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

and

Button

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 the

LinearLayout

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

<?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 debug
adb install bin/MyFirstApp-debug.apk

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