Android:一个高效的UI才是一个拉风的UI(一)

移动开发 Android
Android是一个运行在移动终端上的操作系统,跟传统PC最大的不同所在就是移动终端的资源紧缺问题“比较”明显,当然对于一些屌丝机型,应该用“非常“来形容才靠谱。所以经常会出现在一些比较缺乏青春活力的老型机上,运行一些软件被异常终止的情况;然而作为互联网厂家来说,广大的屌丝机用户肯定是一大笔用户资源,这是能放弃的市场吗?

开篇

Android是一个运行在移动终端上的操作系统,跟传统PC最大的不同所在就是移动终端的资源紧缺问题“比较”明显,当然对于一些屌丝机型,应该用“非常“来形容才靠谱。所以经常会出现在一些比较缺乏青春活力的老型机上,运行一些软件被异常终止的情况;然而作为互联网厂家来说,广大的屌丝机用户肯定是一大笔用户资源,这是能放弃的市场吗?!当然不行o(╯□╰)o,所以我们要尽可能得提高软件的效率来赢取客户的回眸一笑了,屌丝也是客户!

这篇博客主要介绍如何在UI设计上提高效率,减少资源的利用,毕竟在终端资源短缺的今天,效率始终为王。我们评判一个UI界面不是认为有多复杂才给力,或者说有多炫才靠谱,一个简约而又不平凡的高效UI界面才是一个灰常牛逼的界面设计。

引入

在android应用中,采用硬编码方式编写界面并不是一个提倡的方法。当然硬编码编写的界面比基于XML文件的软编码界面高效灵活一些,但是非常不容易维护,错综复杂的代码更会让程序埋雷重重,说不定哪天就把应用炸的惨不忍睹。所以如果非常必要非常肯定要采用代码编写硬编码界面之外,其他情况还是采用易于维护的XML来编写比较好。

所以文中对于UI优化设计归结到底也就是对XML布局文件的优化设计。

在谷歌给我们的开发环境中,存在这么一个非常好用的工具——hierarchyviewer,估计很多人都没搭理过这个藏在偏僻角落的小工具吧;它能非常容易的帮我们分析UI界面的结构和构造效率,这个工具的位置就在sdk/tools/文件夹。

楼下上图:

大家好,我是图~

这是分析的是一个布局上只有一个TextView组件的XML界面,图告诉我们,构造这个界面总共用了四个组件,也就是需要绘制四次组件,自然每一次绘制组件都需要耗费资源。

下面步入狂拽酷炫吊炸天的主题部分。。。。

尽量用最少的步骤完成布局

我是社会好青年,我为国家省资源;当然作为组件来说也需要这个觉悟,每个组件的绘制都会多多少少耗费终端的资源。所以我们在这里可不能听老祖宗的话:韩信点兵多多益善了,精兵简政才是UI设计的唯一出路。不相信?行!下面就开始给个对比的例子。

[[121125]]

这不简单吗?几行代码不是分分钟的事情吗?

  1. <RelativeLayout 
  2.     android:layout_width="wrap_content" 
  3.     android:layout_height="wrap_content" 
  4.     android:gravity="center" > 
  5.     <Button 
  6.         android:id="@+id/button1" 
  7.         android:layout_width="wrap_content" 
  8.         android:layout_height="wrap_content" 
  9.         android:background="@drawable/btn_backgroup" 
  10.          /> 
  11.     <ImageView 
  12.         android:id="@+id/imageView1" 
  13.         android:layout_width="wrap_content" 
  14.         android:layout_height="wrap_content" 
  15.         android:layout_alignParentLeft="true" 
  16.         android:layout_centerVertical="true" 
  17.         android:src="@drawable/header_back" /> 
  18. </RelativeLayout> 

也别急着看代码,多累多伤眼睛呀,直接上个hierarchyviewer里面的图来瞧瞧呗

一个小小的按钮就用了3个组件来绘制,这就是3N的复杂度了呀,如果有5个这样的按钮就要15个组件,如果有10个按钮就要有30个,如果有N++个,哎 呀妈的,不敢想象下去了。既然这样,我们是不是应该考虑一下优化优化,翻翻资料我们发现原来是可以不用这么多组件来实现的这个按钮的。

  1. Button 
  2.     android:id="@+id/button1" 
  3.     android:layout_width="wrap_content" 
  4.     android:layout_height="wrap_content" 
  5.     android:background="@drawable/btn_backgroup" 
  6.     android:drawableLeft="@drawable/header_back" 
  7.     android:gravity="center" 
  8.     android:padding="10dp" 
  9.     />

还是原来的按钮,还是原来的味道,复杂度从3N降低到N!!!你敢说这样的效率你不想去提升????

小结一个:在我们设计UI布局时,应该从使用尽量少的组件的前提下入手,由于系统组件的封装比较完善,把多个简单的组件交由一个复杂一点的组件来实现,是可以得到比较好的效率的。因为每个组件都得需要独自进行绘制过程,多个组件绘制浪费的资源不仅仅谋害了我们的应用,更深深打击了用不起高端机的屌丝用户的自尊心——”他妈的,这软件又不能用!“。

你不干活?把你辞了。

我们还记刚开始给的一个图吗?我们在布局中使用的到仅仅是一个TextView,而RelativeLayout貌似啥子活儿都没干的样子。。。。。。

我们从来都不提倡吃空饷不干活,软件界的潜规则也是这样的。出于构建和谐社会的正义感,我们当然不能坐视RelativeLayout这种站着茅坑不拉屎的流氓行为,所以我们就需要借助一个解决措施——<merge>标签,它能帮我们干掉一些不需要的根节点。为了拥有更好的即视感,所以我用了一个更为复杂点的布局(其实一点都不复杂)、、

主布局XML文件:

  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  2.     android:id="@+id/layout1" 
  3.     android:layout_width="match_parent" 
  4.     android:layout_height="match_parent" 
  5.     > 
  6.     <ImageView android:id="@+id/image1" 
  7.         android:layout_width="match_parent" 
  8.         android:layout_height="wrap_content" 
  9.         android:src="@drawable/bg" 
  10.         /> 
  11.     <com.net168.text.MyLayout  
  12.         android:id="@+id/layout2" 
  13.         android:layout_width="match_parent" 
  14.         android:layout_height="match_parent" 
  15.         > 
  16.     </com.net168.text.MyLayout> 
  17. </FrameLayout> 

组合控件布局XML文件:

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  2.     android:layout_width="wrap_content" 
  3.     android:layout_height="wrap_content" 
  4.     android:orientation="horizontal" 
  5.     > 
  6.     <Button android:id="@+id/button2" 
  7.         android:layout_width="wrap_content" 
  8.         android:layout_height="wrap_content" 
  9.         android:text="button2" 
  10.         /> 
  11.     <TextView android:id="@+id/text1" 
  12.         android:layout_width="wrap_content" 
  13.         android:layout_height="wrap_content" 
  14.         android:text="text1" 
  15.         android:textColor="#ff0000" 
  16.         /> 
  17. </LinearLayout> 

这个界面很丑的,不忍直视:

丑归丑,我们还是需要继续用神器hierarchyviewer看看这个XML生成的界面结构图来探索一下丑女内心丰富多彩的世界~~~~~~~

我靠。。。。三个组件的布局竟然用了六层嵌套布局,瞬间有了一种大花姑娘嫁给老光棍的一种深深的浪费感。我们开始看图说话,第一层和第二层的组件是系统都会自动生成的,这个是板上钉钉没法商量的事情,除非你去底层跟他们好好谈谈。但是~但是这个第三层的FrameLayout和第五层的LinearLayout完完全全是在自我秀存在感而已,所以我们要狠下心做掉他们,怎么来呢?用<merge>标签。

由于<merge>标签只能作为根元素,所以我们可以将这两个根元素都稍加修改,如下:

主布局XML文件:

  1. <merge xmlns:android="http://schemas.android.com/apk/res/android" 
  2.     android:id="@+id/layout1" 
  3.     android:layout_width="match_parent" 
  4.     android:layout_height="match_parent" 
  5.     > 
  6.     <ImageView android:id="@+id/image1" 
  7.         android:layout_width="match_parent" 
  8.         android:layout_height="wrap_content" 
  9.         android:src="@drawable/bg" 
  10.         /> 
  11.     <com.net168.text.MyLayout  
  12.         android:id="@+id/layout2" 
  13.         android:layout_width="match_parent" 
  14.         android:layout_height="match_parent" 
  15.         > 
  16.     </com.net168.text.MyLayout> 
  17. </merge> 

组合控件布局XML文件:

  1. <merge xmlns:android="http://schemas.android.com/apk/res/android" 
  2.     android:layout_width="wrap_content" 
  3.     android:layout_height="wrap_content" 
  4.     > 
  5.     <Button android:id="@+id/button2" 
  6.         android:layout_width="wrap_content" 
  7.         android:layout_height="wrap_content" 
  8.         android:text="button2" 
  9.         /> 
  10.     <TextView android:id="@+id/text1" 
  11.         android:layout_width="wrap_content" 
  12.         android:layout_height="wrap_content" 
  13.         android:text="text1" 
  14.         android:textColor="#ff0000" 
  15.         /> 
  16. </merge> 

PS:注意需要在组合控件的类中加上一句setOrientation(LinearLayout.HORIZONTAL)来保证自组件的水平排列。

继续用神器看看结构:

呼呼呼~~是不是从六层降低到了四层结构,好一股小清新的感觉呀,我都感觉飘飘然了,自然效率的提升是毋容置疑滴。。。。。

小结一个:<merge>标签能百分百代替<FrameLayout>这个布局组件,对于不复杂的其他布局组件如线性布局等组合组件中,可以在继承子类中对其属性进行设置后也可以使用<merge>标签,<merge>标签不占资源,自然在生成界面时也不会生成对应的组件另外需要注意一点是<merge>只能作为根元素,对于需要用inflate生成布局文件时,必须指定一个ViewGroup作为其父元素,并且要设置inflate的attachToRoot参数为true。(参照inflate(int, ViewGroup, boolean))。

本文链接:http://www.cnblogs.com/net168/archive/2014/10/09/4004950.html

责任编辑:chenqingxiang 来源: cnblogs
相关推荐

2014-10-14 10:01:10

UIAndroid

2020-04-17 10:58:12

UI设计师按钮

2016-10-20 19:27:00

开源项目bootstrapcss框架

2021-01-19 13:10:29

ZshLinuxUbuntu

2017-09-15 15:13:33

效果设备UI

2016-05-18 15:13:49

快码CTO互联网创业

2016-09-26 17:26:20

2013-10-18 10:10:23

2012-05-28 15:31:57

App-UI

2014-07-17 15:38:43

UI设计师移动端

2023-01-03 12:30:25

架构CPUGPU

2013-03-04 16:45:49

2024-04-10 12:39:08

机器学习python

2022-04-28 09:05:41

网络爬虫Python

2024-02-07 08:52:07

VueUI 库Vue.js

2013-02-22 18:37:50

容错服务器

2016-03-01 14:37:47

华为

2023-01-12 08:47:26

二项式杨辉斐波那契

2022-02-10 10:48:23

JavaScriptVue.js数据

2013-09-11 16:02:00

Spark分布式计算系统
点赞
收藏

51CTO技术栈公众号