Android 第三课 构建简单的用户界面

构建简单的用户界面

Android的图形用户界面通过 View 和 ViewGroup 的层叠来构建。 View 对象是普通的 UI 小部件,例如按钮文本框ViewGroup 对象是不可见的视图容器,定义如何布局其子视图,例如网格和纵向列表。

Android 提供了对应于 View 和 ViewGroup 子类的 XMl 标签,你可以在 XML 通过 UI 元素的层叠来创建你的 UI。

图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>元素就可以创建一个用户可编辑的文本框。

EditText类属于View的一个用于展示可编辑的文本的子类。 和View的别的类一样,你需要设置XML里的某些属性来指定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" />

关于这些属性:

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 文本,这使寻找个更新文本更容易。 外部的字符串, 也可以让您根据不同的语言,为每个字符串资源提供可供选择的定义来本地化你的应用程序。

默认情况下,你的 Andr​​oid 项目包括一个字符串资源文件,它在“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 两个小部件的大小适合其内容。

图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 元素的结果。

图 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”
  • 或者从命令行,将目录切换到你的 Andr​​oid 项目的根目录下,然后执行:
    ant debug
    adb install bin/MyFirstApp-debug.apk

继续下一课,你可以学习如何响应按钮按下,读取文本字段的内容,启动另一个活动,等等。

posted @ 2013-06-28 11:51  一个学渣  阅读(270)  评论(0编辑  收藏  举报

 

CSDNGitHub 联系邮箱:aikongmeng@gmail.com


Copyright 2008-2019 Government All Rights Reserved