《Android开发教程：设计 GUI 界面.pptx》由会员分享，可在线阅读，更多相关《Android开发教程：设计 GUI 界面.pptx（20页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.orgAndroidAndroid开发教程：设计开发教程：设计 GUI GUI 界界面面视图视图(View)(View)BMIBMI元件元件查阅文件查阅文件离线文件离线文件开始设计开始设计整合整合启动模拟器启动模拟器中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.org软件设计的过程中，常常会遇到需要频繁修改使用者界面的情境。改着改着程序设计师们就累积起了一些经验，也归纳出了许多应对之道。如着名的 MVC（Model-View-Controller）模
2、式。Google Android 为我们考虑了界面修改问题。Android 为了单纯化界面修改方式，采用了目前比较流行的解决方桉-即将界面描述部份的程序码，抽取到程序外部的 XML 描述文件中。我们在前面的过程种已经学到，如何在 Android 应用程序中替换 TextView 界面元件所显示的纯文字内容。那么.这个经验能不能直接用到 BMI 应用程序的设计上呢？AndroidAndroid开发教程：开发教程：视图视图(View)(View)中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.org我们先回过头来想想，BMI 应用程序最少应该需要些什
3、么元件。为 了输入 BMI 程序所需的身高体重值，大致上我们需要两个 TextView 元件用来提示填入身高体重数字，另外也需要两个文字输入栏位用来填入身高体重数字。我们还需要一个按钮来开始计算，而计算完也需要一个 TextView 元件来显示计算结果。于是初版的 BMI 应用程序界面的样子就浮现出来了。AndroidAndroid开发教程：开发教程：BMIBMI元件元件中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.org话说回来，我们从哪得知各种可用的界面元件呢？其中一个方法是查阅文件。Android 文件网站上找到各种可用界面元件列表。ht
4、tp:/ 例如我们想查看 EditText 的内容，我们可以点进 EditText 连结查看其内容。http:/ 你会看到一个详细地惊人的网页。AndroidAndroid开发教程：开发教程：查阅文件查阅文件中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.org边举其中常用到的 EditText 界面元件为例。EditText 界面元件的作用就是提供一个文字输入栏位。EditText 继承自另一个叫 TextView 的界面元件，TextView 界面元件的作用是提供文字显示，所以 EditText 界面元件也拥有所有 TextView 界面元件
5、的特性。此外，文件中你也可以查找到 EditText 栏位的一些特殊属性，如android:numeric=integer(仅允许输入整数数字)、android:phoneNumber=true(仅允许输入电话号码)，或android:autoLink=all(自动将文字转 成超连结)。例如要限制 EditText 中只允许输入数字的话，我们可以在 XML 描述档中，透过将 EditText 的参数android:numeric 指定为true，以限制使用者只能在 EditText 文字栏位中输入数字。AndroidAndroid开发教程开发教程中国移动互联网研发培训专家www.embedtr
6、ain.org www.mobiletrain.org当你处于没有网路连接的情况下时，也可以找到 Android 文件参考。在下载了 android-sdk 后，将之解压缩，你可以在android-sdk/docs 目录中(android_sdk/docs/reference/view-gallery.html)，找到一份与线上文件相同的文件参考。AndroidAndroid开发教程：开发教程：离线文件离线文件中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.org我们从实例来开始，定义一个基本 BMI 程序所需的身高(Height)输入栏位，就会
7、用到 EditText，与 TextView 界面元件，其描述如下：代码:1 AndroidAndroid开发教程：开发教程：开始设计开始设计中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.org6 AndroidAndroid开发教程开发教程中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.org可以看到 EditText 界面元件描述的基本的组成与 TextView 界面元件相似，都用到了android:layout_width 与android:layout_height 属性。另外，指定的另外
8、两个属性 android:numeric、android:text 则是 EditText 界面元件的特别属性。android:text 属性是继承自 TextView 界面元件的属性。代码:android:numeric=integer android:text=AndroidAndroid开发教程开发教程中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.org将android:numeric 指定为 integer，可以限制使用者只能在 EditText 文字栏位中输入整数数字。android:text 属性则是指定 EditText 界面元件
9、预设显示的文字(数字)。我们再来看看 Button(按钮)界面元件 AndroidAndroid开发教程开发教程中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.org代码:Button 界面元件同样有 android:layout_width 与android:layout_height 属性，另外一个android:text 属性则用来显示按钮上的文字。AndroidAndroid开发教程开发教程中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.org我们这就从文件中挑出我们需要的 TextView
10、(文字检视)、EditText(编辑文字)、Button(按钮)三种界面元件，照前面的设计摆进 LinearLayout(线性版面配置)元件中。完整的main.xml 界面描述档如下：AndroidAndroid开发教程：开发教程：整合整合中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.org代码:AndroidAndroid开发教程开发教程中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.org AndroidAndroid开发教程开发教程中国移动互联网研发培训专家www.embedtrain.or
11、g www.mobiletrain.org AndroidAndroid开发教程开发教程中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.org AndroidAndroid开发教程开发教程中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.org AndroidAndroid开发教程开发教程中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.org AndroidAndroid开发教程开发教程中国移动互联网研发培训专家www.embedtrain.org ww
12、w.mobiletrain.org我们可以启动模拟器检视执行结果。或是在页面标签下选择Layout 标签，来预览页面配置。启动模拟器之后，模拟器画面上出现了两个输入栏位。栏位上方分别标示着身高(cm)、体重(kg)。在两个输入栏位下方，是一个标示着计算 BMI 值的按钮。当你在栏位中试着输入文字或数字(你可以直接用电脑键盘输入，或按着模拟器上的虚拟键盘输入)时，你也会发现，XML 描述档的描述中对两个 EditText 栏位所规定的，栏位中只能输入数字。AndroidAndroid开发教程：开发教程：启动模拟器启动模拟器中国移动互联网研发培训专家www.embedtrain.org www.mobiletrain.org我们在上面XML 描述档中定义的最后两个 TextView 界面元件，由于并未替这两个界面元件指定android:text 属性，所以在萤幕上并未显示。这两个界面元件在后面章节中会派上用场。本文来自CSDN博客，转载请标明出处：http:/