Android 第三课 构建简单的用户界面
Android的图形用户界面通过 View
和 ViewGroup
的层叠来构建。 View
对象是普通的
UI 小部件,例如按钮和文本框;ViewGroup
对象是不可见的视图容器,定义如何布局其子视图,例如网格和纵向列表。
Android 提供了对应于 View
和 ViewGroup
子类的
XMl 标签,你可以在 XML 通过 UI 元素的层叠来创建你的 UI。
可选布局
使用 XML 定义 UI 布局而不是在运行时通过代码创建布局,有时候是有好处的; 但对于为不同屏幕大小创建不同布局来说,他是特别重要的。例如,你可以创建两个版本的布局, 并告诉系统一个用于“小”屏幕,另一个用于“大”屏幕。更多信息参见教程支持不同设备。
![](http://android.toolib.net/images/viewgroup.png)
图1 - 在布局中,ViewGroup
对象是如何形成分支并包含其它 View
对象的插图。
在这一次教程里,你将学到怎样用XML创建一个带有文本输入框和按钮的界面。 在接下来的课里, 你将学会对按钮做出响应,当按钮被按下的时候文本框里的内容被发送到另外一个Activity。
创建线性布局
从目录 res/layout/
里打开 activity_main.xml
文件。
注意:在 Eclipse 中,当你打开布局文件的时候,首先看到的是 ADT 布局编辑,这个编辑页是使用所见即所得的工具帮助你创建布局。 对于本课来说,你是直接在 XML 里进行操作,因此点击屏幕下方的 activity_main.xml标签进入 XML 编辑状态。
创建该项目时你选择的 BlankActivity 模版提供了以 RelativeLayout
为根视图,
并包含 TextView
子视图的activity_main.xml
文件。
首先,需要删除 <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
布局是一个视图组(ViewGroup
的子类),
用于水平放置或者垂直放置子视图的部件,由属性android:orientation
来设定方向。LinearLayout
布局里的子元素按照
XML 里设定的顺序显示在屏幕上。
另外的两个属性 android:layout_width
和 android:layout_height
用来指定视图的大小,对所有视图来说都是必须的。
因为布局中 LinearLayout
是跟视图,他应该充满整个屏幕区域,
这是通过设置他的高度和宽度为“match_parent
”来实现的。 该值表明, 视图应该扩展其高度和宽度以匹配其父视图的高度和宽度。
关于布局属性的更多信息,参见布局 向导。
添加文本框
在 <LinearLayout>
布局中,添加一个 <EditText>
元素就可以创建一个用户可编辑的文本框。
与其他视图
对象一样,你需要设置
XML 里的某些属性来指定 EditText
的具体功能,下边是你应该<LinearLayout>
布局里指定的一些属性元素:
<EditText android:id="@+id/edit_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/edit_message" />
关于资源对象
资源对象是简单的可以唯一识别命名整数,他与应用程序资源关联,比如位图、布局文件和字符串。
每个资源在项目的 gen/R.java
文件中都定义了一个对应资源对象。 你可以通过使用 R
类中的对象名来参照你的资源,比如当你需要为 android:hint
属性指定一个字符串值的时候。你也可以创建任意的资源
ID,通过android:id
属性关联到视图,它允许你从其它代码中参照这个视图。
SDK 工具在每次你编译应用时生成R.java
。 你不能手动更改该文件。
更多内容请阅读开发向导 提供资源。
关于这些属性:
android:id
- 他为视图提供唯一标识,你可以在程序的代码里进行引用,你可以对这个类进行读和修改的操作 (在下一课里会用到)。
当你想从 XML 里使用资源类的时候必须使用“
@
”符号。 其后是资源类型(这里是id
)、斜线、和资源名称 (edit_message
)。资源类型前的加号 (
+
) 在你首次定义资源 ID 时使用。在你编译应用时,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
或string
), 因此使用相同的名称也不会引起冲突。
添加字符串资源
当你需要在用户界面中添加文本时,你应该总是使用资源来指定每个字符串。 字符串资源允许你在一个位置管理所有的 UI 文本,这使寻找个更新文本更容易。 外部的字符串, 也可以让您根据不同的语言,为每个字符串资源提供可供选择的定义来本地化你的应用程序。
默认情况下,你的 Android 项目包括一个字符串资源文件,它在“res/values/strings.xml
”。 添加一个名为“edit_message
”的新字符串,将其值设置为“Enter
a message”。 (你可以删除名为“hello_world”字符串)。
既然你在编辑该文件,顺便为即将添加的按钮“button_send
”添加一个值为“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>
关于使用字符串资源为其它语言本地化你的应用的更多信息,参见教程“支持不同设备”。
添加按钮
现在,紧接着 <EditText>
元素添加一个 <Button>
到布局中:
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" />
高度和宽度都设置为“wrap_content
”,所以按钮会大到足以显示其文本内容。 此按钮并不需要的android:id
属性,因为活动的代码中不会用到它。
使输入框宽度充满整个屏幕
如图2所示,目前布局设计成使 EditText
和 Button
两个小部件的大小适合其内容。
![](http://android.toolib.net/images/training/firstapp/edittext_wrap.png)
图2. EditText
和 Button
小部件宽度设置为“wrap_content
”。
该设置对按钮来说,工作得很好,但并不适用于文本字段,因为用户可能输入更长的文字。 因此, 使文本字段充满屏幕宽度的未使用区域会比较好。 在 LinearLayout
布局中,
你可以通过指定 android:layout_weight
属性设置权重来实现。
权重值是一个数字,指定每个视图所要占用的剩余空间量,对于兄弟视图的相对占用量。这有点像调酒配方: “两份伏特加酒,一份咖啡利口酒”,即三分之二的饮料是伏特加酒。例如,如果你设置一个视图的权重是 2、 另一个权重为1,总和是3。所以第一个视图填充剩余的空间的三分之二,第二个视图填充其余空间。 如果添加了第三个视图,并设它的权重为1,那么现在第一个视图(权重2)得到1/2的剩余空间, 剩下的两个各获得1/4。
所有视图的默认权重为 0,因此,如果只有一个视图的权重大于 0, 则该视图填充为各视图分配必要空间后剩余的所有空间。因此,要使 EditText
元素填充布局的剩余空间,设它的权重为1,保持按钮没有权重。
<EditText android:layout_weight="1" ... />
为了提高布局效率,指定了权重时,你应该将 EditText
的宽度设为零(0dp)。
设置宽度为零会提高布局性能,是因为使用“wrap_content
”作为宽度时, 需要系统进行无意义的计算,因为权重值需要另外的宽度计算,来填充剩余空间。
<EditText android:layout_weight="1" android:layout_width="0dp" ... />
图3显示了将所有权重分配给 EditText
元素的结果。
![](http://android.toolib.net/images/training/firstapp/edittext_gravity.png)
图 3. 给予 EditText
小部件所有权重,
填充了 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>
此布局由创建项目时通过 SDK 工具生成的默认 Activity
类加载,
所以你现在可以运行应用来查看结果:
- 在Eclipse中,从工具栏中单击“Run”
。
- 或者从命令行,将目录切换到你的 Android 项目的根目录下,然后执行:
ant debug adb install bin/MyFirstApp-debug.apk
继续下一课,你可以学习如何响应按钮按下,读取文本字段的内容,启动另一个活动,等等。