View绘制的三大流程

View绘制的三大流程主要指：measure(测量)、layout(布局)、draw(绘制)。measure过程中确定View的尺寸（即宽高），layout过程中确定View的位置（即上下左右的位置），draw过程确定View显示的内容。

在开发中，通常都是在Activity的onCreate()中调用setContentView(R.layout.custom_layout)来实现想要的页面布局。页面都是依附在窗口Window之上的，而DecorView即是窗口最顶层的视图。DecorView本身也继承FrameLayout，它里面的布局如下所示。


（我们调用setContentView()，就是就是把我们的布局放在id为content的FrameLayout容器里，这也是为什么这个方法叫setContentView，而不是setView或其他名字啦。）

ViewRoot的实现为ViewRootImpl类，它是连接WindowManager和DecorView的纽带，View绘制的三大流程均是通过ViewRoot来控制完成的。当Activity对象创建完毕后，会将DecorView对象添加到窗口Window中，同时会创建ViewRootImpl对象，并将该ViewRootImpl对象和DecorView对象建立关联。

当我们调用View.invalidate()或View.requestLayout()要求View重绘时，在View的内部会不断向上查找父布局，直到找到最外层的根布局DecorView后，调用与之相关联的ViewRootImpl的performTraversals()方法，真正开始View的绘制流程。


绘制流程如下，其中蓝色方块里面的均表示执行的方法，如onMeasure()、onLayout()、onDraw()。


View的绘制流程是从ViewRoot的performTraversals()方法开始的，首先在performMeasure中会调用DecorView的measure方法，在measure方法里面又调用了onMeasure方法，在onMeasure方法中则会对DecorView的所有子控件进行measure过程，这个时候measure流程就会从父容器传递到子控件中了。接着子控件会重复父容器的measure过程，调用measure方法，其中又调用onMeasure方法，把measure流程传递到子控件中，直到子控件是非容器类型的控件才停止向下测量。如此反复遍历就完成了整个视图树的mesure过程啦。同理，performLayout、performDraw的传递流程和performMeasure是类似的。

这里简述了View绘制流程的大致原理，从ViewRoot的performTraversals()方法开始，经过measure、layout和draw三个过程最终将一个个View绘制出来。可能此时会有疑惑，由于绘制是从最外层的根布局开始的，如果我仅仅是调用了一个子控件的invalidate()刷新方法，会不会导致根布局下面的所有控件都会被重新绘制?这样太耗时间了。当然不能这样啦，从根布局往下绘制中，会判定该控件是否需要绘制，比如该控件是不可见（GONE）的肯定就不需要绘制了。具体系统是如何判断的是否绘制，这是细节问题，不必纠结。不需要绘制的话则直接跳过该控件的绘制，等传递到我们指定要绘制的控件时，这时需要绘制了，就会调用相应的绘制方法。

现在再进一步了解每个绘制阶段是如何工作的。

Measure

measure是指测量的过程，确定View的具体大小。测量过程由measure()方法完成。

/**

    *

    * @param widthMeasureSpec 父容器计算出的代表宽度的MeasureSpec

    * @param heightMeasureSpec 父容器计算出的代表高度的MeasureSpec

    */

    public final void measure(int widthMeasureSpec, int heightMeasureSpec) {

        ...

    }

MeasureSpec决定了一个View的尺寸规格。它是一个32位的int值，高2位存储了specMode，低30位存储了specSize，其中specSize记录的是大小，specMode记录的是测量模式。specMode一共有三种类型，如下所示：

1. EXACTLY

父容器已经检测出子控件所需的精确大小，这个时候子控件的最终大小就是specSize所指定的值。他对应于LayoutParams中的match_parent和具体数值这两种模式。

2. AT_MOST

父容器指定了一个最大值尺寸给子控件，子控件的大小不能大于这个值，具体最后子控件的大小是多少就要看子控件的实现了。它对应于LayoutParams中的wrap_content。

3. UNSPECIFIED

这个一般用于系统内部。开发过程中基本不会用到。

可通过下面的代码读取信息或将信息组装。

        int specSize = MeasureSpec.getSize(measureSpec); // 获取specSize

        int specMode = MeasureSpec.getMode(measureSpec); // 获取specMode

        // 组装回MeasureSpec

        int measureSpec = MeasureSpec.makeMeasureSpec(specSize, specMode);

在测量过程中，系统会读取控件的LayoutParams信息，根据父容器所采用的测量规则转换成对应的MeasureSpec，然后传给子控件的measure()方法。那么最顶层的DecorView的MeasureSpec又是谁帮它计算的？当然是它的好基友ViewRootImpl啦！它会结合窗口的尺寸（通常就是屏幕的尺寸）和DecorView的LayoutParams计算出MeasureSpec，然后调用performMeasure(widthMeasureSpec, heightMeasureSpec)方法传给DecorView。而对于普通的View，其MeasureSpec由父容器和该View的LayoutParams来共同决定。MeasureSpec一旦确定后，onMeasure中就可以确定View的测量尺寸了。

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),

                getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));

    }

前面我们可以看到measure()方法是final类型的，子类不可以覆盖该方法，而onMeasure则没有这个限制，所以如果我们要干涉View的measure测量过程，重写onMeasure()方法即可，在里面加上我们的测量规则。调用setMeasuredDimension()方法就表示确定了View的测量尺寸（MeasureWidth\MeasureHeight）。

好的，我们现在自定义一个View，写死它的测量尺寸。

public class MyView extends View {

    public MyView(Context context, AttributeSet attrs) {

        super(context, attrs);

        setBackgroundColor(Color.RED); // 背景颜色设置为红色

    }

    @Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        // 写死测量尺寸为200x100

        setMeasuredDimension(200, 100);

    }

}

public class MyViewActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_myview);

    }

}

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

              android:layout_width="match_parent"

              android:layout_height="match_parent"

              android:orientation="vertical">

    <com.example.huangziwei.myapplication.MyView

        android:layout_width="match_parent"

        android:layout_height="match_parent"/>

</LinearLayout>

效果如下：

可见，虽然在布局文件中MyView设置了宽高为match_parent填充屏幕，但在代码onMeasure()方法中，它完全不理父容器帮它计算好的MeasureSpec，任性地把测量尺寸设置为200x100.

如果我们的自定义view是容器类，即继承自ViewGroup，在onMeasure()方法中除了要完成自己的测量过程以外，还需要调用所有子控件的measure()方法，帮忙计算好MeasureSpec，通知子控件完成测量。

Layout

尺寸测量好之后，就要确定View的位置了。顾名思义，layout就是确定布局位置的过程，由layout()方法完成布局过程。


/**

    * (left,top)左上角的坐标，（right,bottom）右下角的坐标，两个坐标确定一个矩形范围

    * @param left 左边距离父容器的长度

    * @param top 上边距离父容器的长度

    * @param right 右边距离父容器的长度

    * @param bottom 下边距离父容器的长度

    */

    public void layout(int l, int t, int r, int b) {

      ...

    }

在layout()方法中确定了View得四个顶点的位置，那么View在父容器中的位置也就确定了，此时view的宽高（Width\Height）也就确定。接着会调用onLayout方法，这个方法对于容器控件ViewGroup的作用是用来确定子控件的位置，在里面调用所有子控件的layout()方法，计算好它们预期的位置，通知子控件完成布局。和onMeasure()类似，onLayout()的具体实现和不同的布局规则相关。

前面我们在measure测量阶段，有说到测量尺寸MeasureWidth\MeasureHeight,那么它跟这里确定的宽高Width\Height有何区别?测量尺寸形成于measure过程，可通过getMeasureWidth\getMeasureHeight方法获取，而view宽高形成于layout过程，可通过getWidth\getHeight方法获取。一般情况下测量尺寸跟view宽高相同，除非特意在layout()方法中修改view的顶点位置，这时它们就不相同了，这样做其实没有实际意义，导致view显示异常。比如下面代码。

  public void layout(int l, int t, int r, int b) {

        // 故意让那个坐顶点向右偏移50px，而右顶点保持不变，这样Width就比MeasureWidth小了50px

        super.layout(l + 50, t, r, b);

    }

计算view宽高的方法。

  public final int getWidth() {

        return mRight - mLeft; //  右顶点减去左顶点坐标

    }

    public final int getHeight() {

        return mBottom - mTop;  //  下顶点减去上顶点坐标

    }

第一次进入绘制流程时，在layout没有确定View的布局位置之前，调用getWidth()和getHeight()返回为0，所以我们可以在onLayout()方法里面获取宽高，此时布局位置已经确定。我们自定义一个非容器view时，重写layout()方法确定布局位置即可；如果是容器控件ViewGroup则还需要重写onLayout()方法去确定子控件的布局位置。

现在我们再改一下上面的自定义view，把它的布局位置改成距离父容器顶部100px,左侧50px。

public class MyView extends View {

    public MyView(Context context, AttributeSet attrs) {

        super(context, attrs);

        setBackgroundColor(Color.RED); // 背景颜色设置为红色

    }

    @Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        // 写死测量尺寸为200x100

        setMeasuredDimension(200, 100);

    }

    @Override

    public void layout(int l, int t, int r, int b) {

        // 距离父容器顶部100px,左侧50px

        super.layout(l + 50, t + 100, r + 50, b + 100);

    }

}

效果如下。

Draw

Draw过程就是把View绘制在屏幕上，相对前面两个过程就简单很多了。它由draw()方法完成。

public void draw(Canvas canvas) {

        ...

    }

draw()方法传进了一个Canvas对象，表示一个画布，我们在画布上画出来的东西最后会作为View的内容显示在屏幕上。在draw()方法中完成了几个步骤：

1.绘制背景。background.draw(canvas)(背景图是在draw()方法里面绘制的).

2.绘制自己。调用onDraw(canvas).

3.绘制子控件。调用dispatchDraw(canvas).

4.绘制装饰。调用onDrawScrollBars(canvas).

当我们自定义一个非容器的View时，一般只需要重写onDraw()方法，在画布上绘图。View类中的dispatchDraw()方法是一个空方法，而ViewGroup的dispatchDraw()方法中就会有具体的绘制代码，绘制子元素。所以如果自定义了一个容器控件ViewGroup，一般情况下不需要我们去重写dispatchDraw()方法。

值得注意的是容器控件ViewGroup的绘制，当它没有背景时直接调用的是dispatchDraw()方法, 而绕过了onDraw()方法，这是系统做的优化。我们可以通过调用setWillNotDraw()方法显示关闭这个优化操作，则后续绘制就会调用onDraw()方法，无论是否设置了背景图。

现在我们继续改一下MyView，让它显示一个绿色的圆圈。

public class MyView extends View {

    private Paint mPaint = new Paint();

    public MyView(Context context, AttributeSet attrs) {

        super(context, attrs);

        setBackgroundColor(Color.RED); // 背景颜色设置为红色

        // 画笔设置

        mPaint.setStyle(Paint.Style.FILL); // 填充

        mPaint.setColor(Color.GREEN); // 绿色

    }

    @Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        // 写死测量尺寸为200x100

        setMeasuredDimension(200, 100);

    }

    @Override

    public void layout(int l, int t, int r, int b) {

        // 距离父容器顶部100px,左侧50px

        super.layout(l + 50, t + 100, r + 50, b + 100);

    }

    @Override

    protected void onDraw(Canvas canvas) {

        canvas.drawCircle(50, 50, 50, mPaint); // 绿色圆圈

    }

}

效果如下。


至此，view的绘制流程就讲的差不多了，明白了原理后，自定义View就简单多了，其实就是根据想要的效果在相应的onMeasure、layout\onLayout、onDraw方法实现即可。

这里还需要说明的一点是，虽然invalidate()和requestLayout()方法都会导致performtravals方法被调用，但调用invalidate()时view没有设置强制重新测量，而且大小也没有发生变化，所以这时只有draw阶段才真正得到执行，view的内容也就被刷新了。而requestLayout() 会重走view绘制过程的三大流程，setLayoutParams()内部就是调用了requestLayout()发方法。还有，这两个方法调用时，并没有马上进入绘制流程，而向ui线程的消息队列发送一条绘制消息，等待消息处理。如果消息队列中已经存在绘制消息，那么则不发送绘制消息，避免重复绘制。这样设计有它的好处，不然在一段代码里每一个涉及到ui更新的代码都要马上绘制一次，太浪费了，何不汇总起来，等待ui线程处理消息时一起绘制呢？（想问我怎么知道的，看源码呀，哈哈哈）

最后再给一个例子，加深一下上面的知识。这个例子比较简单，自定义给一个容器组件MyLinearLayout，实现下面的效果，让MyLinearLayout里面的子控件水平线性排列。


代码如下。

/**

* 简单的容器类：让子组件水平排列

*/

public class MyLinearLayout extends ViewGroup {

    public MyLinearLayout(Context context, AttributeSet attrs) {

        super(context, attrs);

    }

    @Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        // 调用ViewGroup的measureChildren()方法测量子控件

        measureChildren(widthMeasureSpec, heightMeasureSpec);

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }

    @Override

    protected void onLayout(boolean changed, int l, int t, int r, int b) {

        int childLeft = 0; // 子控件距离左侧的位置

        for (int i = 0; i < getChildCount(); i++) {

            View child = getChildAt(i);

            child.layout(childLeft, 0, childLeft + child.getMeasuredWidth(), child.getMeasuredHeight());

            childLeft += child.getMeasuredWidth(); // 下一个子控件在上一个子控件的右边

        }

    }

}

代码很简单，在onMeasure方法里面直接调用ViewGroup.measureChildren()方法进行测量，该方法内部又遍历了容器下的所有子控件，对所有子控件调用measureChild()方法进行测量。layout里面方法实现了水平线性排列。

布局文件。

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

              android:layout_width="match_parent"

              android:layout_height="match_parent"

              android:orientation="vertical">

    <com.example.huangziwei.myapplication.MyLinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <ImageView

            android:layout_width="100dp"

            android:layout_height="100dp"

            android:layout_marginLeft="100dp"

            android:src="@drawable/ic_drag"

            />

        <ImageView

            android:layout_width="100dp"

            android:layout_height="100dp"

            android:background="@drawable/ic_drag"

            />

        <ImageView

            android:layout_width="100dp"

            android:layout_height="100dp"

            android:background="@drawable/ic_drag"

            />

    </com.example.huangziwei.myapplication.MyLinearLayout>

</LinearLayout>

如果我想要子控件的宽度平分容器的宽度呢？向下面那样。

修改onMearsure方法，测量时动点手脚就行啦。

@Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int parentWidth = MeasureSpec.getSize(widthMeasureSpec); // 获取容器宽度

        final int size = getChildCount();

        for (int i = 0; i < size; ++i) {

            final View child = getChildAt(i);

            final LayoutParams lp = child.getLayoutParams();

            child.measure(

                    MeasureSpec.makeMeasureSpec(parentWidth / size, MeasureSpec.EXACTLY), // 子控件平分容器的宽度

                    getChildMeasureSpec(heightMeasureSpec, 0, lp.height));

        }

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }

getChildMeasure()是ViewGroup的方法，获取子控件的MeasureSpec。其实很多功能都已经封装好了，就看我们会不会使用，组合不同的方法实现自己想要的效果。

其实真正的容器布局的规则是没那么简单的，需要考虑到margin、padding等属性对布局的影响。这里仅仅是演示了如果要自定义一个容器，需要从哪里入手。但开发中，更多的是自定义一个非容器类型View，通常是在onLayout方法里面获宽高，然后在onDraw方法里面绘制出需要显示的内容。

总得来说，自定义view时需要的注意的地方：

1.如果我们要干涉View的measure测量过程，重写onMeasure()方法即可，在里面加上我们的测量规则.自定义view是容器类，即继承自ViewGroup，在onMeasure()方法中除了要完成自己的测量过程以外，还需要调用所有子控件的measure()方法，帮忙计算好MeasureSpec，通知子控件完成测量。

2.自定义一个非容器view时，重写layout()方法确定布局位置即可；如果是容器控件ViewGroup则还需要重写onLayout()方法去确定子控件的布局位置。在onLayout()方法里面获取宽高，此时布局位置已经确定。

3.自定义一个非容器的View时，一般只需要重写onDraw()方法，在画布上绘图。View类中的dispatchDraw()方法是一个空方法，而ViewGroup的dispatchDraw()方法中就会有具体的绘制代码，绘制子元素。所以如果自定义了一个容器控件ViewGroup，一般情况下不需要我们去重写dispatchDraw()方法

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 210,914评论 6赞 490
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 89,935评论 2赞 383
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 156,531评论 0赞 345
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,309评论 1赞 282
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,381评论 5赞 384
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,730评论 1赞 289
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,882评论 3赞 404
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,643评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,095评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,448评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,566评论 1赞 339
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,253评论 4赞 328
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,829评论 3赞 312
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,715评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,945评论 1赞 264
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,248评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,440评论 2赞 348