Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 614|回复: 0

[实例教程]Android移动应用界面的模板化设计

[复制链接]

该用户从未签到

发表于 2011-10-22 14:06:36 | 显示全部楼层 |阅读模式
Android没有像苹果开发那样功能强大的界面开发工具,本身ADT插件提供的界面编辑能力有限,没办法刻画所有的界面情况;Android的界面xml代码可以进行人工修改,而Iphone的全部在图形界面上拖动完成,可没提供任何方式的代码级修改。Android的UI设计开发过程非常繁琐,容易出错,需要很长时间调节界面细节,开发过Android应用的人肯定深有同感。用几年前的网页设计来打个比方,开发Iphone的软件界面就好比是用Frontpage弄点控件拖成一张页面,而开发Android更接近于闭着眼睛在Notepad里一行行的写HTML标签。为了使开发Android应用更加简便快捷,减少代码冗余,增强软件质量,在咨询行情的开发上我们大量使用了模板化的页面。
思路很简单:将软件里用到的大量重复的页面布局抽象出来,编写成一个抽象的Activity类,然后在实现具体页面时继承它,并且在主内容空白区填入需要的内容。
例如在最近开发的一款资讯类应用中,每张页面上面都有一个顶栏,上面有两个按钮,按钮中间是一行标题文字。按钮上的文字及点击后的功能在每个页面中可能会都不相同。如下图所示的。


面对这样一个页面的需求,我们可以设计出一个基本的页面模板AbstractAc1,代码如下所示。
/**

* 通用页面模板1:含上栏,包括左右两个按钮,一个title文字区

* @author zhe.yangz

*/

public class AbstractAc1 extends BaseActivity {

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.abac_1);

    }

    /**

     * 设置主内容区域的layoutRes

     * @param layoutResId

     */

    public void alabSetContentView(int layoutResId) {

        LinearLayout llContent = (LinearLayout) findViewById(R.id.llContent1);

        LayoutInflater inflater = (LayoutInflater) getSystemService(

                Context.LAYOUT_INFLATER_SERVICE);

        View v = inflater.inflate(layoutResId, null);

        llContent.addView(v);

    }

    /**

     * 隐藏左侧按钮

     */

    public void alabHideButtonLeft(boolean bSetHide) {

        Button bt = alabGetButtonLeft();

        if (null != bt) {

            if (bSetHide) bt.setVisibility(View.INVISIBLE);

            else bt.setVisibility(View.VISIBLE);

        }

    }

    /**

     * 隐藏右侧按钮

     */

    public void alabHideButtonRight(boolean bSetHide) {

        Button bt = alabGetButtonRight();

        if (null != bt) {

            if (bSetHide) bt.setVisibility(View.INVISIBLE);

            else bt.setVisibility(View.VISIBLE);

        }

    }

    /**

     * 得到模板上导航栏的左侧按钮,一般为[返回]

     * @return 成功则返回Button对象,失败则返回null。

     */

    public Button alabGetButtonLeft() {

        return (Button) findViewById(R.id.btBack1);

    }

    /**

     * 得到模板上导航栏的右侧按钮,一般为[刷新]

     * @return 成功则返回Button对象,失败则返回null。

     */

    public Button alabGetButtonRight() {

        return (Button) findViewById(R.id.btRefresh1);

    }

    /**

     * 设置模板上导航栏中间的标题文字

     * @param titleText

     * @return 修改成功返回true,失败返回false

     */

    public boolean alabSetBarTitleText(String titleText) {

        TextView tv = (TextView) findViewById(R.id.txBarTitle1);

        if (null != tv) {

            tv.setText(titleText);

            return true;

        }

        return false;

    }

}

我们创建了一张模板页面,然后在应用中的实际页面继承于它。这样,每张继承的页面都可以拥有类似的顶栏布局,并且代码简洁。下面就是继承的例子。
/**

* 样例页面

* @author zhe.yangz

*/

public class HomeActivity extends AbstractAc1 {

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        alabSetContentView(R.layout.ac_home);

        setTopBarAndAction();

    }

    private void setTopBarAndAction() {

        alabSetBarTitleText("TEST HOME"); // 设置Title标题

        alabGetButtonLeft().setText("LeftBt"); // 设置左按钮上的文字

        alabGetButtonRight().setText("RightBt"); // 设置右按钮上的文字

        alabGetButtonRight().setOnClickListener(new OnClickListener() {

            @Override

            public void onClick(View v) {

                // 按钮执行事件

                // ...

            }

        });

    }

}
就完成了一张具有如下顶栏效果的页面,页面的背景、按钮配色等效果在AbstractAc1中定义。


alabSetContentView()是在AbstractAc1中定义的方法,在衍生类中调用该方法,传入一个界面定义xml,方法中实现了使用LayoutInflater生成view,使得这个页面中定义的主内容区的界面xml会和原来AbstractAc1的界面xml合并在一起,成为一个完整的页面。有些情况下,左右按钮可以单独或一起隐藏,可以使用AbstractAc1中定义的alabHideButtonLeft和alabHideButtonRight进行设置。
使用模板化方式开发界面,目前我们开发的Android应用中的Activity的层次结构大致如下。


这样模板化的页面探索的实践被用在我们目前Android应用开发中。大致估计一下,界面代码比原来减少40%,减少了冗余,也间接提高了软件质量和可维护性,极大提升了业务需求变化带来的快速反应能力。接下去我们希望能够继续深入探索,找到更多的提升移动软件界面开发效率和质量的方法,也希望有好想法的同学和我们深入交流,共同探讨,博采众长。

补充:
文中模板1中所用的布局定义文件abac_1.xml忘给出了,代码如下,
<?xml version="1.0" encoding="utf-8"?>

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

        androidrientation="vertical" android:layout_width="fill_parent"

        android:layout_height="fill_parent" android:background="@color/section_bgcolor">

        <!-- 顶栏 -->

        <LinearLayout

                android:layout_width="fill_parent"

                android:layout_height="43dp"

                android:padding="5dp"

                android:background="@drawable/topbar_bg"

                android:orientation="horizontal"

                android:gravity="center" >

                <Button style="@style/AliBt" mce_style="@style/AliBt"

                        android:id="@+id/btLeft"

                        android:text="Left" />

                <Spinner android:id="@+id/sp_HY"

                        android:visibility="invisible"

                        android:layout_width="0dp"

                        android:layout_height="0dp"/>

                <TextView style="@style/AliBarTitle" mce_style="@style/AliBarTitle"

                        android:id="@+id/txBarTitle1"

                        android:text="" />

                <Button style="@style/AliBt" mce_style="@style/AliBt"

                        android:id="@+id/btRight"

                        android:text="Right" />

        </LinearLayout>

        <!-- 主内容框架 -->

        <LinearLayout

                android:id="@+id/llContent1"

                android:orientation="vertical"

                android:layout_width="fill_parent"

                android:layout_height="0dp"

                android:layout_weight="1">

        </LinearLayout>

        

</LinearLayout>
回复

使用道具 举报

该用户从未签到

发表于 2011-10-22 14:06:47 | 显示全部楼层
这个好!!
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2011-10-22 14:07:01 | 显示全部楼层
是 好 。。。。。。。。。。。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

GMT+8, 2025-1-22 19:55 , Processed in 0.340163 second(s), 33 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表