过度绘制分析及解决方案

绘制原理

Android系统要求每一帧都要在 16ms 内绘制完成，平滑的完成一帧意味着任何特殊的帧需要执行所有的渲染代码（包括 framework 发送给 GPU 和CPU 绘制到缓冲区的命令）都要在 16ms 内完成，保持流畅的体验。这个速度允许系统在动画和输入事件的过程中以约 60 帧每秒（ 1秒 / 0.016帧每秒 = 62.5帧/秒）的平滑帧率来渲染。如果应用没有在 16ms 内完成这一帧的绘制，假设你花了 24ms 来绘制这一帧，那么就会出现掉帧的情况。系统准备将新的一帧绘制到屏幕上，但是这一帧并没有准备好，所有就不会有绘制操作，画面也就不会刷新。反馈到用户身上，就是用户盯着同一张图看了 32ms 而不是 16ms ，也就是说掉帧发生了。

掉帧

掉帧是用户体验中一个非常核心的问题。丢弃了当前帧，并且之后不能够延续之前的帧率，这种不连续的间隔会容易会引起用户的注意，也就是我们常说的卡顿、不流畅。掉帧的原因很多，比如：

ViewTree非常庞大，花了很多时间重新绘制界面中的控件，这样非常浪费CPU周期：
过度绘制严重，在绘制用户看不到的对象上花费了太多的时间：
大量动画多次重复，消耗CPU和GPU
频繁地触发GC机制目前我们的项目的 APP 卡顿现象主要是由于 ViewTree 过于庞大和过度绘制严重造成

UI绘制机制

在现在的设备上，UI绘制主要由CPU和GPU协作完成，其工作原理如下图：

其实这图我也看得不太懂，但知道那么两个解决问题的方法：

利用 Android Studio 自带的 Hierarchy Viewer 去检测各 View 层的绘制时间，删除或合并图层
打开手机的 ShowGPUOverdraw去检测Overdraw，移除不必要的background

Hierarchy Viewer 的使用

Hierarchy Viewer

Hierarchy Viewer工具在Android device monitor中在Mac的Android Studio中：

图片来源http://blog.csdn.net/lmj623565791/article/details/45556391/

在windows的Android Studio中：

那么如何使用呢？

图片来源http://blog.csdn.net/lmj623565791/article/details/45556391/

简单使用

打开ViewTree视图后，点击任意一个view，然后点击Profile Node即可展示每个view在各个阶段的耗时情况，如：图中可以看到，该view在Measure、Layout和Draw阶段都比其它view耗时要多（下面的点变成红色了），图中看出该view节点后有72个子view，还可以读出数据：

阶段	耗时
Measure	0.028ms
Layout	0.434ms
Draw	9.312ms

在ViewTree中查找可删减或合并的view，找到耗时严重的view加以改良，可以减轻过度绘制现象，例如：

例如图中的两个LinearLayout只要保留一个就够了，而前面这个RecyclerView的item只有一个，没必要使用RecyclerView，可以考虑用其它view来替代

用Show GPU Overdraw方法来检测

过度绘制的检测

按照以下步骤打开ShowGPUOverrdraw的选项：设置 -> 开发者选项 -> 调试GPU过度绘制 -> 显示GPU过度绘制

打开后，屏幕会有多种颜色，切换到需要检测的应用程序，对于各个色块，有一张参考图：

其中蓝色部分表示1层过度绘制，红色表示4层过度绘制。

解决方案

移除不必要的background

下面举个简单的例子：

activity_main 布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical"
    tools:context="com.example.erkang.overdraw.MainActivity">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardBackgroundColor="@color/white">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white">

            <TextView
                android:id="@+id/title_tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:paddingBottom="5dp"
                android:paddingTop="5dp"
                android:text="OverDraw展示样式" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:layout_below="@+id/title_tv"
                android:layout_marginBottom="5dp"
                android:scaleType="fitCenter"
                android:src="@drawable/infernal_affairs_0" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>

    <View
        android:layout_width="match_parent"
        android:layout_height="20dp" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/gray" />
</LinearLayout>

RecyclerView的item的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center">
    <ImageView
        android:layout_marginLeft="10dp"
        android:id="@+id/item_iv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        tools:src="@drawable/infernal_affairs_1" />
    <TextView
        android:layout_marginLeft="10dp"
        android:id="@+id/item_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:text="对唔住，我喺差人。" />
</LinearLayout>

Activity代码：

public class MainActivity extends AppCompatActivity {
    private MyAdapter myAdapter;
    private RecyclerView recyclerView;
    private static final int ITEM_COUNT = 20;
    private static final int ITEM_DISTANCE = 40;
    private LinearLayoutManager layoutManager;
    private MyItemDecoration myItemDecoration;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        setContentView(R.layout.activity_main);
        init();
    }

    private void init() {
        recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        myAdapter = new MyAdapter(MainActivity.this, ITEM_COUNT);
        layoutManager = new LinearLayoutManager(MainActivity.this, LinearLayoutManager.VERTICAL, false);
        myItemDecoration = new MyItemDecoration(ITEM_DISTANCE);
        recyclerView.addItemDecoration(myItemDecoration);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(myAdapter);
    }
}

ItemDecoration代码:

public class MyItemDecoration extends RecyclerView.ItemDecoration{
    protected int halfSpace;

    /**
     * @param space item之间的间隙
     */
    public MyItemDecoration(int space){
        setSpace(space);
    }
    public void setSpace(int space) {
        this.halfSpace = space / 2;
    }
  
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        outRect.top = halfSpace;
        outRect.bottom = halfSpace;
        outRect.left = halfSpace;
        outRect.right = halfSpace;
    }
}

现在看起来的效果是这样的：

图中，我们需要上方展示的部分背景为白色，而下方列表Item之间的颜色为灰色，item的背景为白色。打开显示过度绘制功能后是这样的：

图中可以看到很多区域出现了三重或四重的过度绘制现象。那么我们开始去掉不必要的background。

不必要的background 1：

总布局LinearLayout中的 android:background="@color/white" 可以去掉；

不必要的background 2：

上方布局RelativeLayout中的android:background="@color/white"可以去掉;

去掉这两个background后，我们重新安装一下应用程序，发现界面上方过度绘制现象明显改善：

但界面下方仍存在过度绘制现象，若把RecyclerView中的background值的灰色去掉，则下方列表Item之间的就会变成白色，显然不是我们想要的效果：

于是，我们需要对RecyclerView的ItemDecoration类进行改造，改造成如下：

public class MyItemDecoration extends RecyclerView.ItemDecoration{
    protected int halfSpace;
    private Paint paint;
    /**
     * @param space item之间的间隙
     */
    public MyItemDecoration(int space, Context context) {
        setSpace(space);
        paint = new Paint();
        paint.setAntiAlias(true);//抗锯齿
        paint.setColor(context.getResources().getColor(R.color.gray));//设置背景色
    }
    public void setSpace(int space) {
        this.halfSpace = space / 2;
    }
    /**
     *
     * 重写onDraw 方法以实现recyclerview的item之间的间隙的背景
     * @param c 画布
     * @param parent 使用该 ItemDecoration 的 RecyclerView 对象实例
     * @param state 使用该 ItemDecoration 的 RecyclerView 对象实例的状态
     */
    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        int outLeft, outTop, outRight, outBottom,viewLeft,viewTop,viewRight,viewBottom;
        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View view = parent.getChildAt(i);
            viewLeft = view.getLeft();
            viewTop = view.getTop();
            viewRight = view.getRight();
            viewBottom = view.getBottom();
// item外层的rect在RecyclerView中的坐标
            outLeft = viewLeft - halfSpace;
            outTop = viewTop - halfSpace;
            outRight = viewRight + halfSpace;
            outBottom = viewBottom + halfSpace;
//item 上方的矩形
            c.drawRect(outLeft, outTop, outRight,viewTop, paint);
//item 左边的矩形
            c.drawRect(outLeft,viewTop,viewLeft,viewBottom,paint);
//item 右边的矩形
            c.drawRect(viewRight,viewTop,outRight,viewBottom,paint);
//item 下方的矩形
            c.drawRect(outLeft,viewBottom,outRight,outBottom,paint);
        }
    }
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        outRect.top = halfSpace;
        outRect.bottom = halfSpace;
        outRect.left = halfSpace;
        outRect.right = halfSpace;
    }
}

其实就是增加了onDraw方法，在item的间隙画上了带背景色的矩形，于是我们想要的效果又回来了：

这时打开“显示过度绘制”功能：

已经是可以接受的效果了。

总结

解决过度绘制现象，可以从这两个方法入手：

利用 Hierarchy Viewer 观察整个界面的ViewTree，删掉无用的图层，找到能合并的view合并，找到红点图层分析原因；
查看各图层的background，去掉不必要的background；
对于列表中Item之间的间隙颜色，不要在列表的 background 设置，应该在列表应用的 ItemDecoration 中设置

后记

本文已上传至GitHub https://github.com/EKwongChum/OverDraw 欢迎指出问题，谢谢。

EKwongChum/OverDraw

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages