背景
首页UI框架:1个Activity+5个Tab+5个Fragment,如图:
随着业务需求的修改与增加,各UI布局的内容也逐渐丰富多彩,布局嵌套,各式各样的
背景颜色,由于每个需求的开发,只能考虑到当前页面的修改与增加,没有全局考虑整个首页
的UI框架,所以导致每个UI布局经常会出现过多的过度绘制(overdraw)问题,从而造成页面的卡顿,渲染
耗时。
现象
利用Android手机设备自带的开发者选项里的显示过度绘制功能,如图:
然后打开我们的App查看下首页的绘制情况:
蓝色: 意味着overdraw 1倍。像素绘制了两次。大片的蓝色还是可以接受的(若整个窗口是蓝色的,可以摆脱一层)。
绿色: 意味着overdraw 2倍。像素绘制了三次。中等大小的绿色区域是可以接受的但你应该尝试优化、减少它们。
浅红: 意味着overdraw 3倍。像素绘制了四次,小范围可以接受。
暗红: 意味着overdraw 4倍。像素绘制了五次或者更多。这是错误的,要修复它们。
- 多余的Windows背景
- 。。。
ackground情况:
这三个background就是造成过度绘制其中的一个原因了,因为他们的color与Activity的window一样的,完全可以
不用设置。
父布局与子View的background
接着看下各xml文件里的子view有没有相同的问题,
类似的文件还有很多,这里就不一一列出了
所以这里处理方法就是去掉background即可。
ImageView的background
首页里部分布局存在以上的设置
这些加载网络图片的图片控件在一开始不应该就设置background,
应该在加载处理的时候,如果加载图片失败再去设置。
过多的嵌套
首页Activity的该布局中就出现了多余的嵌套布局,类似的布局其他Fragment
也有,删除即可。
简单的布局使用复杂的容器
该布局的RelativeLayout里只有两个元素,上下各一个
,完全可以使用LinearLayout替换RelativeLayout,因为
RelativeLayout的绘制会比LinearLayout(在没有设置weight的情况下)
多绘制一次。
Merge的使用
像这样的布局,完全可以用merge取代LinearLayout,
这样就可以使布局少嵌套了一层。
效果
经过以上几种情况的处理了,看下咱们优化后的成果
最后来对比下优化前后每侦绘制时间的对比(标准:16ms绘制一帧)
总结:
在开发时,如果涉及到UI的话,考虑满足需求的同时,争取也要考虑到UI性能的优化。