带你一步步了解 onDraw() 和 dispatchDraw(

一、官方文档

先看下官方给出的解释：

onDraw: Implement this to do your drawing.

绘制 View 自身内容时，会调用 onDraw(Canvas canvas) ，可实现该方法完成绘制。

dispatchDraw: Called by draw to draw the child views. This may be overridden by derived classes to gain control just before its children are drawn (but after its own view has been drawn).

绘制 ViewGroup 中的子 View 时，会调用 dispatchDraw(Canvas canvas)，需要注意的是，是在绘制 ViewGroup 自己之后，也就是在 onDraw(Canvas canvas) 之后。

说的很清晰，看上去也平平无奇嘛！可稍一不小心，就会让你分分钟怀疑人生，这 API 有问题吧？

在下面在 Demo 中，会逐步讲解这里面的使用，功能很简单：继承 LinearLayout 绘制一个指针。

二、Demo

先看下最终效果

最终效果

布局：

<?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="match_parent"
    android:background="@android:color/darker_gray"
    tools:context=".MainActivity">

    <com.ff.canvas.Indicator
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@android:color/holo_red_dark"
            android:gravity="center"
            android:text="标题1"
            android:textColor="@android:color/white" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="标题2"
            android:textColor="@android:color/white" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="标题3"
            android:textColor="@android:color/white" />
    </com.ff.canvas.Indicator>

</LinearLayout>

自定义控件：

public class Indicator extends LinearLayout {

    private static final String TAG = "Indicator";

    private Paint mPaint;

    private Path mPath;// 绘制三角的路径

    public Indicator(Context context) {
        this(context, null);
    }

    public Indicator(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public Indicator(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.FILL);

        mPath = new Path();// 三角形
        mPath.moveTo(0, -8);
        mPath.lineTo(40, -8);
        mPath.lineTo(20, -30);
        mPath.close();// 形成闭环
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.d(TAG, "onDraw: ");
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        Log.d(TAG, "dispatchDraw: ");
    }
}

第一次尝试

准备工作都做好了，开始在onDraw中开始撸吧！

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Log.i(TAG, "onDraw: ");
    canvas.drawRect(0, getHeight() - 8, getWidth() / 3f, getHeight(), mPaint);
    // 移动Canvas，绘制指针
    canvas.save();
    canvas.translate(getWidth() / 6f - 20, getHeight());
    canvas.drawPath(mPath, mPaint);
    canvas.restore();
}

分分钟搞定，看下效果：

onDraw 没有执行

竟然没有显示出来指针，看下 Log，onDraw() 都没有执行

4246-424/com.ff.canvas D/ViewPagerIndicator: dispatchDraw: 

原因是，ViewGroup 一般不会绘制自身，只会绘制子 View，除非存在背景，所以不会回调 onDraw()，这也是处于性能和效率的考虑。

第二次尝试

那么我们给 Indicator 一个背景不就搞定了么。

<com.ff.canvas.Indicator
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@android:color/holo_blue_dark"
    android:orientation="horizontal">
    ...
</com.ff.canvas.Indicator>

还是没有出现：

增加背景

onDraw()也执行了：

8525-8525/com.ff.canvas D/Indicator: onDraw: 
8525-8525/com.ff.canvas D/Indicator: dispatchDraw: 

这时大胆的猜测很可能是绘制子 View 的时候，将指针遮挡了，毕竟咱的代码不会出错！把dispatchDraw()注释掉：

@Override
protected void dispatchDraw(Canvas canvas) {
//    super.dispatchDraw(canvas);
    Log.d(TAG, "dispatchDraw: ");
}

果不其然，就是子View的绘制，影响了我们的指针：

注释掉 dispatchDraw

第三次尝试

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Log.d(TAG, "onDraw: ");
}

@Override
protected void dispatchDraw(Canvas canvas) {
    super.dispatchDraw(canvas);
    Log.d(TAG, "dispatchDraw: ");
    canvas.drawRect(0, getHeight() - 8, getWidth() / 3f, getHeight(), mPaint);
    // 移动Canvas，绘制指针
    canvas.save();
    canvas.translate(getWidth() / 6f - 20, getHeight());
    canvas.drawPath(mPath, mPaint);
    canvas.restore();
}

完美实现：

最终效果

一定要注意，绘制指针要在 dispatchDraw 的 super 之后，不然子 View 还没有完成绘制，依然会遮挡我们的指针。

三、结论

• ViewGroup 一般情况下不会回调 onDraw()，除非有背景或者其他情况，具体可以看下UI绘制流程中有关 draw 的描述。
• ViewGroup 存在背景的情况下，在 onDraw() 中绘制，的确可以绘制成功，但会被子控件遮挡，所以这里并不是是一个好的时机。
• ViewGroup 的绘制，应该在 dispatchDraw() 中，并且放在 super 之后，目的是确保在子 View 绘制完成后，再进行绘制，这样就不会被子 View 遮挡了。