[Android]继承式UI界面布局设计

2015/04/16 19:14
阅读数 3.2K

一般而言,Android界面布局使用聚合的方式比较多,这种方式要求首先构建一批能够复用的组件,然后在Activity的布局文件中进行聚合。尽管这种方式能够完成组件的复用,但如果这些组件在不同Activity中的布局有很多相同点的时候,也还是会带来很大程度的冗余(代码)。本文介绍一种比聚合更加有效的界面布局方式——继承式布局。

对于类的继承和对象的聚合之间有哪些相同点和不同点,分别适用于哪种场景,相信大家已经深有体会。在此就不多讲了。其实类比过来,Android的界面布局也是如此。假设我们需要实现如下的三种布局:

[Android]继承式UI界面布局设计 - lvan - lvan GoGo 的世界[Android]继承式UI界面布局设计 - lvan - lvan GoGo 的世界[Android]继承式UI界面布局设计 - lvan - lvan GoGo 的世界

每一个布局都是在前一个布局的基础上增加自己的元素。这种形式多么像类的继承呀!下面列出实现文件:

page_three_parts.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/page_three_parts_root_layout"
   android:layout_width="match_parent"
   android:layout_height="match_parent" >

   <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="96dp"
       android:layout_alignParentTop="true"
       android:background="@color/main_blue" >

       <ImageView
           android:id="@+id/image_logo"
           android:layout_width="120dp"
           android:layout_height="80dp"
           android:layout_alignParentLeft="true"
           android:layout_alignParentTop="true"
           android:layout_margin="10dp"
           android:gravity="center"
           android:src="@drawable/logo" />
   </RelativeLayout>

   <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="96dp"
       android:layout_alignParentBottom="true"
       android:background="@color/main_blue" >
   </RelativeLayout>

</RelativeLayout>

page_base_setting.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent" >

   <include
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       layout="@layout/page_three_parts" />


   <Button
       android:id="@+id/baseSettingButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true"
       android:layout_alignParentLeft="true"
       android:layout_marginBottom="32dp"
       android:text="page_base_setting.xml" />

</RelativeLayout>

page_net_settting.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent" >

   <include
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       layout="@layout/page_base_setting" />


   <Button
       android:id="@+id/netSettingButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true"
       android:layout_alignParentRight="true"
       android:layout_marginBottom="32dp"
       android:text="page_net_settting.xml" />

</RelativeLayout>

继承式布局在第一个节点处包含父布局文件,然后实现子布局。继承式布局要求父布局和子布局的根布局大小必须一致。至于为什么这么要求,很简单,想一想类继承的特点——子类必须实现父类的所有内容,或者说子类必须能够代替父类。这样的继承方式与我们在C++、C#、Java中实现的继承很不一样,而与GObject、Lua等实现继承的方式很相似。

这种布局方式能够比聚合实现更简单的设计,而且能够更大程度的完成代码和布局的解耦合。这里指的是有很多人会在聚合式布局中留出扩展点,然后在程序运行的时候将内容填充到保留点。这种方式有一个很大的问题,就是只有当程序运行起来之后才能看到页面的完整信息。继承式布局就不存在这样的问题。而且,这种继承关系也完全可以映射到代码类的继承。下面是代码中关于布局的继承关系:

ThreePartsActivity.java

package com.testui;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;

/**
* 该类和 page_three_parts.xml 布局文件对应
*/
public class ThreePartsActivity extends Activity {

/**
* 布局文件
*/
protected int layoutRes;

/**
* LOGO图片
*/
protected ImageView imageLogo;

protected ThreePartsActivity(int layoutRes) {
this.layoutRes = layoutRes;
}

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

// 设置视图内容
setContentView(layoutRes);

imageLogo = (ImageView) findViewById(R.id.image_logo);
}

}

BaseSettingActivity.java

package com.testui;

import android.os.Bundle;
import android.widget.Button;

/**
* 该类和 page_base_setting.xml 布局文件对应
*/
public class BaseSettingActivity extends ThreePartsActivity {

/**
* 基本配置按钮
*/
Button baseSettingButton;

protected BaseSettingActivity(int layoutRes) {
super(layoutRes);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

baseSettingButton = (Button) findViewById(R.id.baseSettingButton);
}

}

NetSettingActivity.java

package com.testui;

import android.os.Bundle;
import android.widget.Button;

/**
* 该类和 page_net_settting.xml 布局文件对应
*/
public class NetSettingActivity extends BaseSettingActivity {

/**
* 网络设置按钮
*/
Button netSettingButton;

public NetSettingActivity() {
super(R.layout.page_net_settting);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

netSettingButton = (Button) findViewById(R.id.netSettingButton);
}

}

继承式布局实际上是通过布局的层层叠加实现的,但这种叠加是逻辑上的,而不是渲染层次的。所以在实际运行中不会带来太大的性能问题。下面这张图应该能够将继承式布局形象的展示出来:

[Android]继承式UI界面布局设计 - lvan - lvan GoGo 的世界


展开阅读全文
打赏
0
17 收藏
分享
加载中
更多评论
打赏
0 评论
17 收藏
0
分享
返回顶部
顶部