AndroidUI设计

最新推荐文章于 2024-08-27 14:24:50 发布

DawnJobs

最新推荐文章于 2024-08-27 14:24:50 发布

阅读量866

点赞数

文章标签： android应用

本文链接：https://blog.csdn.net/LittleYearYear/article/details/41086229

版权

Android应用程序的界面设计有两种方法：

1.代码设计：界面描述信息都在Activity类中，不用去配置资源文件。虽然这种方法方便快速，但是当排版变动后可能导致代码大幅度变动。

2.XML文件设计

一、XML文件设计

在新建的Android工程中，DocumentManagementSystem.java文件中包含了建立、显示和运行这个应用所必须的代码。具体如下：

package myjava.hxq;

import android.app.Activity;

import android.os.Bundle;

public class DocumentManagementSystem extends Activity {

//每一个Activity都要继承Activity类

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

set ContentView(R.layout.main);

//表示选择了res/layout/main.xml这个配置文件所表示的界面布局

}

所以用XML设计界面，其实就是设计main.xml文件。该文件由系统自动创建后如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android

//声明命名空间

android:orientation="vertical"

//该属性声明View的方向，Vertical表示是竖的，垂直的

android:layout_width="fill_parent"

//该属性声明View要占屏幕的宽度，其中，fill_parent表示填满屏幕

android:layout_height="fill_parent"

//该属性声明View要占屏幕的高度，其中，fill_parent表示填满屏幕

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="欢迎使用文献管理系统"

//声明TestView包含的文字。将要显示的字符填入双引号内即可显示

</LinearLayout>

注：红色字体的文字为批注。

上面的代码是一个垂直的LinearLayout布局，它包含一个TextView。用XML描述完布局后，将该XML文件保存到本工程的res/layout/路径下，然后就可以编译了。

二、代码设计

package myjava.hxq;

import android.app.Activity;

import android.os.Bundle;

import android.widget.LinearLayout;

import android.widget.TextView;

public class DocumentManagementSystem extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

LinearLayout ll = new LinearLayout(this);

TextView tv = new TextView(this);

//对TextView界面UI组件进行构造；

ll.addView(tv);

tv.setText(“欢迎进入文献管理系统”);

//设定要显示的文字

setContentView(ll);

//将TextView控件显示在手机屏幕上

}

Activity的setContentView()指令，是Android系统将View关联到Android的手机界面。否则，什么也不能显示，只能是空白的屏幕。

三、Android用户界面（UI）组件

Android SDK提供了一套完善的界面设计功能，包括丰富的组件。如果还不满意，还可以进行相应的扩展。

1.屏幕元素的层次

android.app.Activity类的实例是最基本的功能单元。虽然此实例可以实现很多功能，但是自身却无法显示在屏幕上。此时，就要借助视图组（Viewgroup）和视图（View），这两个才是Android平台最基本的用户界面表达单元。

a) 视图

它是基类android.view.View的一个实例，是一个存储有屏幕上特定的矩形内布局和内容属性的数据结构。也是Widgets（窗体部件）的基类，Widgets是由视图类派生出的一组子类的集合，可以绘制屏幕交互元素。使用Widgets可以更快速的常见用户界面。

每个视图都有一个整型值的ID属性，通过ID属性在布局结构树种唯一的表示该视图。在XML标签中，id语法如下：

Android:id = “@+id/my_button”;

其中，@的作用是通知XML解析器，解析并展开ID字符串后面其余的部分，将其作为ID资源。符号+ 表示这是一个新的资源，必须先创建它。当应用Android资源时就不必加+了，但必须加上Android包名字空间。如android:id = “@android:id/empty”;

b) 视图组

它是基类android.view.Viewgroup的一个实例。可以装载和管理一组下层的视图和视图组。使用视图组可以为界面增加结构，创建复杂的界面元素，并可把整体看做一个单一的实体。视图组是布局的基类，布局时视图组的一组子类，提供了通用的屏幕布局。

c) 用户界面的树形结构

往往用树形结构的视图和视图树来定义一个活动的用户界面。可以使用活动的setContentView()方法将这个结构树与屏幕关联，并把结构树根节点上对象的引用作为函数的参数。Android系统获得根节点对象的引用后，就可以直接与根节点对象协作来测量、绘制结构树或使结构树失效。当一个活动被激活并获得焦点时，系统会通知该活动，并要求根节点度量、绘制结构树。然后，根节点要求他的子节点绘制自己。同样，结构树中的每一个视图组节点都负责绘制他们的直接子节点。

2．界面布局（layout）设计

界面布局为活动构造了用户界面的结构，包含展现给用户的所有组件及各组件之间的结构。有两种实现方法：用XML声明用户界面的组件或者在应用程序运行时实例化布局。很方便的是，Android框架允许同时使用上述两种方法设计和管理应用程序用户界面。当然，用XML定义UI可以更好的把应用程序界面的展现部分和行为控制代码分割开。

每个布局文件都要明确的包含一个根元素，且此根元素必须为View或Viewgroup对象。其它布局对象或组件可以作为根元素的子元素加入这个定义了整个布局的视图层次结构中。

创建布局时为视图对象定义ID很重要。ID不必再整个布局结构树中唯一，但是在搜索范围内ID必须唯一。

u Layout Paramenters

XML布局属性Layout_名字，为视图定义布局参数。含有定义子元素位置和尺寸的属性类型。

u Layout Positon

视图是一个矩形，位置用左上点的坐标、高度和宽度表示，都用像素为单位。调用getLeft()和getTop()可以获得视图矩形的X坐标、Y坐标，都是相对于其父节点而言的。getRight(),getBotton()同理。

u Size、Padding和Margins

基准宽度和基准高度：定义一个视图期望多大；可以通过调用getMeasuredWidth()和getMeasuredHeight()方法得到这两个值。

实绘宽度和实绘高度：定义视图在屏幕上的实际尺寸；可以通过调用getWidth()和getHeight()方法得到这两个值。

3．通用布局对象

常用的布局有FrameLayout、LinearLayout、TableLayout、AbsoluteLayout和RelativeLayout，它们都是视图组的子类。

FrameLayout是一个最简单的布局对象。它被定制为屏幕上的一个可以填充单一对象的空白备用区域。后一个子元素直接将前一个子元素进行覆盖填充，将部分或全部挡住。LinearLayout用设置好的垂直或水平的属性值对子元素进行排列。一个垂直列表的每一行只占有一个元素。TableLayout将子元素的位置分配到行或列中。每个TableLayout由许多TableRow组成，而每个TableRow都会定义一个row。AbsoluteLayout可以让子元素制定准确的x/y坐标值，并显示在屏幕上。（0，0）为左上角。RelativeLayout允许子元素制定它们相对于其他元素或父元素的位置。