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有过度的绘制。不同颜色含义不同。

• 1. Showing where an app might be doing more rendering work than necessary.
  2. 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

1. On your mobile device, go to Settings and tap Developer Options.
2. In the Hardware accelerated rendering section, select Debug GPU Overdraw.
3. In the Debug GPU overdraw popup, select Show overdraw areas.

   开发者选项->硬件加速渲染－>调试 GPU 过度绘制->显示过度绘制区域

      5.1.1版本设置如图： 

   　　　Figure 1. Steps for turning on Debug GPU Overdraw.

4. 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.

5. 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.

6. 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.