在剛開始學習Java的時候，我看的是Mars老師的視訊。Mars老師說過的一句話讓我印象很深刻：要有一顆面向物件的心。

如果我們用面向物件的思維方式來思考，就會覺的View的繪製機制是很合理，很科學的。我們要在一張紙上畫一幅畫，首先要測量一下這幅畫有多大吧，然後確定在這張紙的哪個地方畫會顯得比較美觀，最後才是用畫筆工具將畫繪製在紙上。
在Android中也是一樣的。View的繪製流程主要是指measure，layout，draw這三步，即測量，佈局，繪製。首先是要測量View的寬高，然後佈局確定其在父容器中的位置座標，最後才是繪製顯示出來。那這篇部落格就一起來探索View的繪製流程吧。

View的繪製流程從ViewRootImpl的performTraversals方法開始，在performTraversals方法中會呼叫performMeasure、performLayout、performDraw三個方法來遍歷完成整棵檢視樹的繪製。

measure過程

MeasureSpec

performMeasure方法是這樣被呼叫的：

performMeasure(childWidthMeasureSpec, childHeightMeasureSpec);

接收了兩個引數，很好奇這兩個引數是什麼。看名字是“子View寬測量說明書”和“子View高測量說明書”？應該先來了解一下MeasureSpec。

MeasureSpec是一個32位的int值，高2位是specMode記錄的是測量模式，低30位是specSize記錄的是測量大小。

specMode有三種類型：

EXACTLY ： 精確值模式，表示父檢視希望子檢視的大小應該是由specSize的值來決定的，這個時候View的最終大小就是specSize所記錄的大小。對應於LayoutParams中的 match_parent和具體數值這兩種模式。比如 android:layout_width=”match_parent”，android:layout_width=”50dp”

AT_MOST ： 最大值模式，表示父容器指定了一個可用大小specSize，子檢視最多隻能是specSize中指定的大小，不能大於這個值。對應於LayoutParams中的 wrap_content的形式。

UNSPECIFIED ：父容器不對View有任何限制，View想多大就多大，一般不會用到

MeasureSpec到底是用來幹嘛的？
系統是通過View的MeasureSpec來確定View的測量寬高的

MeasureSpec是怎麼來的？
對於普通的View來說，其MeasureSpec由父容器的MeasureSpec和自身的LayoutParams共同確定。對於頂級View（DecorView），其MeasureSpec由視窗的尺寸和其自身的LayoutParams共同確定。

我們回到performMeasure方法，來看看傳入的引數childWidthMeasureSpec和childHeightMeasureSpec，這兩個MeasureSpec是頂級View的，它們由視窗的尺寸和其自身的LayoutParams共同確定。那它們又是怎麼產生的？在ViewRootImpl的measureHierarchy方法中，有兩行程式碼是這樣的：

childWidthMeasureSpec = getRootMeasureSpec(desiredWindowWidth, lp.width);
childHeightMeasureSpec = getRootMeasureSpec(desiredWindowHeight, lp.height);

getRootMeasureSpec方法獲取到根View（DecorView）的MeasureSpec。傳入的引數desiredWindowWidth和desiredWindowHeight是螢幕的尺寸。lp.width 和lp.height都是MATCH_PARENT。

那麼探探getRootMeasureSpec方法，如下：

private static int getRootMeasureSpec(int windowSize, int rootDimension) {
    int measureSpec;
    switch (rootDimension) {

    case ViewGroup.LayoutParams.MATCH_PARENT:
        // Window can't resize. Force root view to be windowSize.
        measureSpec = MeasureSpec.makeMeasureSpec(windowSize, MeasureSpec.EXACTLY);
        break;
    case ViewGroup.LayoutParams.WRAP_CONTENT:
        // Window can resize. Set max size for root view.
        measureSpec = MeasureSpec.makeMeasureSpec(windowSize, MeasureSpec.AT_MOST);
        break;
    default:
        // Window wants to be an exact size. Force root view to be that size.
        measureSpec = MeasureSpec.makeMeasureSpec(rootDimension, MeasureSpec.EXACTLY);
        break;
    }
    return measureSpec;
}

會轉到MeasureSpec的makeMeasureSpec方法，而makeMeasureSpec方法就是將SpecSize和SpecMode包裝成32位的int值。
那makeMeasureSpec方法是怎麼組裝MeasureSpec的呢？如下：

public static int makeMeasureSpec(@IntRange(from = 0, to = (1 << MeasureSpec.MODE_SHIFT) - 1) int size,
                                  @MeasureSpecMode int mode) {
    if (sUseBrokenMakeMeasureSpec) {
        return size + mode;
    } else {
        return (size & ~MODE_MASK) | (mode & MODE_MASK);
    }
}

這時，根View的MeasureSpec就誕生了。它將參與構成子元素的MeasureSpec。

而對於普通的View，其MeasureSpec由父容器的MeasureSpec和自身的LayoutParams共同構成。我們知道剛才getRootMeasureSpec方法獲取到的是頂級View的MeasureSpec，頂級View本身就是父容器。
那現在看看ViewGroup的measureChildWithMargins方法，這個方法是用來測量子View的。如下：

protected void measureChildWithMargins(View child,
        int parentWidthMeasureSpec, int widthUsed,
        int parentHeightMeasureSpec, int heightUsed) {
    final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();

    final int childWidthMeasureSpec = getChildMeasureSpec(parentWidthMeasureSpec,
            mPaddingLeft + mPaddingRight + lp.leftMargin + lp.rightMargin
                    + widthUsed, lp.width);
    final int childHeightMeasureSpec = getChildMeasureSpec(parentHeightMeasureSpec,
            mPaddingTop + mPaddingBottom + lp.topMargin + lp.bottomMargin
                    + heightUsed, lp.height);

    child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
}

首先是呼叫子元素的getLayoutParams方法獲取到子元素的LayoutParams，之後呼叫了getChildMeasureSpec方法來獲取到子元素的MeasureSpec，可以看到傳入了父元素的MeasureSpec。

getChildMeasureSpec方法很重要，能讓我們瞭解子元素MeasureSpec的產生過程，如下：

public static int getChildMeasureSpec(int spec, int padding, int childDimension) {
    int specMode = MeasureSpec.getMode(spec);
    int specSize = MeasureSpec.getSize(spec);

    int size = Math.max(0, specSize - padding);

    int resultSize = 0;
    int resultMode = 0;

    switch (specMode) {
    // Parent has imposed an exact size on us
    case MeasureSpec.EXACTLY:
        if (childDimension >= 0) {
            resultSize = childDimension;
            resultMode = MeasureSpec.EXACTLY;
        } else if (childDimension == LayoutParams.MATCH_PARENT) {
            // Child wants to be our size. So be it.
            resultSize = size;
            resultMode = MeasureSpec.EXACTLY;
        } else if (childDimension == LayoutParams.WRAP_CONTENT) {
            // Child wants to determine its own size. It can't be
            // bigger than us.
            resultSize = size;
            resultMode = MeasureSpec.AT_MOST;
        }
        break;

    // Parent has imposed a maximum size on us
    case MeasureSpec.AT_MOST:
        if (childDimension >= 0) {
            // Child wants a specific size... so be it
            resultSize = childDimension;
            resultMode = MeasureSpec.EXACTLY;
        } else if (childDimension == LayoutParams.MATCH_PARENT) {
            // Child wants to be our size, but our size is not fixed.
            // Constrain child to not be bigger than us.
            resultSize = size;
            resultMode = MeasureSpec.AT_MOST;
        } else if (childDimension == LayoutParams.WRAP_CONTENT) {
            // Child wants to determine its own size. It can't be
            // bigger than us.
            resultSize = size;
            resultMode = MeasureSpec.AT_MOST;
        }
        break;

    // Parent asked to see how big we want to be
    case MeasureSpec.UNSPECIFIED:
        if (childDimension >= 0) {
            // Child wants a specific size... let him have it
            resultSize = childDimension;
            resultMode = MeasureSpec.EXACTLY;
        } else if (childDimension == LayoutParams.MATCH_PARENT) {
            // Child wants to be our size... find out how big it should
            // be
            resultSize = View.sUseZeroUnspecifiedMeasureSpec ? 0 : size;
            resultMode = MeasureSpec.UNSPECIFIED;
        } else if (childDimension == LayoutParams.WRAP_CONTENT) {
            // Child wants to determine its own size.... find out how
            // big it should be
            resultSize = View.sUseZeroUnspecifiedMeasureSpec ? 0 : size;
            resultMode = MeasureSpec.UNSPECIFIED;
        }
        break;
    }
    //noinspection ResourceType
    return MeasureSpec.makeMeasureSpec(resultSize, resultMode);
}

經過了getChildMeasureSpec方法，子元素的MeasureSpec也誕生了。這個方法程式碼雖然長長的，但邏輯並不複雜，就是根據父容器的MeasureSpec和子元素的LayoutParams來組裝子元素的MeasureSpec。所以說普通View的MeasureSpec由父容器的MeasureSpec和自身的LayoutParams共同決定。

那麼現在已經搞定了MeasureSpec，跟進performMeasure方法看看到底View的測量過程是怎樣的。

View的測量

performMeasure方法原始碼如下：

private void performMeasure(int childWidthMeasureSpec, int childHeightMeasureSpec) {
    Trace.traceBegin(Trace.TRACE_TAG_VIEW, "measure");
    try {
        mView.measure(childWidthMeasureSpec, childHeightMeasureSpec);
    } finally {
        Trace.traceEnd(Trace.TRACE_TAG_VIEW);
    }
}

轉到了View的measure方法，如下：

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

    //程式碼省略

    final boolean forceLayout = (mPrivateFlags & PFLAG_FORCE_LAYOUT) == PFLAG_FORCE_LAYOUT;

    //程式碼省略
    if (forceLayout || needsLayout) {
        // first clears the measured dimension flag
        mPrivateFlags &= ~PFLAG_MEASURED_DIMENSION_SET;

        resolveRtlPropertiesIfNeeded();

        int cacheIndex = forceLayout ? -1 : mMeasureCache.indexOfKey(key);
        if (cacheIndex < 0 || sIgnoreMeasureCache) {
            // measure ourselves, this should set the measured dimension flag back
            onMeasure(widthMeasureSpec, heightMeasureSpec);
            mPrivateFlags3 &= ~PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
        } 

        //程式碼省略

    mOldWidthMeasureSpec = widthMeasureSpec;
    mOldHeightMeasureSpec = heightMeasureSpec;

    mMeasureCache.put(key, ((long) mMeasuredWidth) << 32 |
            (long) mMeasuredHeight & 0xffffffffL); // suppress sign extension
}

可以看到View的measure方法是帶final的，不允許子類重寫。經過一系列的處理，會轉到onMeasure方法，那就跟進View的onMeasure方法探探：

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
            getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
}

呼叫了setMeasuredDimension將測量的寬高設定進去，好像很簡單的說。getDefaultSize方法用於獲取測量寬高，原始碼如下：

public static int getDefaultSize(int size, int measureSpec) {
    int result = size;
    int specMode = MeasureSpec.getMode(measureSpec);
    int specSize = MeasureSpec.getSize(measureSpec);

    switch (specMode) {
    case MeasureSpec.UNSPECIFIED:
        result = size;
        break;
    case MeasureSpec.AT_MOST:
    case MeasureSpec.EXACTLY:
        result = specSize;
        break;
    }
    return result;
}

其實內部邏輯是很簡單的，從measureSpec中取出specMode和specSize，然後就是AT_MOST和EXACTLY的情況下，都返回specSize，這個specSize就是測量的值了。

以上就是View的測量過程。

補充：對於TextView、Button、ImageView等，它們都是重寫了onMeasure方法的，可以閱讀一下它們的onMeasure方法原始碼

ViewGroup的測量

那麼接下來是ViewGroup的測量過程，ViewGroup中是沒有重寫onMeasure方法的，為什麼ViewGroup不像View一樣對其onMeasure方法做統一的實現呢？
我們可以想一下的，怎麼能定義出一個符合多種ViewGroup的onMeasure方法呢？很顯然LinearLayout和RelativeLayout的onMeasure方法實現是不一樣的。所以需要由子類去實現，這也是很合理的。

ViewGroup除了完成自身的測量，還會遍歷子元素，如此迴圈完成整棵檢視樹的測量過程。在ViewGroup中定義了一個measureChildren方法去遍歷子元素，如下：

protected void measureChildren(int widthMeasureSpec, int heightMeasureSpec) {
     final int size = mChildrenCount;
     final View[] children = mChildren;
     for (int i = 0; i < size; ++i) {
         final View child = children[i];
         if ((child.mViewFlags & VISIBILITY_MASK) != GONE) {
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
         }
     }
}

會轉到measureChild方法中去測量子元素。

protected void measureChild(View child, int parentWidthMeasureSpec,
        int parentHeightMeasureSpec) {
    final LayoutParams lp = child.getLayoutParams();

    final int childWidthMeasureSpec = getChildMeasureSpec(parentWidthMeasureSpec,
            mPaddingLeft + mPaddingRight, lp.width);
    final int childHeightMeasureSpec = getChildMeasureSpec(parentHeightMeasureSpec,
            mPaddingTop + mPaddingBottom, lp.height);

    child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
}

就這樣，ViewGroup將measure過程傳遞到了子元素。如此反覆完成整棵檢視樹的繪製。

以上就是ViewGroup的測量過程，至此，View的測量過程已經分析結束。當measure過程完成後，就可以呼叫getMeasuredWidth/getMeasuredHeight方法來獲取測量寬高了。理解ViewGroup的測量，可以閱讀下LinearLayout的onMeasure方法原始碼。

layout過程

在performLayout方法中轉到layout方法來完成View佈局過程。那就來看看View的layout方法，如下：

public void layout(int l, int t, int r, int b) {
    if ((mPrivateFlags3 & PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT) != 0) {
        onMeasure(mOldWidthMeasureSpec, mOldHeightMeasureSpec);
        mPrivateFlags3 &= ~PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
    }

    int oldL = mLeft;
    int oldT = mTop;
    int oldB = mBottom;
    int oldR = mRight;

    boolean changed = isLayoutModeOptical(mParent) ?
            setOpticalFrame(l, t, r, b) : setFrame(l, t, r, b);

    if (changed || (mPrivateFlags & PFLAG_LAYOUT_REQUIRED) == PFLAG_LAYOUT_REQUIRED) {
        onLayout(changed, l, t, r, b);
        mPrivateFlags &= ~PFLAG_LAYOUT_REQUIRED;

        ListenerInfo li = mListenerInfo;
        if (li != null && li.mOnLayoutChangeListeners != null) {
            ArrayList<OnLayoutChangeListener> listenersCopy =
                    (ArrayList<OnLayoutChangeListener>)li.mOnLayoutChangeListeners.clone();
            int numListeners = listenersCopy.size();
            for (int i = 0; i < numListeners; ++i) {
                listenersCopy.get(i).onLayoutChange(this, l, t, r, b, oldL, oldT, oldR, oldB);
            }
        }
    }

    mPrivateFlags &= ~PFLAG_FORCE_LAYOUT;
    mPrivateFlags3 |= PFLAG3_IS_LAID_OUT;
}

首先會呼叫setFrame將 l, t, r, b 四個引數傳入，確定View的四個頂點的位置。setFrame方法如下：

protected boolean setFrame(int left, int top, int right, int bottom) {
    boolean changed = false;

    //程式碼省略

    if (mLeft != left || mRight != right || mTop != top || mBottom != bottom) {
        changed = true;

        // Remember our drawn bit
        int drawn = mPrivateFlags & PFLAG_DRAWN;

        int oldWidth = mRight - mLeft;
        int oldHeight = mBottom - mTop;
        int newWidth = right - left;
        int newHeight = bottom - top;
        boolean sizeChanged = (newWidth != oldWidth) || (newHeight != oldHeight);

        // Invalidate our old position
        invalidate(sizeChanged);

        mLeft = left;
        mTop = top;
        mRight = right;
        mBottom = bottom;
        mRenderNode.setLeftTopRightBottom(mLeft, mTop, mRight, mBottom);

    //程式碼省略

    return changed;
}

可以看到，其實就是初始化了mLeft、mTop、mRight、mBottom。經過了setFrame方法後，View在父容器中的位置也就確定了。

眼尖的你發現了layout方法中，呼叫了 onLayout方法，這個onLayout方法是父容器用來確定子元素的位置的。你也應該猜到了onLayout方法內又會遍歷子元素，然後呼叫子元素的layout來確定子元素在父容器中的位置。

那我們跟進去onLayout方法看看：

protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
}

咦？竟然是空的。其實onLayout方法和onMeasure方法相似，需要由子類去具體實現。
我們看看DecorView的onLayout方法，DecorView也是一個ViewGroup嘛。

protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);

   //程式碼省略
}

轉到了父類（FrameLayout）的onLayout方法，我們繼續跟進去

protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    layoutChildren(left, top, right, bottom, false /* no force left gravity */);
}

又轉到了layoutChildren方法去佈局子元素。layoutChildren方法如下：

void layoutChildren(int left, int top, int right, int bottom, boolean forceLeftGravity) {
    final int count = getChildCount();

    final int parentLeft = getPaddingLeftWithForeground();
    final int parentRight = right - left - getPaddingRightWithForeground();

    final int parentTop = getPaddingTopWithForeground();
    final int parentBottom = bottom - top - getPaddingBottomWithForeground();

    for (int i = 0; i < count; i++) {
        final View child = getChildAt(i);
        if (child.getVisibility() != GONE) {
            final LayoutParams lp = (LayoutParams) child.getLayoutParams();

            final int width = child.getMeasuredWidth();
            final int height = child.getMeasuredHeight();

            int childLeft;
            int childTop;

            int gravity = lp.gravity;
            if (gravity == -1) {
                gravity = DEFAULT_CHILD_GRAVITY;
            }

            final int layoutDirection = getLayoutDirection();
            final int absoluteGravity = Gravity.getAbsoluteGravity(gravity, layoutDirection);
            final int verticalGravity = gravity & Gravity.VERTICAL_GRAVITY_MASK;

            switch (absoluteGravity & Gravity.HORIZONTAL_GRAVITY_MASK) {
                case Gravity.CENTER_HORIZONTAL:
                    childLeft = parentLeft + (parentRight - parentLeft - width) / 2 +
                    lp.leftMargin - lp.rightMargin;
                    break;
                case Gravity.RIGHT:
                    if (!forceLeftGravity) {
                        childLeft = parentRight - width - lp.rightMargin;
                        break;
                    }
                case Gravity.LEFT:
                default:
                    childLeft = parentLeft + lp.leftMargin;
            }

            switch (verticalGravity) {
                case Gravity.TOP:
                    childTop = parentTop + lp.topMargin;
                    break;
                case Gravity.CENTER_VERTICAL:
                    childTop = parentTop + (parentBottom - parentTop - height) / 2 +
                    lp.topMargin - lp.bottomMargin;
                    break;
                case Gravity.BOTTOM:
                    childTop = parentBottom - height - lp.bottomMargin;
                    break;
                default:
                    childTop = parentTop + lp.topMargin;
            }

            child.layout(childLeft, childTop, childLeft + width, childTop + height);
        }
    }
}

吶，總之就是會遍歷出子元素，然後呼叫子元素的layout方法，然後在子元素的layout方法中又會呼叫setFrame方法來確定其在父容器中的位置。如此反覆完成檢視樹的佈局過程。

以上就是layout過程。

draw過程

在performDraw方法中，會呼叫draw方法的過載，之後會轉到draw(Canvas canvas)方法，如下：

public void draw(Canvas canvas) {
    final int privateFlags = mPrivateFlags;
    final boolean dirtyOpaque = (privateFlags & PFLAG_DIRTY_MASK) == PFLAG_DIRTY_OPAQUE &&
            (mAttachInfo == null || !mAttachInfo.mIgnoreDirtyState);
    mPrivateFlags = (privateFlags & ~PFLAG_DIRTY_MASK) | PFLAG_DRAWN;

    /*
     * Draw traversal performs several drawing steps which must be executed
     * in the appropriate order:
     *
     *      1. Draw the background
     *      2. If necessary, save the canvas' layers to prepare for fading
     *      3. Draw view's content
     *      4. Draw children
     *      5. If necessary, draw the fading edges and restore layers
     *      6. Draw decorations (scrollbars for instance)
     */

    // Step 1, draw the background, if needed
    int saveCount;

    if (!dirtyOpaque) {
        drawBackground(canvas);
    }

    // skip step 2 & 5 if possible (common case)
    final int viewFlags = mViewFlags;
    boolean horizontalEdges = (viewFlags & FADING_EDGE_HORIZONTAL) != 0;
    boolean verticalEdges = (viewFlags & FADING_EDGE_VERTICAL) != 0;
    if (!verticalEdges && !horizontalEdges) {
        // Step 3, draw the content
        if (!dirtyOpaque) onDraw(canvas);

        // Step 4, draw the children
        dispatchDraw(canvas);

        // Overlay is part of the content and draws beneath Foreground
        if (mOverlay != null && !mOverlay.isEmpty()) {
            mOverlay.getOverlayView().dispatchDraw(canvas);
        }

        // Step 6, draw decorations (foreground, scrollbars)
        onDrawForeground(canvas);

        // we're done...
        return;
    }

    //程式碼省略

}

我們關注1，3，4，6步。
第一步： drawBackground(canvas) 繪製背景
第三步： onDraw(canvas) 繪製自己，具體如何繪製？需要由子類具體實現，可以閱讀下TextView的onDraw方法原始碼
第四步： dispatchDraw(canvas) 繪製子元素，既然是繪製子元素的話，那麼ViewGroup實現了這個方法，來探探ViewGroup的dispatchDraw方法，如下：

protected void dispatchDraw(Canvas canvas) {

    //程式碼省略

    for (int i = 0; i < childrenCount; i++) {
        while (transientIndex >= 0 && mTransientIndices.get(transientIndex) == i) {
            final View transientChild = mTransientViews.get(transientIndex);
            if ((transientChild.mViewFlags & VISIBILITY_MASK) == VISIBLE ||
                    transientChild.getAnimation() != null) {
                more |= drawChild(canvas, transientChild, drawingTime);
            }
            transientIndex++;
            if (transientIndex >= transientCount) {
                transientIndex = -1;
            }
        }

        final int childIndex = getAndVerifyPreorderedIndex(childrenCount, i, customOrder);
        final View child = getAndVerifyPreorderedView(preorderedList, children, childIndex);
        if ((child.mViewFlags & VISIBILITY_MASK) == VISIBLE || child.getAnimation() != null) {
            more |= drawChild(canvas, child, drawingTime);
        }
    }

    //程式碼省略
}

在dispatchDraw方法中會遍歷子元素，轉到drawChild方法，在drawChild方法中又會呼叫View的draw方法來完成子元素的繪製過程，如此迴圈完成整個檢視樹的繪製。
第六步：onDrawForeground(canvas) 繪製前景，ScroolBars。

以上就是draw過程。

至此，View的繪製流程已經全部分析完了。