深入浅出Android-7-入门-设计GUI界面

视图(View)

软 件设计的过程中，常常会遇到需要频繁修改使用者介面的情境。改着改着程式设计师们就累积起了一些经验，也归纳出了许多应对之道。如着名的 MVC（Model-View-Controller） 模式。Google Android 为我们考虑了介面修改问题。Android 为了单纯化介面修改方式，采用了目前比较流行的解决方桉--即将介面描述部份的程式码，抽取到程式外部的 XML 描述文件中。

我们在前面的过程种已经学到，如何在 Android 应用程式中替换 TextView 介面元件所显示的纯文字内容。那么...这个经验能不能直接用到 BMI 应用程式的设计上呢？

我们先回过头来想想， BMI 应用程式最少应该需要射门些什么元件。

为 了输入 BMI 程式所需的身高体重值，大致上我们需要两个 TextView 元件用来提示填入身高体重数字，另外也需要两个文字输入栏位用来填入身高体重数字。我们还需要一个按钮来开始计算，而计算完也需要一个 TextView 元件来显示计算结果。于是初版的 BMI 应用程式介面的样子就浮现出来了。

查阅文件

话说回来，我们从哪得知各种可用的介面元件呢？其中一个方法是查阅文件。

Android 文件网站上找到各种可用介面元件列表。

http://developer.android.com/guide/tuto ... index.html

例如我们想查看 EditText 的内容，我们可以点进 EditText 连结查看其内容。 http://developer.android.com/reference/ ... tText.html

你会看到一个详细地惊人的网页。

这 边举其中常用到的 EditText 介面元件为例。EditText 介面元件的作用就是提供一个文字输入栏位。EditText 继承自另一个叫 TextView 的介面元件，TextView 介面元件的作用是提供文字显示，所以 EditText 介面元件也拥有所有 TextView 介面元件的特性。 此外，文件中你也可以查找到 EditText 栏位的一些特殊属性，如「android:numeric="integer"」(仅允许输入整数数字)、 「android:phoneNumber="true"」(仅允许输入电话号码)，或「android:autoLink="all"」(自动将文字转 成超连结)。 例如要限制 EditText 中只允许输入数字的话，我们可以在 XML 描述档中，透过将 EditText 的参数「android:numeric」 指定为「true」，以限制使用者只能在 EditText 文字栏位中输入数字。

离线文件

当 你处于没有网路连接的情况下时，也可以找到 Android 文件参考。 在下载了 android-sdk 后，将之解压缩，你可以在「android-sdk/docs」 目录中 (android_sdk/docs/reference/view-gallery.html) ，找到一份与线上文件相同的文件参考。
开始设计

我们从实例来开始，定义一个基本 BMI 程式所需的身高(Height)输入栏位，就会用到 EditText，与 TextView 介面元件，其描述如下：

代码: 1  <TextView
2     android:layout_width="fill_parent"
3     android:layout_height="wrap_content"
4     android:text="身高 (cm)"
5     />
6  <EditText android:id="@+id/height"
7     android:layout_width="fill_parent"
8     android:layout_height="wrap_content"
9     android:numeric="integer"
10    android:text=""
11    />

可 以看到 EditText 介面元件描述的基本的组成与 TextView 介面元件相似，都用到了「android:layout_width」与「android:layout_height」属性。另外，指定的另外两个属性 「android:numeric」、「android:text」则是 EditText 介面元件的特别属性。「android:text」属性是继承自 TextView 介面元件的属性。

代码:    
android:numeric="integer"
android:text=""

将 「android:numeric」 指定为 「integer」，可以限制使用者只能在 EditText 文字栏位中输入整数数字。「android:text」属性则是指定 EditText 介面元件预设显示的文字(数字)。

我们再来看看 Button (按钮)介面元件

代码:      
<Button android:id="@+id/submit"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="计算 BMI 值"
/>

Button 介面元件同样有 「android:layout_width」与「android:layout_height」属性，另外一个「android:text」属性则用来显示按钮上的文字。
整合

我们这就从文件中挑出我们需要的 TextView(文字检视)、EditText(编辑文字)、Button(按钮) 三种介面元件，照前面的设计摆进 LinearLayout (线性版面配置)元件中。

完整的「main.xml」介面描述档如下：

代码:     <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="身高 (cm)"
/>
<EditText android:id="@+id/height"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numeric="integer"
android:text=""
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="体重 (kg)"
/>
<EditText android:id="@+id/weight"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numeric="integer"
android:text=""
/>
<Button android:id="@+id/submit"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="计算 BMI 值"
/>
<TextView android:id="@+id/result"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=""
/>
<TextView android:id="@+id/suggest"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=""
/>
</LinearLayout>

我们可以启动模拟器检视执行结果。或是在页面标签下选择「Layout」标签，来预览页面配置。

启 动模拟器之后，模拟器画面上出现了两个输入栏位。栏位上方分别标示着「身高 (cm)」、「体重 (kg)」。在两个输入栏位下方，是一个标示着「计算 BMI 值」的按钮。 当你在栏位中试着输入文字或数字(你可以直接用电脑键盘输入，或按着模拟器上的虚拟键盘输入)时，你也会发现，XML 描述档的描述中对两个 EditText 栏位所规定的，栏位中只能输入数字。

我们在上面XML描述档中定义的最后两个 TextView 介面元件，由于并未替这两个介面元件指定「android:text」属性，所以在萤幕上并未显示。这两个介面元件在后面章节中会派上用场。

革命的路还长

高兴了没多久，你发现按下"计算 BMI 值" 按钮后，应用程式完全没反应。

这 是正常的，因为我们还没处理从介面输入取得身高体重、将数值导入 BMI 计算方式、将结果输出到萤幕上...等等 BMI 应用程式的关键内容。不过在进入了解程式流程之前，我们还有一个「android:id」属性尚未解释。 接着我们将透过讲解「android:id」属性，来进一步了解 Android UI。

视觉化的介面开发工具

目前的 ADT 版本提供了预览介面的功能，但尚未提供方便地视觉化拖拉介面元件的开发工具。以后也许 ADT 会加入完整的 GUI 拖拉设计工具。

但在 ADT 加入完整的 GUI 拖拉设计工具之前，已经有人写出来了对应 Android 的 GUI 拖拉设计工具，可供使用。

DroidDraw - Android GUI 拖拉设计工具 http://code.google.com/p/droiddraw/