优化Android布局——减少过度绘制

た入场券 2022-06-15 05:37 328阅读 0赞

## **前言** ##

你有一个好的想法，并且把它用APP实现出来让大家使用。  
但是，你却听到很多用户在抱怨你的**APP卡顿**，**用户体验糟糕**。

此时，有一个改善你的**APP渲染时间**的做法：**查看调试GPU过度绘制工具**

## **什么是过度绘制？** ##

过度绘制发生在应用程序要求系统在已有的视图上绘制其他视图。  
**调试GPU过度绘制**工具通过在屏幕上覆盖的颜色层数来判断该像素被重绘了几次。

> 1.  布局文件是一个xml文件，inflate布局文件其实就是解析xml，根据标签信息创建相应的布局对象并做关联。xml中的标签和属性设置越多，节点树的深度越深，在解析时要执行的判断逻辑、函数的嵌套和递归就越多，所以时间消耗越多。
> 2.  inflate操作只是布局影响的第一个环节，一个界面要显示出来，在requestLayout后还要执行一系列的measure、layout、draw的操作，每一步的执行时间都会受到布局本身的影响。而界面的最终显示是所有这些操作完成后才实现的。所以如果布局质量差，会增加每一步操作的时间成本，最终显示时间就会比较长。

## **如何打开调试GPU过度绘制工具？** ##

1.  进入**系统设置**
2.  进入**开发者选项**
3.  选择**调试GPU过度绘制**
4.  选择**显示过度绘制区域**

你会注意到屏幕的颜色改变了，进入你的APP，这时候我们可以开始了解如何改善我们的布局。

## **不同的颜色代表什么？** ##

![2017-05-25-1.png][]

*  **原始色**（即没有发生改变）：代表屏幕上该像素块被绘制了一次。
 *  **蓝色**（过度绘制1x）：代表屏幕上该像素块被绘制了2次。
 *  **绿色**（过度绘制2x）：代表屏幕上该像素块被绘制了3次。
 *  **粉色**（过度绘制3x）：代表屏幕上该像素块被绘制了4次。
 *  **红色**（过度绘制4x）：代表屏幕上该像素块被绘制了5次。

![2017-05-25-2.png][]

## **修复过度绘制（一个例子）** ##

在上面的例子中，我**移除了RelativeLayout的background颜色**并通过**theme设置background**。  
\- 原来的：

*  修改后：

#### **修改Layout之后的结果**： ####

![2017-05-25-3.png][]

如你所见，过度绘制的程度减轻了，红色的区域变少了。  
这个应用程序还可以进一步改善，达到以**原始色**和**少量的蓝色**为目标。  
有些地方的过度绘制是**不可避免**的。

并不是所有的过度绘制都是设置background color导致的，其他的情况也可能导致过度绘制。例如：复杂的布局层次结构（Layout），复杂的视图叠加（View）。

## **避免过度绘制的方法** ##

1.  尽量多使用RelativeLayout和LinearLayout，不要使用绝对布局AbsoluteLayout。
2.  在**布局层次一样**的情况下，建议使用**LinearLayout**代替RelativeLayout，因为LinearLayout性能要稍高一些。
3.  在完成**相对较复杂的布局**时，建议使用**RelativeLayout**，RelativeLayout可以简单实现LinearLayout嵌套才能实现的布局。
4.  将可复用的组件抽取出来并通过include标签使用
5.  使用**ViewStub**标签来加载一些不常用的布局
6.  **动态地inflation view**性能要比SetVisiblity性能要好，当然ViewStub是最好的选择。
7.  使用**merge**标签减少布局的嵌套层次。
8.  去掉**多余的背景颜色**。
9.  对于有多层背景颜色的Layout来说，留最上面的一层的颜色即可，其他底层的颜色都可以去掉。
10. 对于使用Selector当背景的Layout（比如ListView的Item，会使用Selector来标记点击，选择等不同的状态），可以将normal状态的color设置成`"@android:color/transparent"`，来解决对应的问题。
11. 内嵌使用包含layout\_weight属性的LinearLayout会在绘制时**花费昂贵的系统资源**，因为**每一个子组件都需要被测量两次**。在使用ListView与GridView的时候，这个问题显得尤为重要，因为子组件会重复被创建，所以要尽量避免使用layout\_weight。
12. 使得Layout宽而浅，而不是窄而深（在Hierarchy Viewer的Tree视图里面体现）。

## **总结** ##

#### **目标：** ####

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

你也可以使用其他的工具来查看发生过度绘制的原因。  
如：[Hierarchy Viewer][]，[GL Tracer][]。  
  
  
参考链接：  
[Optimizing Layouts in Android - Reducing Overdraw][]  
[Android避免过度绘制之道][Android]

[2017-05-25-1.png]: http://oqgvo8n2z.bkt.clouddn.com/2017-05-25-1.png
[2017-05-25-2.png]: http://oqgvo8n2z.bkt.clouddn.com/2017-05-25-2.png
[2017-05-25-3.png]: http://oqgvo8n2z.bkt.clouddn.com/2017-05-25-3.png
[Hierarchy Viewer]: https://developer.android.com/studio/profile/hierarchy-viewer.html
[GL Tracer]: https://developer.android.com/studio/profile/gltracer.html
[Optimizing Layouts in Android - Reducing Overdraw]: https://riggaroo.co.za/optimizing-layouts-in-android-reducing-overdraw/
[Android]: http://www.cnblogs.com/tianzhijiexian/p/4277732.html