《Learning Android中文版》学习笔记06

6. Android 用户界面

本章介绍Android中用户界面的构建方法。我们将在这里创建第一个Activity作为实例，体验如何使用XML描述界面布局，以及在Java中引用它的方法。随后介绍View(又称Widget，控件)和Layout(布局)的概念，以及如何在Java中捕获事件(比如单击按钮)。另外，还需要在这里导入一个三方的jar文件，用来访问 Twitter 提供的 API。

到本章结束，你就有了一个自己编写的 Twitter 应用。暂时它只有一个界面，允许用户输入消息并发布到网上。

6.1. 创建用户界面的两种方法

Android提供了两种风格可供我们创建用户界面(UI)：一种是声明风格，另一种是编程风格。它们之间的差别不小，但是我们想做好界面，往往离不开它们的相互配合。

声明式的用户界面

声明式就是使用XML来定义UI的外观。通过标签表示显示出来的相应元素，这与使用HTML编写网页是很相似的。若是以前写过HTML页面，编写声明式的Android界面也很快就能上手。

声明式的好处就是，便于使用所见及所得(WYSIWYG)工具——有些来自Eclipse Android Development Tools(ADT)的扩展，有些来自第三方。另外一个好处是，XML是易于人类阅读的，即使你不熟悉Android的平台与框架，也可以大致看得明白。

声明式的缺点是也正在XML本身。描述界面的外观样式，XML自是再合适不过，但是响应外部事件、处理用户交互它就无能为力了。而这就是引入编程式的理由。

编程式的用户界面

编程式的用户界面就是使用Java代码来编写UI，做过Java AWT或者Java Swing开发的同学对此肯定不会陌生。这跟其它语言中提供的UI库也区别不大。

假如你想通过编写代码的方式创建一个按钮，一般就需要声明一个按钮变量、获得按钮的实例、添加到容器里面，然后设置相应的属性——颜色、文本、文本大小、背景颜色等等不一而足。你也希望对按钮的点击事件做些响应，因此还需要添加额外的逻辑。这样一来二去，敲出来的代码是很可观的。

理论上讲，声明式风格能做到的，编程式风格也都能做到。但是通过Java代码，你更可以为按钮的点击事件作出响应——这也正是应用编程式风格的主要场景。

各取所长

好，那我应该选择哪种方法？好的选择是两者皆用：使用声明式(XML)表示用户界面中的静态元素，比如页面布局、控件摆放等；同时使用编程式(Java)来定义控件对用户操作的响应。换种说法，就是使用XML描述它的"样子"，而使用Java定义它的"操作"。

Note:

虽然两种做法风格迥异，但是到最后XML终究还是要"解析"到Java的运行环境中才可以显示出来。实际运行的只有Java代码。

6.2 View与Layout

Android 通过 Layout 与 View 机制组织UI中元素的显示方式。View 就是屏幕上显示的控件——比如按钮、标签、文本框等等。而 Layout 用来安排 View 的排列，比如它可以将一组按钮或标签排成一行或者一列。

如果你有 AWT 或者 Swing 的编程经验，那就不难发现 Layout 对应 Java 的容器( Container )， View 对应 Java 的组件( Component )，都是很相似的东西。另外， Android 中的 View 有时也被称作// 控件(Widget)//。

View与Layout

Android 通过 Layout 与 View 机制组织UI中元素的显示方式。View 就是屏幕上显示的控件——比如按钮、标签、文本框等等。而 Layout 用来安排 View 的排列，比如它可以将一组按钮或标签排成一行或者一列。

如果你有 AWT 或者 Swing 的编程经验，那就不难发现 Layout 对应 Java 的容器( Container )， View 对应 Java 的组件( Component )，都是很相似的东西。另外， Android 中的 View 有时也被称作// 控件(Widget)//。

View与Layout

Android 通过 Layout 与 View 机制组织UI中元素的显示方式。View 就是屏幕上显示的控件——比如按钮、标签、文本框等等。而 Layout 用来安排 View 的排列，比如它可以将一组按钮或标签排成一行或者一列。

如果你有 AWT 或者 Swing 的编程经验，那就不难发现 Layout 对应 Java 的容器( Container )， View 对应 Java 的组件( Component )，都是很相似的东西。另外， Android 中的 View 有时也被称作// 控件(Widget)//。
View与Layout

Android 通过 Layout 与 View 机制组织UI中元素的显示方式。View 就是屏幕上显示的控件——比如按钮、标签、文本框等等。而 Layout 用来安排 View 的排列，比如它可以将一组按钮或标签排成一行或者一列。

如果你有 AWT 或者 Swing 的编程经验，那就不难发现 Layout 对应 Java 的容器( Container )， View 对应 Java 的组件( Component )，都是很相似的东西。另外， Android 中的 View 有时也被称作// 控件(Widget)//。

图6.1 Layout与View

Note:

不要将Android UI中的控件(Widget)与应用程序小部件(App Widget)相混淆，后者是指可以嵌入到其它应用程序(如主屏幕程序)里面显示的小程序。而这里我们谈到的控件(Widget)，是指Acitivity中的View。

可以把Layout看作是容纳一些子元素的容器。这些子元素可以是View，也可以是Layout，这样可以方便组合出复杂的用户界面。

Layout负责为子元素安排位置，不同的Layout提供不同的安置方法。如图 6.1 "Layout与View"

Android框架中内置的Layout各种各样，不过常用的大约也就这几个：LinearLayout, TableLayout, FrameLayout, RelativeLayout和AbsoluteLayout。

LinearLayout

(to 编辑:这里LinearLayout若直接翻译成中文并不合适，因为它们在指代某种布局的同时，更是特指Android框架中的某个类。)

LinearLayout(线性布局)是最简单的Layout之一，只是简单地纵向或者横向排列它的子元素。它会按顺序计算每个子元素需要的空间，如果一个“较早加入的”元素占据了整个屏幕大小，后面的元素就显示不出来了。因此子元素的顺序很重要。

LinearLayout的一个重要属性是layout_orientation。可用的选项有Vertical和Horizontal，用以指示它是水平排列还是垂直排列。

Tip:

LinearLayout可能是最简单也最常用的Layout，但它并不总是最好的选择。一条经验是，一旦你想嵌套多个LinearLayout，那就换用别的Layout吧，比如RelativeLayout之类。Layout如果嵌套的太深，会浪费较多的CPU时间，电池的续航也会因此而受到影响。

TableLayout

TableLayout(表格布局)将其子元素布局在一个表格之中。TableLayout只接纳TableRow作为自己的子元素，表示表格中的一行，下面可以容纳其它子元素。TableRow水平地排列它的子元素，这同水平排列的LinearLayout很像。

熟悉HTML的同学可能会有同感，TableLayout接近于<table>标签，而TableRow接近于<tr>标签。不过Android中并没有<td>的对应物，每一行的列数由TableRow的子元素的个数动态决定。

TableLayout的一个重要属性是stretch_columns，可以用它来展开列号对应的列来占据可用的空间。也可以通过*来展开所有的列。

FrameLayout

FrameLayout(帧布局)将其下的子元素相互覆盖起来，就像一副扑克牌，只留一个显示在外面。它可以用于标签的实现，也可以作为以后要用的控件的临时存放地。

RelativeLayout

RelativeLayout(相对布局)用于指明子元素之间的相对位置。它十分强大，不需要嵌套就可以实现复杂的布局，同时还可以减少使用的控件的数量，从而提高程序的整体性能。RelativeLayout需要我们为它的每个子元素提供一个ID，你可以单独设置它们的相对位置。

AbsoluteLayout

AbsoluteLayout(绝对布局)可以为它的子元素设置一个屏幕上的绝对位置。这个Layout简单易懂，对所见及所得工具来说是再好用不过。缺点就是不那么灵活，在某个屏幕上显示很好的界面，换个不同大小、宽高、分辨率的屏幕可能就不能正常显示了。

6.3. 启动Yamba项目

接下来开始编写Yamba。打开你的Eclipse，选择File→New→Android Project。
然后出现一个对话框(如 图 6.2 "New Project 对话框")，要求你输入有关新项目的各种信息。其中重要的条目如下：

Project Name

这是Eclipse项目的名字。出于方便以后使用命令行的考虑，最好不要在项目名里夹带空格。输入Yamba。

Contents

保留默认选项也就是creating a new project，不需要修改。

Build Target
目标平台的版本。不分标准版还是定制版，只要是Android平台即可。前面我们既已定下将Android 2.3 (API level 9)作为目标平台，在这里就选择Android 2.3。

Application name

应用程序的名字。要求是纯文本，内容可以是任何有效字符。在这里输入Yamba即可。

Package name

按照Java package的命名规范为项目的package命名，也就是逆序的域名形式。在这里使用com.marakana.yamba。

Create Activity
是否为项目默认创建一个Activity。保留默认的选中即可。Activity的名字必须遵循Java类的命名规范，也就是CamelCase命名法。在此输入StatusActivity。

Min SDK Version
表示支持平台的最低版本。一般这个数字与前面的API Level是相互对应的，不过你的应用若并没有高版本API的依赖，那就可以降低这个数字。我们的应用最低可以在API Level 4(Android 1.6)上运行，因此输入4。一个较低的API Level有助于提高兼容性，从而允许更多的用户使用它。

单击Finish。即可在Eclipse的Package Explorer里面见到一个新的项目，也就是Yamba。

图 6.2. New Project对话框

6.4 StatusActivity的布局

接下来开始设计一个用户界面，用户可以在里面输入新消息并发布。
Eclipse默认会在res/layout下创建一个main.xml文件。出于一致性的考虑，我们将把它的名字改为status.xml以对应StatusActivity。在Eclipse中重命名一个文件，就右键点击它，选择Refactor→Rename…，输入新名字即可。Eclipse在重命名时会智能地做些同步工作，使所有引用到这个文件的地方保持一致。这在更新Java文件时可以做到完全自动，但对XML文件就不那么尽善尽美了。修改一个XML文件名，我们还需要手工修改Java代码中引用R类的相关部分。比如在这里，就需要将onCreate()方法中的setContentView(R.layout.main)修改为setContentView(R.layout.status)。

这个界面分为四部分：

• 屏幕上方显示的标题，TextView控件。
• 消息的输入框，在此使用EditText控件。
• 更新状态的按钮，Button控件。
• 一个容纳以上所有控件的Layout，它负责将这些控件垂直排开。在此选用前面提到的常用Layout之一——LinearLayout。

StatusActivity的源码大致如下：

例 6.1. res/layout/status.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- Main Layout of Status Activity -->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="fill_parent"
  android:layout_height="fill_parent">

  <!-- Title TextView-->

  <TextView android:layout_width="fill_parent"
    android:layout_height="wrap_content" android:gravity="center"
    android:textSize="30sp"
    android:layout_margin="10dp" android:text="@string/titleStatus"/>

  <!-- Status EditText  -->
  <EditText android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:layout_weight="1"
    android:hint="@string/hintText" android:id="@+id/editText"
    android:gravity="top|center_horizontal"></EditText>

  <!-- Update Button -->
  <Button android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:text="@string/buttonUpdate"
    android:textSize="20sp" android:id="@+id/buttonUpdate"></Button>

</LinearLayout>

以上代码由Eclipse Graphical Layout自动生成，它是作为Eclipse插件的Android Development Tools(ADT)的一部分，即编辑Android中XML文件的辅助工具，如 图 6.3. Graphical Layout模式下的status.xml。ADT可以辨认出这是在编辑用户界面的Layout，因此按照Graphical Layout模式打开status.xml，很方便就可以生成上述的代码。

图 6.3. Graphical Layout模式下的status.xml

在前面的章节里，我们已对这些XML资源的概念略有提及，但是代码中存在的细节仍是需要在后面慢慢体会的。