第五章 用户界面设计

由 suxinglrzzw 创建， 最后一次修改 2016-02-24 第五章 用户界面设计在本篇教程中我们将为应用程序项目添加布局方案，在这方面XML与Eclipse ADT接口将成为工作中的得力助手——不过在后面两节中还会用到一部分Java开发知识。XML与Java在Android平台的开发工作当中可谓无处不在，如果大家对二者还缺乏基本的了解，请尽快想办法补补课。对于刚刚入门的读者朋友来说，本文所介绍的要点将成为各位日后开发工作的重要基础。1. XML基础知识在我们开始讨论布局之前，先来梳理作为标记语言的XML的基础知识。如果大家对于XML已经很熟悉，可以直接跳过本节。XML是一种用于保存数据值的语言。XML文件在多个领域发挥作用。它们在某些项目中的功能与数据库非常相近，而且通常被作为网页的输出机制。如果大家之前曾经使用过HTML，应该 会对XML的基本功能感到熟悉。在XML中，数据值被保存在元素当中。单一元素通常包含一个开始标记与一个结束标记，如下所示：<product>Onion</product> 如大家所见，开始标记与结束标记几乎完全一样，惟一的区别在于结束标记中多了一个“/”符号。在上面的例子中，数据值也就是元素内容，即文本字符串“Onion”。开始标记也可以容纳与数据项目相信的其它属性信息，如下所示：<product type="vegetable">Onion</product> 每项属性都有一个名称与一个值，其中值就是引号内的部分。元素中还可以包含其它元素：<section name="food"><product type="vegetable">Onion</product><product type="fruit">Banana</product></section>在这种结构中，我们将section元素称为主元素、products元素则被称为子元素。两个子元素之间属于“兄弟关系”。在XML文档当中，必 须存在一个root元素作为主元素，或者被称为“嵌套”。这就构成了一种tree结构，其中子元素作为自主元素延伸出去的分支。如果某个子元素之下还包含 其它子元素，那么它本身同时也具有主元素属性。大家还会遇到另一种自结束元素，其中开始与结束标记并非独立存在：<order number="12345" customerID="a4d45s"/> 其中元素末尾的“/”符号代表结束。我们在Android平台上所使用的全部资源文件都要用到XML标记，其中包括布局文件、可绘制元素、数据值以及Manifest。2. Android布局第一步当大家在安装了ADT的Eclipse IDE当中使用XML时，输入过程中显示的相关背景提示能让编码过程变得更轻松一些。在编辑器中打开新应用中的主布局文件，确保XML编辑标签已经被选 中，这样我们就能直接对代码进行编辑了。我们首先要处理的是用于主屏幕的布局方案，用户在启动应用之后最先看到的就是它。Eclipse会提供一套基础布局，供我们进行个性化修改：<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /></RelativeLayout>如大家所见，根元素是一项布局元素，在上面的示例中为RelativeLayout。Android当中还提供其它几种布局类型，我们可以将一种布局嵌套到另一种当中。这里的根布局元素拥有几项额外属性且与布局效果密切相关，例如宽度、高度以及边距等等。布局元素当中的TextView允许开发人员显示一条文本字符串。TextView是View的一种，View属于可见及交互性元素，用以构成我们的应用程序UI。因此，应用程序中的每套分屏方案都要选择一种View，并在其中包含一种或者多种布局机制。在Android系统中，这些布局被称为ViewGroup对象，每个 ViewGroup内包含一套或者多套View。第二步为了专注于一套布局的基础创建工作，我们要把主布局文件中的现有内容全部删掉，这样才能从零开始着手设计。正如我们之前所提到，大家可以利用 Java代码创建自己的布局或者View，不过Android上的多种工具允许开发者利用XML设计自己的应用UI——这样各位就可以在创建元素的同时直接观察设计效果了。在某些实例中，大家可能见过单纯通过Java代码创建一些或者全部UI的做法，但现实情况下大部分创建工作还是要由XML完成的。这种做法还能保证应用程序逻辑与显示元素彼此独立。<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <!-- views go here --></LinearLayout>LinearLayout会沿横向或者纵向显示我们打算使用的View。在以上示例中显示方向为垂直，因此每个View都会沿屏幕下方依次排列。如 果采取横向布局，那么各个View将由左至右依次排列。如果使用“layout width”与“layout height”两种属性（在Android当中，它们往往被称为布局参数），那么布局会被拉伸至横向与纵向的最大长度。在“layout height”声明行之后再添加一条新行，通过键入“android：”准备开始输入属性。当大家输入对应内容，Eclipse就会提供一套与该属性相关 的列表。大家可以继续输入内容以缩小属性列表，也可以直接在列表中用鼠标进行点选。现在我们选择“android：gravity”属性。键入“center_horizontal”作为gravity值，这样其中包含的元素就会以X轴为中心加以显示：android:gravity="center_horizontal"这种方式适用于布局中的一切元素。我们可以添加其它几种额外显示属性，例如填充、边距以及背景等。不过在今天的文章中，我们先从最简单的项目入手。3. 添加View第一步正面我们开始向布局中添加View。所谓View，是指UI当中的可见元素。让我们首先添加一些文本内容和一个按钮。进入LinearLayout元素（在开始忹结束标记之间），输入“<”之后Eclipse就会提示大家与属性相关的可用元素列表。在列