Training--创建简单的用户界面

创建简单的用户界面

 

安卓的图形用户界面是基于View 和 ViewGroup 的对象层次结构（如下图所示）。View对象通常指那些UI小组件比如按钮，文本框，而ViewGroup对象是不可见的，它们通常是View组件的容器，用来布局这些View组件的，例如一个网格或者垂直列表。

 

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

安卓使用XML文件来定义View或者ViewGroup对象。

 

在本课，你将学会如何在一个XML文件里定义一个包含按钮和文本框的布局。在下一课，你将学会如何为按钮添加响应事件，如何将一个文本框的内容发送给另一个Activity。

 

注意：在代码里也是可以定义布局，添加组件的，但是使用XML的好处最主要是你可以根据屏幕的大小适配各种布局文件。例如你可以定义两个版本的布局文件，当手机是小屏幕的情况下，使用其中一个，而当手机是大屏幕的时候，使用另一个。具体会在以后的课程上讲到。

 

创建一个LinearLayout布局

 

打开res/layout/ 目录下的  fragment_main.xml 文件（4.4版本的是这个文件名，因为使用了Fragment，这个后面的课程有，4.4以前的应该是activity_main.xml）。

 

注意：在Eclipse里，当打开一个layout文件时，你可以看到一个图形界面编辑器。这个编辑器是一个所见即所得的好工具。在Eclipse里，双击fragment_main.xml，编辑。

 

在这个XML文件里，有一个RelativeLayout 根View和一个 TextView子View。

 

首先，删除 <TextView> 元素，更改 <RelativeLayout>元素为 <LinearLayout>。添加android:orientation属性，将值设置为"horizontal".结果如下：

<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是一个View组（ ViewGroup子类），即用来布局子View，以垂直或水平方向，方向的设定是通过属性值 android:orientation来指定的。每一个子View的显示顺序是按照其在XML中的定义顺序出现的。

 

另外两个属性， android:layout_width 和 android:layout_height，是布局所有View必须的，用来指定其显示大小的。

 

由于LinearLayout是根View，同时设定了宽和高为match_parent, 所以这个View将充满整个手机屏幕。这个值的本质意义是说此View会延伸它自己的宽和高和父View的宽和高一样大小。

 

添加一个文本框

 

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

 

和其他View对象一样，你也必须为 EditText对象设定属性值。请按照下图所示执行：

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

 

关于这些属性值：

android:id

指定此View的唯一标志符，你可以在代码里引用此对象，这样就可以读取它的内容或者控制它的行为等。

        

当你引用XML里的资源对象时，(@)符号是必须的。符号后面紧接着资源类型（本例是id），接着是一个反斜线，然后是资源名字（edit_message）。

        

资源类型前面的符号(+)，表示你是想定义一个资源ID。当你编译APP的时候，SDK工具就会使用这个资源名字来定义一个指向EditText 的ID值，这个值被定义在工程目录下的 gen/R.java文件里。一旦定义了此ID，任何引用此ID的地方都不用再使用符号 (+) 。那么什么时候使用符号 (+)呢，只有你想定义一个新的资源ID。另外如果是引用一个具体的资源，比如字符串资源或者布局文件，也不要使用符号 (+)。具体请参

考下面的注意事项。

 

注意：一个资源对象会被表示成一个简单的唯一的整型名字，这个名字与某个具体的APP资源相联系，比如位图，布局文件，和字符串。

 

这个资源的整型名字都被定义了 gen/R.java文件里，这个文件是自动生成的，请不要手动更改。

 

android:layout_width 和 android:layout_height

"wrap_content"并没有指定具体大小，而是说大小应该保证刚刚够显示内容。但是如果使用值 "match_parent"，那就表示这个EditText大小应该保持和父View 即LinearLayout的大小一样。

 

android:hint

当文本框是空的时候，就会显示一个指定的字符串用来提示用户，即提示文本。没有使用硬编码，而是使用了资源引用，即 "@string/edit_message"。由于是具体的字符串引用，所以没有使用+号。如果你还没有定义字符串，就会看到一个编译错误。但是不要着急，我们马上就会消除这个错误。

 

注意：这个字符串资源的名字edit_message与EditText的ID名字是一样的。但是由于它们是指向不同的资源类型，一个是id,另一个是string，所以不会发生冲突。

 

 

添加字符串资源

 

当需要在UI上显示文本时，最好使用字符串资源引用。由于字符串定义在一个单独的地方，所以与代码的耦合度会非常小，易于修改。而且可以将同样名字的字符串定义在不同的语言目录下，这样当系统更改语言时，会自动显示相应的语言文本。

 

默认情况下，字符串定义在文件res/values/strings.xml 中。添加一个名字为 "edit_message"的新字符串，将值设定为“Enter a message.”

 

可以再添加几个别的字符串。结果如下：

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

 

添加按钮

 

现在可以在fragment_main.xml里紧接着 <EditText>再添加 一个 <Button>, 。

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

这个按钮的宽和高为“wrap_content”，所以它的大小刚好用来显示按钮文本。它没有定义 android:id ，是因为我们不需要在代码中引用它。

 

 

使输入框宽度填充至屏幕剩余空间

 

现在的EditText和Button的大小刚好用来显示本身的内容，如下图所示：

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

 

对于按钮来说挺好的，但是对于输入文本框，显得有些窄巴，因为用户可能输入比较长的内容。怎么办？最好能让它的宽度填充至屏幕剩余空间。你可以给它指定一个权重属性，即 android:layout_weight。

 

这个权重是什么意思呢？其实就是表示占用比的关系。比如现在有两个View，一个权重为2，另一个为1，总和为3，所以第一个View的大小就是剩余空间的2/3，另一个大小为剩余空间的1/3。

 

权重的默认值都是0，你需要指定一个大于0的值。为了让EditText充满剩余空间，我们设定它的权重值为1，另外按钮不设定权重值，则它的大小保持不变。

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

为了显示布局的效率着想，我们需要将EditText的宽度设定为0，即“0dp”。如果不更改android:layout_width="wrap_content"，系统显示的时候会先根据此值计算宽度，其实这个值与最终显示的宽度没有关系，因为会让系统做无用功。

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

设定完后，显示如下图所示：

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

 

整个layout文件如下图所示：

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

 

保存更改，SDK工具会自动编译这个文件。现在你可以运行你的APP来看看效果：

在Eclipse里，点击工具栏的Run ；

或者使用命令行：

ant debugadb install bin/MyFirstApp-debug.apk

 

下节课将会看到如何读取这个组件的内容，并且发送给另外一个Activity。