用户界面设计是Android应用开发的一项重要内容。在进行用户界面设计时,首先需要了解页面中的UI元素如何呈现给用户,也就是如何控制UI界面。Android提供了4种控制UI界面的方法,下面分别进行介绍。
Anderoid提供了一种非常简单、方便的方法用于控制UI界面。该方法采用XML文件进行界面布局,从而将布局界面的代码和逻辑控制的Java代码分离开来,使程序的结构更加清晰、明了。
使用XML布局文件控制UI界面可以分为以下两个关键步骤。
(1)在Android应用的res\layout目录下编写XML布局文件,可以采用任何符合Java命名规则的文件名。创建后,R.java会自动收录该布局资源。
(2)在Activity中使用以下Java代码显示XML文件中布局的内容。
setContentView(R.layout.main);
在上面的代码中,main是XML布局文件的文件名。
通过上面的步骤就可轻松实现布局并显示UI界面的功能。下面通过一个具体的例子来演示如何使用XML布局文件控制UI界面。
例在Eclipse中创建Android项目,名称为3.1使用XML布局文件实现游戏的开始界面。
创建Android项目,名称为3.1使用XML布局文件实现游戏的开始界面。
修改新建项目3.1的res\layout目录下的布局文件main.xml。在该文件中,采用帧布局(FrameLayout),并且添加两个TextView组件,第1个用于显示提示文字,第2个用于在窗体的正中间位置显示开始游戏按钮。修改后的代码如下:
<?xml version="1.0" ecncoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_pareng"
android:background="@drawable/background"
/>
<!--添加提示文字-->
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/title"
style=@style/text"
/>
<!-添加开始按钮-->
<TextView
android:id="@+id/starButton"
android:layout_gravity="center_vertical|center_horizontal"
android:text=@string/start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/text"
/>
</FrameLayout>
说明在布局文件main.xml中,通过设置布局管理器的android:background属性,可以为窗体背景图片;通过设置具体组件的style属性,可以为组件设置样式;使用android:layout_gravity="center_vertical|center_horizontal",可以让该组件在帧布局中居中显示。
(2)修改res\values目录下的strings.xml文件,并且在该文件中添加一个用于定义开始按钮内容常量,名称为start,内容为“单击开始游戏......”。修改后的代码如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="title">使用XML布局文件控制UI界面</string>
<string name="app_name">3.1</string>
<string name="start">单击开始游戏......</string>
</resources>
说明strings.xml文件用于定义程序中应用的字符串常量。其中,每一个<string>子元素都可以定义一个字符串常量,常量名称由name属性指定,常量内容写在起始标记<string>和结束标记</string>之间。
(3)为了改变窗体中文字的大小,需要为TextView组件添加style属性,用于指定应用的样式。具体样式需要在res\values目录中创建的样式文件中指定。在本实例中,创建一个名称为styles.xml的样式文件,并在该文件中创建一个名称为text的样式,用于指定文字的大小和颜色。sytles.xml文件的具体代码如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="text">
<item name="android:textSize">24px</item>
<item name="android:textColor">#111111</item>
</style>
</resources>
(4)在主活动,也就是MainActivity中,应用以下代码指定活动应用的布局文件。
setContentView(R.layout.main);