深入浅出Android-6-入门-初识GUI界面

描述使用者介面

将一份创意落实到可执行的应用程式，背后需要的是从阅读与写作程式码中累积的经验，并有坚持理念、直到完成的耐心。

表达使用者介面

我们可以先用前几章教的方法设定并执行模拟器，看看模拟器运作后的结果：

我们看到一个文字栏位，上面有一串文字 「Hello World, Bmi!」。这就是 Android 预设程序架构的范例。

由于才刚开始实际接触到 Android 应用程式，我们先从简单的开始：这一节中，我们的目标是将 「Hello World, Bmi!」 换成别的文字。

那么，「Hello World, Bmi!」，这串字串藏在哪里呢？

先打开 「res/layout/main.xml」

代码:

    1  <?xml version="1.0" encoding="utf-8"?>
2  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3     android:orientation="vertical"
4     android:layout_width="fill_parent"
5     android:layout_height="fill_parent"
6     >
7      <TextView
8          android:layout_width="fill_parent"
9          android:layout_height="wrap_content"
10        android:text="Hello World, Bmi"
11        />
12 </LinearLayout>

原来「Hello World, Bmi!」字串就藏在「res/layout/main.xml」这个档桉的第 10 行中。我们只要简单地将第 10 行修改成如下

代码:

android:text="Hello World, Bmi!”

再执行一次模拟器，就可以得到一个相似的应用程式，只是内文变成了我们刚刚修改的内容。

既然找到了「Hello World, Bmi!」字串，我们就试着将「android:text」属性值从「Hello World, Bmi!」改成「哈喽，BMI」，然后执行看看吧。

代码:

android:text="哈喽，BMI"

结果发现 Android 模拟器中文嘛也通，字型也相当漂亮。

要开始学习 Android 应用程式确实很简单吧？不过为了显示「Hello World, Bmi」，也用到了许多程式码。到底这些程式码有什么含意呢？

我们马上来学习 「main.xml」这个 XML 介面描述档的内涵吧。

Android 平台，使用者GUI介面都是透过 ViewGroup 或 View 类别来显示。ViewGroup 和 View 是 Android 平台上最基本的使用者介面表达单元。我们可以透过程式直接呼叫的方法，调用描绘使用者介面，将萤幕上显示的介面元素，与构成应用程式主体的程式逻辑，溷合 在一起编写。或是，也可以将介面显示与程式逻辑分离，照着 Android 提供的这个较优雅的方式，使用 XML 描述档，来描述介面元件的组织。
讲解

我们看到的「Hello World, Bmi」就包含在「main.xml」 这个档桉中。 接着，我们就直接分部份来讲解这个「main.xml」的内容：

第 1 行

代码:

    <?xml version="1.0" encoding="utf-8"?>

XML (Extensible Markup Language) 是一种标记描述语言，不管是语法还是看起来的样子，都相当类似网页所使用的 HTML 标记语言。XML 被广泛地运用在 Java 程式的设定中。「main.xml」 文件裡，第一行是每个 XML 描述档固定的开头内容，用来指示这个文字档桉是以 XML格式描述的。

第 2, 6 与 12 行

代码:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"></LinearLayout>

接着我们看到第一个标签，与 HTML 网页标签相当类似。

代码:

    <LinearLayout></LinearLayout>

" 线性版面配置"(LinearLayout)标签，使用了两个「LinearLayout」标签，来表示一个介面元件的区块。后头的标签前加上一个「/」 符号来表示结束标签。"线性版面配置" 所指的是包含在 「LinearLayout」标签中，所有元件的配置方式，是将一个接一个元件由上而下排队排下来的意思。

代码:

     xmlns:android="http://schemas.android.com/apk/res/android"

xmlns 开头的这串叙述，是用来宣告这个 XML 描述档桉的的名称空间(NameSpace)，后面接的URL(网址)，表示这个描述档桉会参照到 Android 名称空间提供的定义。 所有 Android 版面配置档桉的最外层标签中，都必须包含这个属性。

注意标签需要两两对称。一个标签「

引用:

<linearlayout>

」在一串叙述的前头，另一个标签「

引用:

</linearlayout>

」在叙述的末尾。 如果你修改过的标签没有闭合(忘了加 <、/、> 等符号)，Eclipse 画面上也会出现小小的警示符号来提醒你。

第 3-5 行

代码:

  android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"

这些包含在「

代码:

<linearlayout>

」 标签中的叙述被称为「LinearLayout」标签的「属性」。Android 应用程式在 layout 目录中的标签，大多数的属性前都有一个「android:」前缀。同一个介面元件的属性之间，是以空白做区隔，因此事实上你也能将多个属性写在同一行。当 然，将属性排成多行更易于阅读。我们应该保持这个好习惯。

介面元件都有许多共同的属性，例如介面元件的长，宽度设定属性。Android 介面元件的宽度、长度设定属性分别叫做「android:layout_width」、「android:layout_height」。两个都设定为 「fill_parent」参数值。「fill_parent」 如其名，所表达的的意思就是"填满整个上层元件"。预设 LinearLayout 介面元件就会充满整个屏幕空间。

介面元件彼此间也会有一些不同的属性，例如「LinearLayout」(线性版面配置) 标签的「android:orientation」(版面走向) 属性。在此填入「vertical」 (垂直)属性值，表示这个介面的版面配置方式是从上而下垂直地排列其内含的介面元件。

「android.view.ViewGroup」 是各种布局配置(layout)和视图(View)元件的基础类别。常见的实现有

LinearLayout(线性版面配置)、FrameLayout(框架版面配置)、TableLayout(表格版面配置)、AbsoluteLayout(绝对位置版面配置)、RelativeLayout(相对位置版面配置)等。

虽然有这么多种版面配置方式可以选用，但大多数的应用程式并不需特地去改变预设的 LinearLayout 的配置，只要专注在其中填入需要的介面元件即可。所以从第 7 行之后的内容才是一般应用程式开发时较常修改之处。

第 7 和 11 行

代码:

<TextView/>

TextView (文字检视)是我们看到的第一个熟悉的介面元件。其作用是显示文字到屏幕上。你可能注意到这个标签结尾使用了 「/>」 符号。「/>」符号表示这个XML叙述中没有内文，亦即此介面元件描述中不再包含其他介面元件，也表示这个介面元件就是这个萤幕中最小的组成单元 了。

第 8-10 行

代码:

    android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello World, bmi"

我们来看看 TextView 介面元件中包含了哪些属性。

「android: layout_width」和「android:layout_height」我们刚刚已经学过了，分别代表宽度跟长度。「android: layout_width」 的 「fill_parent」 参数值表示宽度填满整个上层介面元件(即 LinearLayout 介面元件)。「android:layout_height」则是用上一个新的参数值「wrap_content」(包住内容)，亦即随着文字栏位行数的 不同而改变这个介面元件的高度。最后的 「android:text」 属性则是 TextView 介面元件的主要属性，亦即文字栏位中显示的文字内容。至于「@string/hello 」这段字串所代表的意义，马上会接着在后面章节说明。我们现在已知道是：只要将「android:text」属性内容替换成我们想要文字，在预览画面或在 模拟器中就会显示对应的文字。

将以上的 XML 描述综合起来，我们就可以得知「main.xml」 想表达的介面。