Android移动应用界面的模板化设计

时间:2022-09-05 08:31:24

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

Android移动应用界面的模板化设计

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

  1. /**
  2. * 通用页面模板1:含上栏,包括左右两个按钮,一个title文字区
  3. * @author zhe.yangz
  4. */
  5. public class AbstractAc1 extends BaseActivity {
  6. @Override
  7. public void onCreate(Bundle savedInstanceState) {
  8. super.onCreate(savedInstanceState);
  9. setContentView(R.layout.abac_1);
  10. }
  11. /**
  12. * 设置主内容区域的layoutRes
  13. * @param layoutResId
  14. */
  15. public void alabSetContentView(int layoutResId) {
  16. LinearLayout llContent = (LinearLayout) findViewById(R.id.llContent1);
  17. LayoutInflater inflater = (LayoutInflater) getSystemService(
  18. Context.LAYOUT_INFLATER_SERVICE);
  19. View v = inflater.inflate(layoutResId, null);
  20. llContent.addView(v);
  21. }
  22. /**
  23. * 隐藏左侧按钮
  24. */
  25. public void alabHideButtonLeft(boolean bSetHide) {
  26. Button bt = alabGetButtonLeft();
  27. if (null != bt) {
  28. if (bSetHide) bt.setVisibility(View.INVISIBLE);
  29. else bt.setVisibility(View.VISIBLE);
  30. }
  31. }
  32. /**
  33. * 隐藏右侧按钮
  34. */
  35. public void alabHideButtonRight(boolean bSetHide) {
  36. Button bt = alabGetButtonRight();
  37. if (null != bt) {
  38. if (bSetHide) bt.setVisibility(View.INVISIBLE);
  39. else bt.setVisibility(View.VISIBLE);
  40. }
  41. }
  42. /**
  43. * 得到模板上导航栏的左侧按钮,一般为[返回]
  44. * @return 成功则返回Button对象,失败则返回null。
  45. */
  46. public Button alabGetButtonLeft() {
  47. return (Button) findViewById(R.id.btBack1);
  48. }
  49. /**
  50. * 得到模板上导航栏的右侧按钮,一般为[刷新]
  51. * @return 成功则返回Button对象,失败则返回null。
  52. */
  53. public Button alabGetButtonRight() {
  54. return (Button) findViewById(R.id.btRefresh1);
  55. }
  56. /**
  57. * 设置模板上导航栏中间的标题文字
  58. * @param titleText
  59. * @return 修改成功返回true,失败返回false
  60. */
  61. public boolean alabSetBarTitleText(String titleText) {
  62. TextView tv = (TextView) findViewById(R.id.txBarTitle1);
  63. if (null != tv) {
  64. tv.setText(titleText);
  65. return true;
  66. }
  67. return false;
  68. }
  69. }

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

  1. /**
  2. * 样例页面
  3. * @author zhe.yangz
  4. */
  5. public class HomeActivity extends AbstractAc1 {
  6. @Override
  7. public void onCreate(Bundle savedInstanceState) {
  8. super.onCreate(savedInstanceState);
  9. alabSetContentView(R.layout.ac_home);
  10. setTopBarAndAction();
  11. }
  12. private void setTopBarAndAction() {
  13. alabSetBarTitleText("TEST HOME"); // 设置Title标题
  14. alabGetButtonLeft().setText("LeftBt"); // 设置左按钮上的文字
  15. alabGetButtonRight().setText("RightBt"); // 设置右按钮上的文字
  16. alabGetButtonRight().setOnClickListener(new OnClickListener() {
  17. @Override
  18. public void onClick(View v) {
  19. // 按钮执行事件
  20. // ...
  21. }
  22. });
  23. }
  24. }

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

Android移动应用界面的模板化设计

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

Android移动应用界面的模板化设计

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

补充:
文中模板1中所用的布局定义文件abac_1.xml忘给出了,代码如下,

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical" android:layout_width="fill_parent"
  4. android:layout_height="fill_parent" android:background="@color/section_bgcolor">
  5. <!-- 顶栏 -->
  6. <LinearLayout
  7. android:layout_width="fill_parent"
  8. android:layout_height="43dp"
  9. android:padding="5dp"
  10. android:background="@drawable/topbar_bg"
  11. android:orientation="horizontal"
  12. android:gravity="center" >
  13. <Button style="@style/AliBt" mce_style="@style/AliBt"
  14. android:id="@+id/btLeft"
  15. android:text="Left" />
  16. <Spinner android:id="@+id/sp_HY"
  17. android:visibility="invisible"
  18. android:layout_width="0dp"
  19. android:layout_height="0dp"/>
  20. <TextView style="@style/AliBarTitle" mce_style="@style/AliBarTitle"
  21. android:id="@+id/txBarTitle1"
  22. android:text="" />
  23. <Button style="@style/AliBt" mce_style="@style/AliBt"
  24. android:id="@+id/btRight"
  25. android:text="Right" />
  26. </LinearLayout>
  27. <!-- 主内容框架 -->
  28. <LinearLayout
  29. android:id="@+id/llContent1"
  30. android:orientation="vertical"
  31. android:layout_width="fill_parent"
  32. android:layout_height="0dp"
  33. android:layout_weight="1">
  34. </LinearLayout>
  35. </LinearLayout>

Android移动应用界面的模板化设计的更多相关文章

  1. 11款扁平化设计的 Twitter Bootstrap 主题和模板

    扁平化设计和 Bootstrap 框架是2013年网页设计领域的两大设计潮流.把这两者集合起来不是件容易的事情,使用下面这些主题和模板将节省我们的开发时间,因为我们可以修改已有的基础代码,而不是从零开 ...

  2. 16个时髦的扁平化设计的 HTML5 &amp&semi; CSS3 网站模板

    创建网站最好办法之一是使用现成的网站模板或使用开源 CMS 应用程序.所以,今天这篇文章给大家带来的是16款基于 HTML5 & CSS3 的精美的扁平风格网站模板,大家可以借助这些优秀的网站 ...

  3. C&num; winform 界面美化技巧(扁平化设计)

    关于C#界面美化的一些小技巧 在不使用第三方控件如 IrisSkin 的前提下,依然可以对winform做出让人眼前一亮的美化 首先,我们先来实现主界面的扁平化 此处分为两个步骤,第一步是更改winf ...

  4. 利用Aspose&period;Word控件和Aspose&period;Cell控件,实现Word文档和Excel文档的模板化导出

    我们知道,一般都导出的Word文档或者Excel文档,基本上分为两类,一类是动态生成全部文档的内容方式,一种是基于固定模板化的内容输出,后者在很多场合用的比较多,这也是企业报表规范化的一个体现. 我的 ...

  5. Android核心分析之二十Android应用程序框架之无边界设计意图

    Android应用程序框架1 无边界设计理念 Android的应用框架的外特性空间的描述在SDK文档(http://androidappdocs.appspot.com/guide/topics/fu ...

  6. Android应用程序框架之无边界设计意图

    Android的应用框架的外特性空间的描述在SDK文档有十分清楚的描述,Android应用的基本概念,组件生命周期等等有详细的描述.在外特性空间中,Android提供了Activity,Service ...

  7. 10、ERP设计之系统基础管理&lpar;BS&rpar;- 平台化设计

    ShareERP 2013-09-03 ERP业务平台化是每个软件提供商必须要进行的趋势,传统定制化路线已死,不能走定制化的老路了.以往最大问的题是不能累积和沉淀技术及提升项目业务管理能力,其次是管理 ...

  8. Material Design(原质化设计)视觉设计语言规范 踏得网镜像

    Android 5.0 Lollipop(棒棒糖,也就是之前的代称Android L)全面实践了谷歌最新研发的 Material Design 设计语言规范,只是该设计规范并不是仅针对移动平台. 我们 ...

  9. 扁平化设计的最新趋势 – 长阴影(Long Shadow)

    随着互联网的发展,网页设计变得越来越复杂,如今设计的外观和感觉实现网站功能说使用的开发技术一样重要.互联网的功能远远不只是基本的信息共享,现在人们对网站的期望是远远大于几年前的. 如今,HTML5 & ...

随机推荐

  1. 如何优化用SQL语句INSERT INTO … SELECT插入数据时锁全表的问题

    1.binlog format 启用Row Based Replication(行复制)模式: SET GLOBAL binlog_format = 'ROW'; 如果你想永久的启用这个模式,请修改m ...

  2. Struts学习之ValueStack学习

    1. 数据传输背后机制:ValueStack(值栈) 在这一切的背后,是因为有了ValueStack(值栈)! ValueStack基础:OGNL OGNL是Struts2中使用的一种表达式语言,它可 ...

  3. 顺序栈之C&plus;&plus;实现

    顺序栈就是用顺序表(数组)实现的栈.其组织形式如下图所示: 下面介绍下我用C++实现的顺序栈,在VC6下调试通过.不足之处还请指正. 1.文件组织 2.ss.h栈类的声明及宏的定义 #ifndef _ ...

  4. 前端程序员的蜕变——JS的 event 对象属性、使用实例、兼容性处理&lpar;极大提高代码效率、减少代码量&rpar;

    下面讨论一下 js 中的 Event 对象,主要从以下三个方面详细的描述(点击标题可跳转到对应部分): 1.什么是event 2.怎么用event,用他该注意什么,几个简单实际应用 3.event在不 ...

  5. linux下Clang和gcc的区别

    Clang 比 GCC 编译器的优势: 编译速度更快 编译产出更小 出错提示更友 好,比如 clang 在编译过程可以直接指出相对简单的出错位置以及它 “ 认为 ” 正确的方式 . 内置有静态分析工具 ...

  6. HTTP&sol;2 简介

    支撑现有 Web 服务的 HTTP 协议距离其发布时的 1997 年已经有些年月了,随后的 HTTP/1.1 版本发布自 1999 年.随着技术的进步和需求的进化,对于数据快速高效地传输,HTTP/1 ...

  7. 2018-2019-2 20175126谢文航 实验一《Java开发环境的熟悉》实验报告

    一.实验报告封面 课程:Java程序设计 班级:1751班 姓名:谢文航 学号:20175126 指导教师:娄嘉鹏 实验日期:2019年3月28日 实验时间:--- 实验序号:实验一 实验名称:Jav ...

  8. 转---JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制

    作者:德来 segmentfault.com/a/1190000004292479 如有好文章投稿,请点击 → 这里了解详情 一.从一个面试题说起 面试前端的时候我喜欢问一些看上去是常识的问题.比如: ...

  9. 万恶之源 - Python基础数据类型三

    字典 字典的简单介绍 字典(dict)是python中唯⼀的⼀个映射类型.他是以{ }括起来的键值对组成. 在dict中key是 唯⼀的.在保存的时候, 根据key来计算出⼀个内存地址. 然后将key ...

  10. ZOJ3435&lowbar;Ideal Puzzle Bobble

    把L,H,W分别减一就变成上面一个题目了. 不多说,也不召唤代码君了.