学习移动端Android布局的优化

        学习移动端Android布局的优化     

    导言

   学习设配android的屏幕就好比网页设计标配浏览器，看看那种更适合更美观。最近在写一套通过在view上绑定tag命令的小框架,特定的再回到API文档中,找找那些沉睡在api文档中好用的方法。现在进入学习移动端android布局以及优化，希望打开手机亮堂堂的布局能闪瞎眼。

     1.没有一劳永逸的方案!

　　如果你有经常关注android官方文档的话,一定会知道在android4.0发布不久,官方就推出了一套UI设计教程,

　　官方原版：Android Design

　　非官方简体中文版： 非官方简体中文版

　　6寸e-ink pdf版: 6寸版本

　　UI不单单只有美工和设计才需要懂得，码字的程序猿也是需要有所了解的，或许这可能会给你带来不少的灵感。

　　在这之前，有很多人都尝试在屏幕设配上，找出一条通用的解决方案，但可惜的是，就算是官方也没法提供这样的帮助， 更别说我们这些苦逼的程序员，例举个小故事吧，比如Instagram,android版,Instagram的初始人说,我每天收到最多的用户反馈就是为什么不能在他的android手机上运行,但是,我已经设配了几百个android手机了!!!

　　因此,有些事我们是没办法做到很完美的,但是我们可以修内功,出这样我们就有更多的机会来解决接下来所遇到的问题,那么现在就谈谈关于屏幕设配的一些经验吧。

     2.这世界究竟有多少种屏幕?

　　究竟怎么去设配屏幕,那么这世上有多少屏幕要让我们去设配呢?下面应用了一个官方的最新资料:有兴趣的可以直接到:官方统计的屏幕分布

     （下图是2012/5/7数据分析）                                            

　

　　第一次看到上面那张图，很多人肯定会感到疑惑,为什么不是分辨率?这数据是什么鬼,这让人怎么去设配屏幕!买手机的时候可没有人会说”你好,我要一个Normal大小屏幕,密度最好是hdpi的手机”.

　　也许描述太过于模糊，这可能是为什么设配android屏幕是一件很困难的事情,关于什么是Normal,什么是hdpi,不清楚这点朋友,我建议先去看看官方文档:Supporting Multiple Screens。

　　还有一些小工具，这里顺便推荐一个算DPI的在线小工具:DPI Calculator / PPI Calculator ，大概计算一下，当前分辨率的手机处于哪个区间里面，其他详细情况，建议大家去看一下官方文档，里面已经描述地非常清楚了。

　　3.开始布一个局

　　1,新建一个android项目,选上新建Activity那个选项，然后使用模拟器运行项目!

　　2,打开hierarchyviewer

　　这个是帮助我们优化view的非常重要的工具,那么接下来,借住这个工具进行讲解,这个工具是在android sdk 目录 tools下 hierarchyviewer.bat,或者用Everything这样的搜索硬盘的工具也可以直接找到!

　　3,分析

　　通过第一步运行的项目后，接着用hierarchyviewer这样的神器,就可以导出这样的图!

　　

 

　　这张图是我们一个Hello,World项目的View 布局结构,在HierarchyViewer上你点击每个按钮就会有非常详细的布局信息,因此,这里对于hierarchyViewer的介绍到此为止!关于这个工具的详细使用,请查阅Debugging and Profiling User Interfaces。

     4,如何布好一个局?

　　关于这点我在开发中总结了一下几点

　　1.熟读API文档!

　　   布局都是以简洁为好，以最少的步骤完成,设计图的要求,这应该是每个android开发程序员的宗旨!

　　案例一:做一个带箭头的返回按钮

　　根据这设计图搞一个按钮

　　敲下了如下代码便能实现

　

　　看代码多累啊，我们用刚刚介绍的hierarchyviewer来分析一下，这个按钮有什么问题!

　　从这个图中，我们可以看到，为了这么一个按钮我们用了view的三个节点去完成!假设,我们的一个view 有三个类似的按钮就意味着我们要用9个节点去完成,我们可以简单得出这是一个3N级的复杂度布局,下面我们优化一下这个图。

　　技巧一:熟读官方的API文档!

　　建议使用常用的Widget的所有参数都尽量了解一遍!在阅读官方文档的时候我们发现了Button,有一个可以把图绘制在左边的参数:android:drawableLeft

　　我们优化后的代码

　      用hierarchyviewer来分析一下

 

　　瞬间一个3N级复杂度的布局,变成了一个N级复杂的!所以,建议各位android开发朋友,在考虑优化的时候先把api文档里面的内容烂熟与心,时间也应该用在刀刃上，不然浪费时间。

　　有细心的朋友可能会发现:android:padding="10dp" 这个不知道用来干嘛用的。

　　我先告诉大家,不用这个参数:你将会看到:

　　用了以后:

　　所以,如果你在进行布局的时候,碰到比较繁琐的事情后,你先想想会不会已经API本身就有这样的参数呢?

　　简单是所有布局开始最重要的原则!

　　简单意味着不容易出现兼容问题!

　　简单意味着性能不错!

　　2.模块化布局

　　所谓,模块化布局就是要你熟悉使用<include/> 这个标签!

　　一个经典的Tab类布局由三部分组成,我们可以根据这三部分创建三个可以重用的布局

　　head_menu.XML

　　content_showweibo.xml

　　bottom_menu.xml

　　然后我们可以很灵活的组合我们要显示的,例如要完成上面的那个weibo布局

　

　　熟练的使用<include/> 标签就可以大大的减少我们日后都维护工作!

　　3.合并没必要的节点

　　还记得我们一开始的那个项目吗?

　　高效布局里有一条准则就是,尽量的减少节点!如图,我们发现,其实LinearLayout其实啥都没干,我们却耗费了那么一点性能去绘制了这么没用的节点!

　　接下来,我们为了消灭这个节点,我们需要一个这么的标签

     <merge></merge>

　　修改咱们的代码让它,性能更好!

　　

　　打开hierarchyviewer 一看!

　　优化了一个节点!并且显示快了那么一点点...

　　5.总结

　　这世上没有绝对的优化方案,所谓的优化方案都是基于一个最初的基本原则出发,例如,内存用得再少一点!那么如何才能将这内存用得再少一点做的了,这样就需要一些最基本的方法,关于布局这部分的基本方法,我在上面已经很详细的说了一遍了,当进行布局的时候你要牢记下面三点，

　　1,尽量使用view自身的参数

　　2,减少一个布局的不必要节点

　　3,尽量重用一个布局文件

　　兼容问题的话，也没有一套通用的法则!下面只是我个人的观点

　　1,减少复杂度,例如,我举的那个按钮布局,本来一个View就能完成就可以了,布局要以简单为本,这样兼容问题就可以尽量避免!

　　2,熟练使用工具,比如hierarchyviewer ，当出现兼容问题的时候,用这个软件可以快速定位到错误位置!