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 \r?\rButton 界面元件同样有 「android:layout_width 」与「android:layout_height 」属性,另外一个「android:text 」属性则用来显示按钮上的文字。
Android开发教程
我们这就从文件中挑出我们需要的 TextView( 文字检视) 、EditText( 编辑文字) 、Button( 按钮) 三种界面元件,照前面的设计摆进 LinearLayout ( 线性版面配置) 元件中。\r完整的「main.xml 」界面描述档如下:
Android开发教程:整合
代码: \r \r?\r
Android开发教程
Android开发教程
Android开发教程
Android开发教程
Android开发教程
Android开发教程
我们可以启动模拟器检视执行结果。或是在页面标签下选择「Layout 」标签,来预览页面配置。 \r?\r启动模拟器之后,模拟器画面上出现了两个输入栏位。栏位上方分别标示着「身高 (cm) 」、「体重 (kg) 」。在两个输入栏位下方,是一个标示着「计算 BMI 值」的按钮。 当你在栏位中试着输入文字或数字( 你可以直接用电脑键盘输入,或按着模拟器上的虚拟键盘输入) 时,你也会发现,XML 描述档的描述中对两个 EditText 栏位所规定的,栏位中只能输入数字。
Android开发教程:启动模拟器
我们在上面XML 描述档中定义的最后两个 TextView 界面元件,由于并未替这两个界面元件指定「android:text 」属性,所以在萤幕上并未显示。这两个界面元件在后面章节中会派上用场。\r?\r?\r本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/onewaveyanlei/archive/2010/04/09/5468441.aspx#_Toc238891629
Android开发教程