1.简介
在开发中，我们经常会遇到各种各样的View，这些View有的是系统提供的，有的是我们自定义的View，可见View在开发中的重要性，那么了解Android View的绘制流程对于我们更好地理解View的工作原理和自定义View相当有益，本文将依据Android源码（API=30）探究View的绘制流程，加深大家对其的理解和认知。
2.View绘制流程概览
应用的一个页面是由各种各样的View组合而成的，它们能够按照我们的期望呈现在屏幕上，实现我们的需求，其背后是有一套复杂的绘制流程的，主要涉及到以下三个过程：
-
measure：顾名思义，是测量的意思，在这个阶段，做的主要工作是测量出View的尺寸大小并保存。
-
layout：这是布局阶段，在这个阶段主要是根据上个测量阶段得到的View尺寸大小以及View本身的参数设置来确定View应该摆放的位置。
-
draw：这是阶段相当重要，主要执行绘制的任务，它根据测量和布局的结果，完成View的绘制，这样我们就能看到丰富多彩的界面了。
这些阶段执行的操作都比较复杂，幸运的是系统帮我们处理了很多这样的工作，并且当我们需要实现自定义View的时候，系统又给我们提供了onMeasure()、onLayout()、onDraw()方法，一般来说，我们重写这些方法，在其中加入我们自己的业务逻辑，就可以实现我们自定义View的需求了。
3.View绘制的入口
讲到View绘制的流程，就要提到ViewRootImpl类中的performTraversals()方法，这个方法中涉及到performMeasure()、performLayout()、performDraw()三个方法，其中performMeasure()方法是从ViewTree的根节点开始遍历执行测量View的工作，performLayout()方法是从ViewTree的根节点开始遍历执行View的布局工作，而performDraw()方法是从ViewTree的根节点开始遍历执行绘制View的工作，ViewTree的根节点是DecorView。performTraversals()方法内容很长，以下只是部分代码。
//ViewRootImpl
private void performTraversals() {
final View host = mView;
...
int childWidthMeasureSpec = getRootMeasureSpec(mWidth, lp.width);
int childHeightMeasureSpec = getRootMeasureSpec(mHeight, lp.height);
...
performMeasure(childWidthMeasureSpec, childHeightMeasureSpec);
...
performLayout(lp, mWidth, mHeight);
...
performDraw();
}
4.measure阶段
measure是绘制流程的第一个阶段，在这个阶段主要是通过测量来确定View的尺寸大小。
4.1 MeasureSpec介绍
- MeasureSpec封装了从父View传递到子View的布局要求，MeasureSpec由大小和模式组成，它可能有三种模式。
- UNSPECIFIED模式：父View没有对子View施加任何约束，子View可以是它想要的任何大小。
- EXACTLY模式：父View已经为子View确定了精确的尺寸，不管子View想要多大尺寸，它都要在父View给定的界限内。
- AT_MOST模式：在父View指定的大小范围内，子View可以是它想要的大小。
4.2 View测量的相关方法
-
ViewRootImpl.performMeasure()方法
private void performMeasure(int childWidthMeasureSpec, int childHeightMeasureSpec) { if (mView == null) { return; } Trace.traceBegin(Trace.TRACE_TAG_VIEW, "measure"); try { mView.measure(childWidthMeasureSpec, childHeightMeasureSpec); } finally { Trace.traceEnd(Trace.TRACE_TAG_VIEW); } }在performMeasure()中，从根布局DecorView开始遍历执行measure()操作。
-
View.measure()方法
public final void measure(int widthMeasureSpec, int heightMeasureSpec) { boolean optical = isLayoutModeOptical(this); if (optical != isLayoutModeOptical(mParent)) { Insets insets = getOpticalInsets(); int oWidth = insets.left + insets.right; int oHeight = insets.top + insets.bottom; widthMeasureSpec = MeasureSpec.adjust(widthMeasureSpec, optical ? -oWidth : oWidth); heightMeasureSpec = MeasureSpec.adjust(heightMeasureSpec, optical ? -oHeight : oHeight); } ... 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; } else { long value = mMeasureCache.valueAt(cacheIndex); // Casting a long to int drops the high 32 bits, no mask needed setMeasuredDimensionRaw((int) (value >> 32), (int) value); mPrivateFlags3 |= PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT; } ... } ... }调用这个方法是为了找出视图应该有多大，父View在宽度和高度参数中提供约束信息，其中widthMeasureSpec参数是父View强加的水平空间要求，heightMeasureSpec参数是父View强加的垂直空间要求，这是一个final方法，实际的测量工作是通过调用onMeasure()方法执行的，因此只有onMeasure()方法可以被子类重写。
-
View.onMeasure()方法
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec), getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec)); }这个方法的作用是测量视图及其内容，以确定测量的宽度和高度，这个方法被measure()方法调用，并且应该被子类重写去对它们的内容进行准确和有效的测量，当重写此方法时，必须调用setMeasuredDimension()方法去存储这个View被测量出的宽度和高度。
-
View.setMeasuredDimension()方法
protected final void setMeasuredDimension(int measuredWidth, int measuredHeight) { boolean optical = isLayoutModeOptical(this); if (optical != isLayoutModeOptical(mParent)) { Insets insets = getOpticalInsets(); int opticalWidth = insets.left + insets.right; int opticalHeight = insets.top + insets.bottom; measuredWidth += optical ? opticalWidth : -opticalWidth; measuredHeight += optical ? opticalHeight : -opticalHeight; } setMeasuredDimensionRaw(measuredWidth, measuredHeight); }setMeasuredDimension()方法必须被onMeasure()方法调用去存储被测量出的宽度和高度，在测量的时候如果setMeasuredDimension()方法执行失败将会抛出异常。
private void setMeasuredDimensionRaw(int measuredWidth, int measuredHeight) { mMeasuredWidth = measuredWidth; mMeasuredHeight = measuredHeight; mPrivateFlags |= PFLAG_MEASURED_DIMENSION_SET; }setMeasuredDimensionRaw()方法被setMeasuredDimension()方法调用来设置出被测量出的宽度和高度给View的变量mMeasuredWidth和mMeasuredHeight。
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; }参数size是这个View的默认大小，参数measureSpec是父View对子View施加的约束，通过计算的得出这个View 应该的大小，如果MeasureSpec没有施加约束则使用提供的大小，如果是MeasureSpec.AT_MOST或MeasureSpec.EXACTLY模式则会使用specSize。
protected int getSuggestedMinimumWidth() { return (mBackground == null) ? mMinWidth : max(mMinWidth, mBackground.getMinimumWidth()); }getSuggestedMinimumWidth()方法返回View应该使用的最小宽度，这个返回值是View的最小宽度和背景的最小宽度二者之中较大的那一个值。当在onMeasure()方法内被使用的时候，调用者依然应该确保返回的宽度符合父View的要求。
4.3 ViewGroup测量的相关方法
ViewGroup继承View，是一个可以包含其他子View的一个特殊的View，在执行测量工作的时候，它有几个比较重要的方法，measureChildren()、measureChild()和getChildMeasureSpec()。
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);
}
}
}
measureChildren()方法要求这个View的子View们去测量它们自己，处于GONE状态的子View不会执行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);
}
measureChild()方法要求子View去测量它自身，测量的同时需要考虑到父布局的MeasureSpec要求和它自身的padding。
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);
}
这个方法做了测量子View过程中复杂的工作，计算出MeasureSpec传递给特定的子节点，目标是根据来自MeasureSpec的信息以及子View的LayoutParams信息去得到一个最可能的结果。
4.4 DecorView的测量
DecorView继承了FrameLayout，FrameLayout又继承了ViewGroup，它重写了onMeasure()方法，并且调用了父类的onMeasure()方法,在遍历循环去测量它的子View，之后又调用了setMeasuredDimension()。
//DecorView
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
final DisplayMetrics metrics = getContext().getResources().getDisplayMetrics();
final boolean isPortrait = getResources().getConfiguration().orientation == ORIENTATION_PORTRAIT;
final int widthMode = getMode(widthMeasureSpec);
final int heightMode = getMode(heightMeasureSpec);
...
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
...
}
//FrameLayout
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int count = getChildCount();
...
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (mMeasureAllChildren || child.getVisibility() != GONE) {
measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, 0);
final LayoutParams lp = (LayoutParams) child.getLayoutParams();
maxWidth = Math.max(maxWidth,
child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin);
maxHeight = Math.max(maxHeight,
child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin);
childState = combineMeasuredStates(childState, child.getMeasuredState());
if (measureMatchParentChildren) {
if (lp.width == LayoutParams.MATCH_PARENT ||
lp.height == LayoutParams.MATCH_PARENT) {
mMatchParentChildren.add(child);
}
}
}
}
...
setMeasuredDimension(resolveSizeAndState(maxWidth, widthMeasureSpec, childState),
resolveSizeAndState(maxHeight, heightMeasureSpec,
childState << MEASURED_HEIGHT_STATE_SHIFT));
...
}
5.layout阶段
当measure阶段完成后，就会进入到layout布局阶段，根据View测量的结果和其他参数来确定View应该摆放的位置。
5.1 performLayout()方法
测量完成后，在performTraverserals()方法中，会执行performLayout()方法，开始布局过程。
private void performLayout(WindowManager.LayoutParams lp, int desiredWindowWidth,
int desiredWindowHeight) {
mScrollMayChange = true;
mInLayout = true;
final View host = mView;
if (host == null) {
return;
}
...
host.layout(0, 0, host.getMeasuredWidth(), host.getMeasuredHeight());
...
}
5.2 layout()方法
//ViewGroup
@Override
public final void layout(int l, int t, int r, int b) {
if (!mSuppressLayout && (mTransition == null || !mTransition.isChangingLayout())) {
if (mTransition != null) {
mTransition.layoutChange(this);
}
super.layout(l, t, r, b);
} else {
// record the fact that we noop'd it; request layout when transition finishes
mLayoutCalledWhileSuppressed = true;
}
}
这个是ViewGroup的layout()方法，它是一个final类型的方法，在其内部又调用了父类View的layout()方法。
//View
@SuppressWarnings({"unchecked"})
public void layout(int l, int t, int r, int b) {
...
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);
if (shouldDrawRoundScrollbar()) {
if(mRoundScrollbarRenderer == null) {
mRoundScrollbarRenderer = new RoundScrollbarRenderer(this);
}
} else {
mRoundScrollbarRenderer = null;
}
...
}
...
}
View的layout()方法作用是为它本身及其后代View分配大小和位置，派生类不应重写此方法，带有子View的派生类应该重写onLayout()方法，参数l、t、r、b指的是相对于父View的位置。
5.3 setFrame()方法
//View
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);
mPrivateFlags |= PFLAG_HAS_BOUNDS;
if (sizeChanged) {
sizeChange(newWidth, newHeight, oldWidth, oldHeight);
}
...
}
return changed;
}
在View的layout()方法内会调用setFrame()方法，其作用是给这个视图分配一个大小和位置，如果新的大小和位置与原来的不同，那么返回值为true。
5.4 onLayout()方法
//View
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
}
View的onLayout()方法是一个空方法，内部没有代码实现，带有子节点的派生类应该重写此方法，并在其每个子节点上调用layout。
//ViewGroup
@Override
protected abstract void onLayout(boolean changed,
int l, int t, int r, int b);
ViewGroup的onLayout()方法是一个抽象方法，因此直接继承ViewGroup的类需要重写此方法。
//DecorView
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
...
}
5.5 DecorView的布局
//DecorView
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if (mApplyFloatingVerticalInsets) {
offsetTopAndBottom(mFloatingInsets.top);
}
if (mApplyFloatingHorizontalInsets) {
offsetLeftAndRight(mFloatingInsets.left);
}
// If the application changed its SystemUI metrics, we might also have to adapt
// our shadow elevation.
updateElevation();
mAllowUpdateElevation = true;
if (changed
&& (mResizeMode == RESIZE_MODE_DOCKED_DIVIDER
|| mDrawLegacyNavigationBarBackground)) {
getViewRootImpl().requestInvalidateRootRenderNode();
}
}
DecorView重写了onLayout()方法，并且调用了其父类FrameLayout的onLayout()方法。
//FrameLayout
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
layoutChildren(left, top, right, bottom, false /* no force left gravity */);
}
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();
...
child.layout(childLeft, childTop, childLeft + width, childTop + height);
}
}
}
在FrameLayout的onLayout()方法中，调用了layoutChildren()方法，在此方法内开启循环，让子View调用layout()去完成布局。
6.draw阶段
当测量和布局阶段完成后，就进入了绘制阶段，在这个阶段，将View绘制到画布上。
6.1 performDraw()方法
在performTraverserals()方法中，会执行performDraw()方法，开始绘制过程。
private void performDraw() {
if (mAttachInfo.mDisplayState == Display.STATE_OFF && !mReportNextDraw) {
return;
} else if (mView == null) {
return;
}
...
boolean canUseAsync = draw(fullRedrawNeeded);
...
}
private boolean draw(boolean fullRedrawNeeded) {
Surface surface = mSurface;
if (!surface.isValid()) {
return false;
}
...
if (!drawSoftware(surface, mAttachInfo, xOffset, yOffset,
scalingRequired, dirty, surfaceInsets)) {
return false;
}
...
}
private boolean drawSoftware(Surface surface, AttachInfo attachInfo, int xoff, int yoff,
boolean scalingRequired, Rect dirty, Rect surfaceInsets) {
// Draw with software renderer.
final Canvas canvas;
...
mView.draw(canvas);
...
}
6.2 draw()方法
//View
@CallSuper
public void draw(Canvas canvas) {
final int privateFlags = mPrivateFlags;
mPrivateFlags = (privateFlags & ~PFLAG_DIRTY_MASK) | PFLAG_DRAWN;
// Step 1, draw the background, if needed
int saveCount;
drawBackground(canvas);
...
// Step 3, draw the content
onDraw(canvas);
// Step 4, draw the children
dispatchDraw(canvas);
// Step 5, draw the fade effect and restore layers
final Paint p = scrollabilityCache.paint;
final Matrix matrix = scrollabilityCache.matrix;
final Shader fade = scrollabilityCache.shader;
...
canvas.restoreToCount(saveCount);
drawAutofilledHighlight(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);
// Step 7, draw the default focus highlight
drawDefaultFocusHighlight(canvas);
if (isShowingLayoutBounds()) {
debugDrawFocus(canvas);
}
}
View的draw()方法将View和它的子View渲染到给定的画布，此方法在被调用之前需要先完成布局工作。
6.3 onDraw()方法
//View
protected void onDraw(Canvas canvas) {
}
View的onDraw()方法是一个空方法，内部没有代码实现，通过重写这个方法，可以实现我们自己的绘制。
6.4 dispatchDraw()方法
//View
protected void dispatchDraw(Canvas canvas) {
}
View的dispatchDraw()方法是一个空方法，它被draw()调用去绘制子View，在派生类的子节点View被绘制之前，它可以被派生类重写，这样派生类就获得了控制权。
//ViewGroup
@Override
protected void dispatchDraw(Canvas canvas) {
boolean usingRenderNodeProperties = canvas.isRecordingFor(mRenderNode);
final int childrenCount = mChildrenCount;
final View[] children = mChildren;
...
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);
}
}
...
}
ViewGroup的dispatchDraw()方法重写了View的dispatchDraw()方法，并在循环体内调用drawChild()方法绘制其子View。
protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
return child.draw(canvas, this, drawingTime);
}
drawChild()方法的作用是绘制ViewGroup的子View。
6.5 DecorView的绘制
//DecorView
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
if (mMenuBackground != null) {
mMenuBackground.draw(canvas);
}
}
DecorView重写了draw()方法，在其内部调用了super.draw(canvas)，因为FrameLayout和ViewGroup都没有重写draw()方法，所以super.draw(canvas)调用的其实是View的draw()方法，在执行onDraw()后，会调用dispatchDraw()方法去遍历绘制子view。
7.总结
Android View的绘制流程经历measure、layout、draw三个阶段，ViewRootImpl类中的performTraversals()方法是绘制流程开始的地方，performTraversals()方法中包含有performMeasure()、performLayout()、performDraw()三个与View绘制相关的方法，测量、布局和绘制都是从ViewTree的根节点DecorView遍历执行的，一般我们自定义View的时候，重写onMeasure()、onLayout()、onDraw()方法，在其中加入我们自己的业务逻辑去实现需求。
网友评论