Android开发教程:设计_GUI_界面

Android开发教程:设计 GUI 界面

视图(View)\rBMI元件\r查阅文件\r离线文件\r开始设计\r整合\r启动模拟器

软件设计的过程中,常常会遇到需要频繁修改使用者界面的情境。改着改着程序设计师们就累积起了一些经验,也归纳出了许多应对之道。如着名的 MVC (Model-View-Controller ) 模式。Google Android 为我们考虑了界面修改问题。Android 为了单纯化界面修改方式,采用了目前比较流行的解决方桉-- 即将界面描述部份的程序码,抽取到程序外部的 XML 描述文件中。 \r?\r我们在前面的过程种已经学到,如何在 Android 应用程序中替换 TextView 界面元件所显示的纯文字内容。那么... 这个经验能不能直接用到 BMI 应用程序的设计上呢?

Android开发教程:视图(View)

我们先回过头来想想, BMI 应用程序最少应该需要些什么元件。 \r?\r为 了输入 BMI 程序所需的身高体重值,大致上我们需要两个 TextView 元件用来提示填入身高体重数字,另外也需要两个文字输入栏位用来填入身高体重数字。我们还需要一个按钮来开始计算,而计算完也需要一个 TextView 元件来显示计算结果。于是初版的 BMI 应用程序界面的样子就浮现出来了。

Android开发教程: BMI元件

话说回来,我们从哪得知各种可用的界面元件呢?其中一个方法是查阅文件。 \r?\rAndroid 文件网站上找到各种可用界面元件列表。http://developer.android.com/guide/tuto ... index.html \r?\r例如我们想查看 EditText 的内容,我们可以点进 EditText 连结查看其内容。 http://developer.android.com/reference/ ... tText.html \r?\r你会看到一个详细地惊人的网页。

Android开发教程:查阅文件

边举其中常用到的 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 文件参考。 在下载了 android-sdk 后,将之解压缩,你可以在「android-sdk/docs 」 目录中 (android_sdk/docs/reference/view-gallery.html) ,找到一份与线上文件相同的文件参考。

Android开发教程:离线文件

我们从实例来开始,定义一个基本 BMI 程序所需的身高(Height) 输入栏位,就会用到 EditText ,与 TextView 界面元件,其描述如下: \r?\r代码: \r1

Android开发教程:开始设计

6

Android开发教程

可以看到 EditText 界面元件描述的基本的组成与 TextView 界面元件相似,都用到了「android:layout_width 」与「android:layout_height 」属性。另外,指定的另外两个属性 「android:numeric 」、「android:text 」则是 EditText 界面元件的特别属性。「android:text 」属性是继承自 TextView 界面元件的属性。 \r?\r代码: \randroid:numeric="integer" \r?\r android:text=""

Android开发教程

将「android:numeric 」 指定为 「integer 」,可以限制使用者只能在 EditText 文字栏位中输入整数数字。「android:text 」属性则是指定 EditText 界面元件预设显示的文字( 数字) 。 \r?\r我们再来看看 Button ( 按钮) 界面元件

Android开发教程

代码: \r