Android布局优化之过度绘制

如果一个布局十分复杂，那么就需要来排查是否出现了过度绘制，如果出现了，那么很可能会造成刷新率下降，造成卡顿的现象。那么什么是过度绘制呢？过度绘制就是在同一个区域中叠加了多个控件。这就像小时候我们画画，白纸就是没有绘制的画板，如果我们画了一个房子，涂上了红色，又在上面画了窗户，图上了棕色，窗户上又画了蓝色的玻璃，这重重复的叠加就是过度绘制，在白纸上的结果是，过度绘制的区域纸会被水笔浸的比较湿，在手机上就会出现显示较慢。如果说这是感性的认识，那么我就引用下面一段话来理性的解释一下：

1. 布局文件是一个xml文件，inflate布局文件其实就是解析xml，根据标签信息创建相应的布局对象并做关联。xml中的标签和属性设置越多，节点树的深度越深，在解析时要执行的判断逻辑、函数的嵌套和递归就越多，所以时间消耗越多；

2. inflate操作只是布局影响的第一个环节，一个界面要显示出来，在requestLayout后还要执行一系列的measure、layout、draw的操作，每一步的执行时间都会受到布局本身的影响。而界面的最终显示是所有这些操作完成后才实现的，所以如果布局质量差，会增加每一步操作的时间成本，最终显示时间就会比较长。

现在，我们就来说说如何查看是否有过度绘制，和如何避免它吧。

一、查看是否存在过度绘制

1. GPU过渡绘制:对于过度绘制的测试主要通过人工进行测试，也是发现应用过渡绘制的首选途径 .通过打开开发者选项中的 显示GPU过度绘制(魅族手机:设置—辅助功能–开发人员工具–硬件加速渲染—调试GPU过渡绘制— 显示过渡绘制区域.）来进行测试（PS：只有android4.2及以上的版本才具备此功能)

1. 颜色标识: 从好到差:蓝-绿-淡红-红

1. 蓝色1x过度绘制
2. 绿色2x过度绘制
3. 淡红色3x过度绘制
4. 红色超过4x过度绘制

2. 验收标准:

1. 控制过度绘制为2x
2. 不允许存在4x过度绘制
3. 不允许存在面积超过屏幕1/4区域的3x过度绘制（淡红色区域）

从图中我们就可以看到，文字部分出现了绿色（因为和底部的蓝色叠加了，所以变成了黄绿色），在顶部开关部分出现了红色，也就是四层的过度绘制，这是需要避免的。但由于在屏幕上占的位置很小，所以可以酌情考虑。

上面面是小米商店的截屏，可以看见其中有大量的过度绘制区域，总结下来过度绘制较常见于文字区域。

二、避免过度绘制的方法

下面这段文字来自他人博客：

作者：Gracker
出处：androidperformance.com
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
打赏一下： 微博打赏

1. 尽量多使用RelativeLayout和LinearLayout, 不要使用绝对布局AbsoluteLayout，

1. 在布局层次一样的情况下， 建议使用LinearLayout代替RelativeLayout, 因为LinearLayout性能要稍高一点.
2. 在完成相对较复杂的布局时,建议使用RelativeLayout,RelativeLayout可以简单实现LinearLayout嵌套才能实现的布局.

2. 将可复用的组件抽取出来并通过include标签使用；
3. 使用ViewStub标签来加载一些不常用的布局；
4. 动态地inflation view性能要比SetVisiblity性能要好.当然用VIewStub是最好的选择.
5. 使用merge标签减少布局的嵌套层次
6. 去掉多余的背景颜色

7. 对于有多层背景颜色的Layout来说,留最上面一层的颜色即可,其他底层的颜色都可以去掉
8. 对于使用Selector当背景的Layout(比如ListView的Item,会使用Selector来标记点击,选择等不同的状态),可以将normal状态的color设置为”@android:color/transparent”,来解决对应的问题

9. 内嵌使用包含layout_weight属性的LinearLayout会在绘制时花费昂贵的系统资源，因为每一个子组件都需要被测量两次。在使用ListView与GridView的时候，这个问题显的尤其重要，因为子组件会重复被创建.所以要尽量避免使用Layout_weight
10. 使得Layout宽而浅，而不是窄而深（在Hierarchy Viewer的Tree视图里面体现）

上面提到的多个工具和技巧我都在之前的文章有所讲解了，在实际开发过程中需要多多思考，根据情况来使用不同的技巧。

参考自：

http://www.androidperformance.com/android-performance-optimization-overdraw-1.html

http://www.open-open.com/lib/view/open1421656495031.html