Android自定义View系列之详解View的绘制流程

目录

一、开场白

二、View的绘制流程

2.1测量的过程

2.2布局的过程

2.3绘制的过程

一、开场白

开讲之前我们先预设一种自定义ViewGroup的场景：我们知道LinearLayout、FrameLayout、RelativeLayout...都是系统定义实现的布局，我们想要自定义一个FlowLayout流式布局实现我们自己要的效果（自定义不就是按照自己想要的效果实现的一种布局），流式布局目前Google官方还没帮我们提供，但网上有很多自定义的流式布局，也都是开发者们自己继承ViewGroup实现的，今天以自定义ViewGroup实现流式布局FlowLayout为大前提讲解View的绘制过程。

二、View的绘制流程

牢记我们开场白的大前提：FlowLayout，就是个自定义ViewGroup，带着这个思路去看下面的过程。

View的生命周期图：

View的绘制流程：规规矩矩的测量measure()---->整整齐齐的布局layout()---->漂漂亮亮的装修draw()；

类比一个生活中的场景：别人送你一块地皮(ViewGroup)做房子，我也不知道这块地多大，并且你手上有几件装修好了的房间(子View)。施工师傅先用尺子测量你要用这块地要隔开几个房间都给你先量好你手上每个房间的大小，记住这个时候还没有测量这整块地的大小，我也不需要去测，因为我只要把每个房间的大小测量好了，拼接起来（各个房间拼在一起形成行行列列，这个时候脑海中就要有流式布局的模型了：取各行中最长的那一行作为房子的宽，取所有行加起来的高度作为房子的长），这样就测量出了这块地的长宽了，这就是measure()的过程。接下来就是布局了，你刚刚只是把每个单独的房间宽高测出来了，但是你怎么把每个房间摆放在这块地皮的哪个位置就是layout()的工作了，循环调用每个子View的layout()方法，把坐标参数穿进去就把子View都布局好了。装修draw其实这里可以不需要，因为你手上的每个房间里里外外都装修好了，经过布局有规则的拼接之后就是一栋漂亮的房子了，完工。

上面的地皮就是FlowLayout，每个房间就类比TextView（每个TextView系统都帮我们实现装修好了，内部实现了onDraw()方法，就是可以直接使用的），我们要做的就是自定义FlowLayout的时候测量出自己的大小和layout布局好每个子View就行。

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/shape_textview"
            android:text="搜索歷史"
            android:textColor="@color/colorPrimary" />

        <com.example.flowlayoutdamo.FlowLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:paddingLeft="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/shape_textview"
                android:text="帥哥美女"
                android:textColor="@color/colorAccent" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/shape_textview"
                android:text="帥哥111美女"
                android:textColor="@color/colorAccent" />

            ......

        </com.example.flowlayoutdamo.FlowLayout>
</LinearLayout>

2.1测量的过程

measure测量的过程就是确定View的大小的过程。

首先捋顺几个概念：onMeasure()、measure()、setMeasuredDimension()，先看张View层级结构图：

1、measure()为final方法，不可重写；onMeasure()可重写。

View.java源码：
public final void measure(int widthMeasureSpec, int heightMeasureSpec) {
	...
}
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    ...
}

2、父类重写的onMeasure方法中调用子View的measure()，子View的measure()调用子View的onMeasure()，如此依次递归调用。

//FrameLayout
	@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        ...
        count = mMatchParentChildren.size();
        if (count > 1) {
            for (int i = 0; i < count; i++) {
                final View child = mMatchParentChildren.get(i);
                ...
                child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
            }
        }
    }
    //View
    public final void measure(int widthMeasureSpec, int heightMeasureSpec) {
        ...
        if (forceLayout || needsLayout) {
            ...
            if (cacheIndex < 0 || sIgnoreMeasureCache) {
                // measure ourselves, this should set the measured dimension flag back
                onMeasure(widthMeasureSpec, heightMeasureSpec);
                ...
            } else {
                ...
            }
           ...
    }

下面用一个实例来讲一下这个测量的递归调用的过程：xml布局就用上面FlowLayout所在的布局（在上面那段有“帅哥美女”的代码中）

------> 布局的根布局是LinearLayout，LinearLayout重写了onMeasure()方法，在这个方法中会去遍历根布局LinearLayout所有的子View，并调用每一个子View(这里有两个子View：TextView和FlowLayout)的measure()方法，在这两个子View的measure()中又会调用自身重写的onMeasure()方法（调用TextView的onMeasure()和FlowLayout的