• 沒有找到結果。

初识 GUI GUI GUI GUI 界面 描述使用者界面

在文檔中 深入浅出 (頁 21-25)

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

表达使用者界面:

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

我们看到一个文字栏位,上面有一串文字 「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

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

第 1 行 代码:

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

XML (Extensible Markup Language) 是一种标记描述语言,不管是语法还是看起来的 样子,都相当类似网页所使用的 HTML 标记语言。XML 被广泛地运用在 Java 程序的设定中 。

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

代码:

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

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

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

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」 想表达的界面。

设计 GUI GUI GUI GUI 界面

在文檔中 深入浅出 (頁 21-25)