本课将会教你:


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

你应该还读了:

  • 布局



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

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



比较布局方案

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



Cordova android 交互 android交互规范_Cordova android 交互

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编辑器。如下图红色圈住的部分所示。

Cordova android 交互 android交互规范_Text_02

你在本工程中所创建的空白活动模版包括一个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>



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

Cordova android 交互 android交互规范_android_03

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

Cordova android 交互 android交互规范_Eclipse_04


LinearLayout 是一个用于布局垂直或者水平方向的的子视图的视图组,由

android:orientation 属性指定。 在

LinearLayout 布局中的每个子视图都按在XML出现的循序进行排列。


另外两个属性, android:layout_widthandroid: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


当你在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!删除掉。

Cordova android 交互 android交互规范_Eclipse_05

修改后截图:

Cordova android 交互 android交互规范_android_06


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

添加一个按键


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



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



截图如下所示:

Cordova android 交互 android交互规范_Cordova android 交互_07

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

使得输入框填充屏幕宽度


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



Cordova android 交互 android交互规范_android_08

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"
        ... />


截图如下所示:

Cordova android 交互 android交互规范_Eclipse_09

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



Cordova android 交互 android交互规范_Text_10


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”,否则文本编辑框不能填充屏幕宽度。

Cordova android 交互 android交互规范_Cordova android 交互_11

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

  • 在Eclipse中,在工具栏中点击 Run 。
  • 或者在命令行中,将当前目录改到你的Android工程的根目下,然后执行: ant debug adb install bin/MyFirstApp-debug.apk

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