Android界面设计简单讲解
上一个教程我们已经讲了，怎么在Eclipse上搭建好编译Android应用软件的环境了，接下来我们这个教程，将简单讲解一下应用程序的界面设计！
在Android平台上，用户界面（屏幕上的界面组件）都是通过“ViewGroup”或“View”类来显示。“ViewGroup”和“View”是Android平台上最基本的用户界面表达单元。我们可以通过程序直接调用的方法调用描绘用户界面。将屏幕上显示的界面元素，与构成应用程序主体的程序逻辑混合在一起编写。或是，也可以将界面显示与程序逻辑分离，照着Android平台所提供的这种优雅方式，即使用XML说明文档，来描述界面组件的组织与排列格式。
这也是目前比较流行的方案——即将界面描述程序的代码，抽取到程序外部的XML说明文件。
在此我们借用<<Android 开发入门指南>>（第2版）此书中的“BMI应用程序”来讲解界面设置。该应用程序的主界面如下：
为了输入“BMI应用程序”所需的身高体重值，大致上我们需要两个“TextView”组件用来提示输入身高、体重数字，另外也需要两个文字输入文本框用来填入身高、体重数字。我们还需要一个按钮来开始计算，而计算完也需要一个“TextView”组件来显示计算结果，另一个“TextView”组件来显示建议。于是初版的“BMI应用程序”的界面雏形就浮现出来了。
图1
1.1 查询文件
我们从哪儿得知各种可用的界面组件呢？
方法一是查阅线上文件。网址：http://androidappdocs-staging.appspot.com/resources/index.html
图2
输入TextView，按search按钮：
图3
通过在先文件，查看各个组件的使用。（目前只提供英文文档）
方法二：下载离线文档docs-2.2_r01-linux
图4
下载地址：http://www.android123.com.cn/sdkxiazai/491.html
点击如下选项，即可下载
先将docs-2.2_r01-linux解压，打开index.html
图5
离线功能的查询功能与在线文档一模一样的，建议读者下载下来，便于查询！
图6
1.2 开始设计
我们从实例出发，定义一个基本“BMI应用程序”所需的身高（Height）输入字段。我们会用到“EditText”与“TextView”界面组件。打开应用程序中main.xml文件：
图7
其XML说明文件如下：
<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=""
/>
可以看到“EditText”界面组件描述的基本的组成，与“TextView”界面组件相似，这两都用到了“android:layout_width”与“android:layout_height”属性。“android:layout_width”中的"fill_parent" 参数值表示宽度填满整个上层界面组件，“android:layout_height”则是用上了一个新的参数值"wrap_content"（总结内容），亦即随着文字字段行数的不同而改变这个界面组件的高度，“EditText”界面组件拥有另外两个“android:numeric”、“android:text”特别属性。“android:text”属性是继承自“TextView”界面组件的属性，亦即文字字段显示的文字内容。
android:numeric="integer"
android:text=""
将“android:numeric”指定成“integer”，可以限制用户只能在“EditText”文本框中输入整数数字。“android:text”属性则指定“EditText”界面组件默认显示的文字（数字）。
接着我们看看“Button”（按钮）界面组件：
<Button android:id="@+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/bmi_btn"
/>
Button界面组件同样有“android:layout_width”与“android:layout_height”属性，另外一个“android:text”属性则用来显示按钮上的文字。
1.3 整合
完整的“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:singleLine="true"
android:text=""
/>
<Button android:id="@+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="计算 BMI 值"
/>
<TextView android:id="@+id/result"
android:layout_width="warp_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”标签来预览页面布局（此处我们先疏略Button按钮的变形，在模拟器中浏览时不会出现这样的情况）。
图8
也可以在右侧的“Outline”窗口中看到组件的组织结构
图9
最后运行模拟器查看执行结果。
图10
界面组件都是有很多共同的属性，例如界面组件的长、宽度设置的属性。默认“LinearLayout”界面组件就是占满真个屏幕空间。
界面组件彼此间也会有一些不同的属性，例如“LinearLayout”（线形页面布局）标签的“android:orientation”（页面走向）属性。在此填入“vertical”（垂直）属性值，表示这个界面的页面是从上而下垂直的排列器其包含的界面组件。
“import android.view.ViewGroup”是各种布局配置（Layout）和视图（View）组件的基类。常见的实现有：
l LinearLayout（线性页面布局）
l FrameLayout（框架页面布局）
l TableLayout（表格页面布局）
l AbsoluteLayout（绝对位置页面布局）
l RelativeLayout（相对位置页面布局）
虽然有这么多页面布局方式可以选用，但大多数的应用程序并不需要特意去改变默认的“LinearLayout”的布局，只要专注在其中填入需要的界面组件即可。
1.4 android：id属性
要是使用一个界面组件，第一件事就是定义出界面说明文档。大部分的界面组件（如LinearLayout、TextView）不需要在程序中作后续处理，因此可以直接使用。对于那些将在程序中被引用（reference）到的界面组件（如Button按钮、EditText文本字段字段），我们需要通过在XML说明文档中定义该界面组件的“android：id”标识符号属性。之后在程序中所有与这个界面组件有关的操作，都能根据“android：id”标识符号来调用这个界面组件。
<EditText android:id="@+id/height"
/>
编写代码时最好将XML说明文档属性分行列出，以易与于阅读。而我们在范例却将“android：id”属性直接摆在“EditText”标签之后。这么做的目的，同样是基于增加可读性的考虑。当然，你也可以将“android：id”属性像其他行一样一律分行列出，或将“android：id”属性放在属性列表的中间或最后面。
“android：id”属性的内容比较特别：
@+id/height
“@”符号是提示XML解析器应该把后面的字符串解析成标志符号。“+”符号代表将添加一个标志符号。“id/”表示这个标志符号会被归类在“id”下面，“height”是这个界面组件的“android：id”。以后的程序中，会使用“R . id . Height”来取得这个界面组件。因此“@+id/height”的意思是我们在此创建了名为“height”的标识符，可以通过这个标志符号来控制所对应的界面组件。“R”类会自动配置一个地址给这个界面组件。“R”类的内容，则可以通过查看“R .java”文件可知。
1.5 将字符串抽离XML
当我们在“res”文件夹中添加一个XML文件（参照图7），或是一张图片时，“Android开发工具”扩展包会从“res”文件夹中搜索各种文件资源文件，并将各种资源文件汇总成一个索引，自动生成“R . java”文件。
通过这个特性，我们进一步加工我们的XML说明文件，将其中的文字描述部分抽取出来让界面更易于维护。
打开“res/values/strings.xml”文件，原始的内容为：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, Bmi!</string>
<string name="app_name">BMI</string>
</resources>
里面定义了“hello”、“app_name”两个字符串，“app_name”字符串用来表示应用程序名称。我们看到表示字串的格式为
<string name="标志代码">文字叙述</string>
我们将上面将讲解过的说明抽取出来，添加到“strings.xml”文件。
完整的“stiring.xml”文件如下：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, Bmi!</string>
<string name="app_name">BMI</string>
<string name="height">身高（cm）</string>
<string name="weight">体重（kg）</string>
<string name="bmi_btn">计算BMI值</string>
<string name="bmi_result">你的BMI值是</string>
</resources>
在“string.xml”文件中，我们在原本的“app_name”字符串外，自行定义了另外几个字符串。如果再次打开“R .java”，我们会发现文件里的“string”类中，也自动索隐了上面定义好的字符串：
public static final class string {
public static final int app_name=0x7f040006;
public static final int bmi_btn=0x7f040009;
public static final int bmi_result=0x7f04000a;
public static final int height=0x7f040007;
public static final int weight=0x7f040008;
}
.接着，我们把这些字符串应用到之前定义好的XML说明文件中。通过使用
@string/[标志符号]
这样访问“string”类的格式，来替换“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="@string/height"
/>
<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="@string/weight"
/>
<EditText android:id="@+id/weight"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text=""
/>
<Button android:id="@+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/bmi_btn"
/>
<TextView android:id="@+id/result"
android:layout_width="warp_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>
再次运行“Android模拟器”，我们看到了与前面相同的界面。就界面而言，将说明字符串统一集中在“strings.xml”说明文件中之后，我们以后要修改界面时，就更加有弹性了。
至此，我们已经完成了“BMI应用程序”负责“显示”（View）的部分。
在此教程里，我们只是简单的探讨了一下由文字和组件组成的界面，绚丽的、集成着图片的、3D等等界面，我们在此并没有讨论，如果读者感兴趣可以自己上网查找资料，也欢迎与我联系，共同研究！
推荐一个不错的论坛：http://www.eoeandroid.com/index.php
