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 

 

 

 

 

 

转载于:https://www.cnblogs.com/zhanglong0426/archive/2010/10/09/1846336.html