Debug GPU Overdraw Walkthrough
1.In this document
You should also read
This walkthrough shows how to visualize overdraw on your mobile device by color-coding interface elements based on how often they are drawn underneath.
What it's good for:
检测哪个view有过度的绘制。不同颜色含义不同。
- Showing where an app might be doing more rendering work than necessary.
- Helping you see where you might be able to reduce rendering overhead.
2.Prerequisites
- A mobile device with Developer Options enabled.
3.Visualizing Overdraw on your Mobile Device
- On your mobile device, go to Settings and tap Developer Options.
- In the Hardware accelerated rendering section, select Debug GPU Overdraw.
- In the Debug GPU overdraw popup, select Show overdraw areas.
开发者选项->硬件加速渲染->调试 GPU 过度绘制->显示过度绘制区域
5.1.1版本设置如图:
Figure 1. Steps for turning on Debug GPU Overdraw.
- Don't panic as your screen turns into a delirium of colors. The coloring is provided to help you diagnose your app's display behavior.
打开开发选项中的 调试GPU过度绘制 后,可以通过颜色判断应用各部位view的绘制是否过度。
Figure 2. Example of Debug GPU Overdraw output.
- The colors are hinting at the amount of overdraw on your screen for each pixel, as follows:
过度绘制情况的好坏通过颜色来表示,从正常颜色,蓝色、绿色、淡红色到红色,分别代表从好到坏(没有过度绘制,1x过度绘制、2x过度绘制、3x过度绘制和超过4x过度绘制)。少量的淡红色可以接受,二红色就是实现有问题,需要解决。
- True color: No overdraw 正常颜色,没有过度绘制
- Blue: Overdrawn once 有1次
- Green: Overdrawn twice 有2次
- Pink: Overdrawn three times 有3次
-
Red: Overdrawn four or more times 4次以上
Figure 3. Color key for Debug GPU Overdraw output.
- Some overdraw is unavoidable. As you are tuning your app's user interface, the goal is to arrive at a visualization that shows mostly true colors and 1X overdraw in blue.
有些时候,过度绘制是可以避免不了的,保持在正常颜色和1x过度绘制是可接受的。
Figure 4. Examples of undesirable and desirable Debug GPU Overdraw output.