内容概要
这篇文章大部分内容翻译自Google的官方视频教程,优酷地址。除了翻译视频内容外,本篇文章还增加了一部分内容:在项目中如何减少程序的过度绘制。
在视频中,Colt McAnlis会告诉我们什么是过度绘制,如何检测过度绘制,以及一个简单的减少过度绘制的方法。
另外一部分,我会具体谈谈有哪些方法可以真正减少app的过度绘制。当然,实际情况还得看你的app是如何设计编写的,这里只是提供一些通用的方法和建议,并不作为设计app和程序编写的准则。
视频翻译
- 过度绘制的概念
如果你粉刷过一个房间或一所房子,就会知道给墙壁涂上颜色需要做大量的工作。假如你还要重新粉刷一次的话,第二次粉刷的颜色会覆盖住第一次的颜色,第一次的颜色就永远不可见了,等于你第一次粉刷做的大量工作就完全被浪费掉。这太可怕了。
同样的道理,如果在你的应用程序中浪费精力去绘制一些东西同样会产生性能问题。过度绘制这个名词就是用来描述屏幕上一个像素在单个帧中被重绘了多少次。
- 过度绘制分析
过度绘制其实是一个性能和设计的交叉点。我们在设计上追求很华丽的视觉效果,但一般来说这种视觉效果会采用非常多的层叠组件来实现,这时候就会带来过度绘制的问题。比如:我们有一叠UI组件,这些组件从上到下分布,上面的组件是可以被用户看见的,而在下面的组件是不可见的,但是我们依然要花很多时间去绘制那些不可见的组件,因为在某些时候,它也可能会显示出来。但这确实是在浪费CPU和GPU的资源啊。
- 检测过度绘制
当然,为了让应用程序得到最大的性能发挥,我们必须把过度绘制减到最少。幸运的是,我们可以通过一个简单的方法检测出过度绘制:在手机设置中的开发者选项里,打开Show GPU Overdraw的选项,就可以检测某个app界面上过度绘制的情况。
打开这个选项后,你的手机会出现一些奇怪的颜色,请不要惊慌,这是正常的。系统正在你的屏幕上通过给像素绘制不同的颜色来
显示这个像素被过度绘制的次数。一共有四种颜色:蓝色、绿色、淡红、深红。根据过度绘制的次数,依次递增。1x过度绘制是蓝色、2x是绿色、3x是淡红、4x是深红。
- 目标和一个简单的方法
你的目标就是尽可能的减少过度绘制,使得你在屏幕更多的看到的是蓝色而不是深红色。
过度绘制也许是因为你的UI布局中存在大量重叠的view,但一个更为普遍的情况是因为那些不必要的重叠着的背景。例如某个Activity有一个背景,Layout也有自己的背景,同时它的子View又分别有自己的背景。仅仅是通过移除不需要的背景图片,就可以使你的应用程序从一大群那种愤怒的红色变成一片像大海一样平静的蓝色。
- 保持冷静,keep going
虽然过度绘制很容易出现,但也比较容易消灭。这就是为什么你需要我们Android性能课程中的其他资源,不要忘记加入Google+社区哦(继续推销Google+中)。分析代码时请保持冷静,千万要记住,性能很重要。(万年不变的一句结尾)
总结和建议
- 过度绘制产生的原因
-
太多重叠的背景
重叠着的背景有时候是有必要的,有时候是没必要的。这要视你的项目具体情况而定. -
太多叠加的View
或者本来这个UI布局就很复杂或者你是为了追求一个炫丽的视觉效果,这都有可能使得很多view叠加在一起。这个情况非常普遍,下面的建议中会谈谈怎么减少这种情况带来的影响。 -
复杂的Layout层级
复杂的层级关系,这个在布局中也很常见,下面也会说这种情况怎么做可以尽可能的减少过度绘制。
- 建议
-
太多重叠的背景
这个问题其实最容易解决,建议就是检查你在布局和代码中设置的背景,有些背景是被隐藏在底下的,它永远不可能显示出来,这种没必要的背景一定要移除,因为它很可能会严重影响到app的性能。如果采用的是selector的背景,将normal状态的color设置为”@android:color/transparent”,也同样可以解决问题。 -
太多重叠的view
第一个建议是:使用ViewStub来加载一些不常用的布局,它是一个轻量级且默认不可见的视图,可以动态的加载一个布局,只有你用到这个重叠着的view的时候才加载,推迟加载的时间。第二个建议是:如果使用了类似viewpager+Fragment这样的组合或者有多个Fragment在一个界面上,需要控制Fragment的显示和隐藏,尽量使用动态地Inflation view,它的性能要比SetVisiblity好。 -
复杂的Layout层级
这里的建议比较多一些,首先推荐用Android提供的布局工具Hierarchy Viewer来检查和优化布局。第一个建议是:如果嵌套的线性布局加深了布局层次,可以使用相对布局来取代。第二个建议是:用标签来合并布局,这可以减少布局层次。第三个建议是:用标签来重用布局,抽取通用的布局可以让布局的逻辑更清晰明了。记住,这些建议的最终目的都是使得你的Layout在Hierarchy Viewer里变得宽而浅,而不是窄而深。