View 是如何显示到屏幕上的
- 基于 android 29
在上一篇 View 绘制流程解析中我们知道了在 Activity 进行 onResume 后 View 显示到屏幕上前需要经过的流程，接下来这篇我们重点来看看 View 在显示前 在 ViewRootImpl 的 performTraversals 方法中调用的三大方法。
测量
首先在 View 绘制前到屏幕前的第一步，也是最复杂的一步，测量。
这里承接上一篇从 ViewRootImpl#performTraversals 中调用 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);
}
}
首先可以知道这里的 mView 就是 DecorView，那 childWidthMeasureSpec 和 childHeightMeasureSpec 又是什么呢？想了解它，我们就必须先来看看 View 中的一个重要的内部类 MeasureSpec 了。
MeasureSpec 中有几个非常重要的常量，这里我用 2 进制先写在开头，以便于后面的分析。
-
MODE_MASK：11000000000000000000000000000000
-
UNSPECIFIED：00000000000000000000000000000000
-
EXACTLY：01000000000000000000000000000000
-
AT_MOST：10000000000000000000000000000000
首先我们通过如下方法看 MeasureSpec 的数值是如何构造出来的
public static int makeMeasureSpec(int size, int mode) {
// sUseBrokenMakeMeasureSpec 其实是判断安卓版本如果是小于等于 17 时才为 true，否则为 false
if (sUseBrokenMakeMeasureSpec) {
return size + mode;
} else {
// 在安卓 17 以上时这样写其实出于安全考虑，作用和加法一致
return (size & ~MODE_MASK) | (mode & MODE_MASK);
}
}
通过个方法其实就能知道 MeasureSpec 其实通过巧妙的位运算同事包含了大小和测量模式。在一个 int 值的中的前 2 位其实就是测量模式后 30 位是大小。
下面举个例子，若传入 size = 3，mode = EXACTLY：
(size)00000000000000000000000000000111 & (~MODE_MASK)00111111111111111111111111111111
= 00000000000000000000000000000111
(mode)01000000000000000000000000000000 & (MODE_MASK)00111111111111111111111111111111
= 01000000000000000000000000000000
(size & ~MODE_MASK) | (mode & MODE_MASK)
00000000000000000000000000000111 | 01000000000000000000000000000000
= 01000000000000000000000000000111
在理解了 makeMeasureSpec 的原理后后面的两个方法也很容易理解啦。
获取测量模式：
public static int getMode(int measureSpec) {
//noinspection ResourceType
return (measureSpec & MODE_MASK);
}
获取测量的大小：
public static int getSize(int measureSpec) {
return (measureSpec & ~MODE_MASK);
}
调整测量大小：
static int adjust(int measureSpec, int delta) {
final int mode = getMode(measureSpec);
int size = getSize(measureSpec);
if (mode == UNSPECIFIED) {
// No need to adjust size for UNSPECIFIED mode.
return makeMeasureSpec(size, UNSPECIFIED);
}
size += delta;
if (size < 0) {
Log.e(VIEW_LOG_TAG, "MeasureSpec.adjust: new size would be negative! (" + size +
") spec: " + toString(measureSpec) + " delta: " + delta);
size = 0;
}
return makeMeasureSpec(size, mode);
}
在了解了 MeasureSpec 的原理后我们回到 mView.measure 方法，来看看这里的 childWidthMeasureSpec 和 childHeightMeasureSpec 是怎么得来的，因此我们回到 ViewRootImpl#performTraversals 方法中看到了这样一句。
int childWidthMeasureSpec = getRootMeasureSpec(mWidth, lp.width);
int childHeightMeasureSpec = getRootMeasureSpec(mHeight, lp.height);
这里的 mWidth 和 mHeight 分别是屏幕的宽高，lp.width 和 lp.height 分别是 DecorView 的宽高的 LayoutParams 的属性，接下来我们进入 getRootMeasureSpec 方法具体看下做了什么。
private static int getRootMeasureSpec(int windowSize, int rootDimension) {
int measureSpec;
switch (rootDimension) {
case ViewGroup.LayoutParams.MATCH_PARENT:
measureSpec = MeasureSpec.makeMeasureSpec(windowSize, MeasureSpec.EXACTLY);
break;
case ViewGroup.LayoutParams.WRAP_CONTENT:
measureSpec = MeasureSpec.makeMeasureSpec(windowSize, MeasureSpec.AT_MOST);
break;
default:
measureSpec = MeasureSpec.makeMeasureSpec(rootDimension, MeasureSpec.EXACTLY);
break;
}
return measureSpec;
}
从这里我可以知道当布局属性为 MATCH_PARENT 时，测量模式为 EXACTLY，大小为窗口大小，当布局属性为 WRAP_CONTENT 时，测量模式为 AT_MOST，大小为窗口大小，当布局属性为精确值时，测量模式为 EXACTLY，大小为 DecorView 的大小
在知道了 childWidthMeasureSpec 和 childHeightMeasureSpec 是怎么得来的后我们继续跟踪进入 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);
}
// 这里将 widthMeasureSpec 和 heightMeasureSpec 拼接成功了一个 long 作为测量缓存的 key
long key = (long) widthMeasureSpec << 32 | (long) heightMeasureSpec & 0xffffffffL;
if (mMeasureCache == null) mMeasureCache = new LongSparseLongArray(2);
// 下面这段判断了是否需要布局
final boolean forceLayout = (mPrivateFlags & PFLAG_FORCE_LAYOUT) == PFLAG_FORCE_LAYOUT;
final boolean specChanged = widthMeasureSpec != mOldWidthMeasureSpec
|| heightMeasureSpec != mOldHeightMeasureSpec;
final boolean isSpecExactly = MeasureSpec.getMode(widthMeasureSpec) == MeasureSpec.EXACTLY
&& MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.EXACTLY;
final boolean matchesSpecSize = getMeasuredWidth() == MeasureSpec.getSize(widthMeasureSpec)
&& getMeasuredHeight() == MeasureSpec.getSize(heightMeasureSpec);
final boolean needsLayout = specChanged
&& (sAlwaysRemeasureExactly || !isSpecExactly || !matchesSpecSize);
if (forceLayout || needsLayout) {
mPrivateFlags &= ~PFLAG_MEASURED_DIMENSION_SET;
resolveRtlPropertiesIfNeeded();
// 判断之前缓存的测量值有没有，或是否强制布局
int cacheIndex = forceLayout ? -1 : mMeasureCache.indexOfKey(key);
if (cacheIndex < 0 || sIgnoreMeasureCache) {
onMeasure(widthMeasureSpec, heightMeasureSpec);
mPrivateFlags3 &= ~PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
} else {
// 有的话直接取
long value = mMeasureCache.valueAt(cacheIndex);
setMeasuredDimensionRaw((int) (value >> 32), (int) value);
mPrivateFlags3 |= PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
}
if ((mPrivateFlags & PFLAG_MEASURED_DIMENSION_SET) != PFLAG_MEASURED_DIMENSION_SET) {
throw new IllegalStateException("View with id " + getId() + ": "
+ getClass().getName() + "#onMeasure() did not set the"
+ " measured dimension by calling"
+ " setMeasuredDimension()");
}
mPrivateFlags |= PFLAG_LAYOUT_REQUIRED;
}
mOldWidthMeasureSpec = widthMeasureSpec;
mOldHeightMeasureSpec = heightMeasureSpec;
// 存入宽高的 MeasureSpec
mMeasureCache.put(key, ((long) mMeasuredWidth) << 32 |
(long) mMeasuredHeight & 0xffffffffL);
}
这里有个小细节 getMeasuredHeight 和 getMeasuredWidth。
public final int getMeasuredWidth() {
return mMeasuredWidth & MEASURED_SIZE_MASK;
}
public final int getMeasuredHeight() {
return mMeasuredHeight & MEASURED_SIZE_MASK;
}
由于 MEASURED_SIZE_MASK = 0x00ffffff 这两个方法返回的宽和高只取了一个 int 的后 24 位。
在了解 View 的 measure 做了什么后，我们继续跟踪进入 onMeasure 方法。
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
}
我们发现 setMeasuredDimension 方法就是设置 View 的宽高的大小，因此我们重点看 getDefaultSize 和 getSuggestedMinimumWidth，getSuggestedMinimumHeight 这几个方法。
protected int getSuggestedMinimumWidth() {
return (mBackground == null) ? mMinWidth : max(mMinWidth, mBackground.getMinimumWidth());
}
protected int getSuggestedMinimumHeight() {
return (mBackground == null) ? mMinHeight : max(mMinHeight, mBackground.getMinimumHeight());
}
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;
}
可以看到 getSuggestedMinimumWidth，getSuggestedMinimumHeight 这两个方法就是取背景的大小和最小宽高的最大值，而 getDefaultSize 会判断若测量模式是 UNSPECIFIED 时返回的就是 getSuggestedMinimumWidth，getSuggestedMinimumHeight 的大小，而 AT_MOST 和 EXACTLY 时，返回的是实际测量的大小。
由于我们这里的 View 是 DecorView ，而 DecorView 继承自 FrameLayout，因此我们还需要进入 FrameLayout 的 onMeasure 中查看。
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int count = getChildCount();
// 宽和高任意一个不是 EXACTLY 测量模式就为 true
final boolean measureMatchParentChildren =
MeasureSpec.getMode(widthMeasureSpec) != MeasureSpec.EXACTLY ||
MeasureSpec.getMode(heightMeasureSpec) != MeasureSpec.EXACTLY;
// 先清空 MATCH_PARENT 的子组件集合
mMatchParentChildren.clear();
int maxHeight = 0;
int maxWidth = 0;
int childState = 0;
// 遍历和测量子组件的并获取最大宽高
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (mMeasureAllChildren || child.getVisibility() != GONE) {
// 测量子 View 的边界，也就是子 View 的大小
// 会先调用 getChildMeasureSpec,再调用子 View 的 measure 方法
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) {
// 这里判断宽和高有一个是 MATCH_PARENT 的就添加到 mMatchParentChildren 集合中
if (lp.width == LayoutParams.MATCH_PARENT ||
lp.height == LayoutParams.MATCH_PARENT) {
mMatchParentChildren.add(child);
}
}
}
}
// 将 padding 加到最大宽高上
maxWidth += getPaddingLeftWithForeground() + getPaddingRightWithForeground();
maxHeight += getPaddingTopWithForeground() + getPaddingBottomWithForeground();
// 背景的最小宽高和当前最大宽高，取大的
maxHeight = Math.max(maxHeight, getSuggestedMinimumHeight());
maxWidth = Math.max(maxWidth, getSuggestedMinimumWidth());
// 前景图的最小宽高和当前最大宽高，取大的
final Drawable drawable = getForeground();
if (drawable != null) {
maxHeight = Math.max(maxHeight, drawable.getMinimumHeight());
maxWidth = Math.max(maxWidth, drawable.getMinimumWidth());
}
// 先保存自己的宽高和测量值
setMeasuredDimension(resolveSizeAndState(maxWidth, widthMeasureSpec, childState),
resolveSizeAndState(maxHeight, heightMeasureSpec,
childState << MEASURED_HEIGHT_STATE_SHIFT));
count = mMatchParentChildren.size();
if (count > 1) {
// 接下来这里会再次测量 MATCH_PARENT 的子 View
for (int i = 0; i < count; i++) {
final View child = mMatchParentChildren.get(i);
final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
final int childWidthMeasureSpec;
if (lp.width == LayoutParams.MATCH_PARENT) {
final int width = Math.max(0, getMeasuredWidth()
- getPaddingLeftWithForeground() - getPaddingRightWithForeground()
- lp.leftMargin - lp.rightMargin);
childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(
width, MeasureSpec.EXACTLY);
} else {
childWidthMeasureSpec = getChildMeasureSpec(widthMeasureSpec,
getPaddingLeftWithForeground() + getPaddingRightWithForeground() +
lp.leftMargin + lp.rightMargin,
lp.width);
}
final int childHeightMeasureSpec;
if (lp.height == LayoutParams.MATCH_PARENT) {
final int height = Math.max(0, getMeasuredHeight()
- getPaddingTopWithForeground() - getPaddingBottomWithForeground()
- lp.topMargin - lp.bottomMargin);
childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(
height, MeasureSpec.EXACTLY);
} else {
childHeightMeasureSpec = getChildMeasureSpec(heightMeasureSpec,
getPaddingTopWithForeground() + getPaddingBottomWithForeground() +
lp.topMargin + lp.bottomMargin,
lp.height);
}
child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
}
}
}
通过这个方法我们知道了在 ViewGroup 的 onMeasure 中，会先遍历子 View 进行测量，以此来确定自身的大小。而测量子 View 的核心就是取出子 View 的 LayoutParams 和 ViewGroup 自身的 MeasureSpec，然后传入 getChildMeasureSpec 方法中来创建出子 View 的 MeasureSpec。
至此 View 的测量就结束了。
测量总结
-
MeasureSpec 前两位是测量模式，后 30 位是大小
-
getMeasuredWidth 和 getMeasuredHeight 方法返回的宽和高只取了一个 int 的后 24 位
-
FrameLayout 的宽和高任意一个不是 EXACTLY 测量模式，且子 View 中 MATCH_PARENT 属性有两个时，MATCH_PARENT 的子 View 会测量 2 次
-
View 的 MeasureSpec 在 ViewGroup#getChildMeasureSpec 中完成的测量，其是根据父容器的 MeasureSpec 和自己的 LayoutParams 决定的
\ 父容器的测量模式 EXACTILY 父容器的测量模式AT_MOST 父容器的测量模式UNSPECIFIED 子 view 的 LayoutParams：直接输入值 mode：EXACTILY
size：childSizemode：EXACTILY
size：childSizemode：EXACTILY
size：childSize子 view 的 LayoutParams：match_parent mode：EXACTILY
size：parentSizemdoe：AT_MOST
size：parentSizemdoe：UNSPECIFIED
size：0子 view 的 LayoutParams：wrap_content mode：AT_MOST
size：parentSizemdoe：AT_MOST
size：parentSizemdoe：UNSPECIFIED
size：0
布局
这是 View 显示到屏幕上的第二步，布局。
这里承接上一篇从 ViewRootImpl#performTraversals 中调用 performLayout 方法开始讲起。
private void performLayout(WindowManager.LayoutParams lp, int desiredWindowWidth,
int desiredWindowHeight) {
// ... ...
final View host = mView;
if (host == null) {
return;
}
// ... ...
try {
host.layout(0, 0, host.getMeasuredWidth(), host.getMeasuredHeight());
// ... ...
} finally {
Trace.traceEnd(Trace.TRACE_TAG_VIEW);
}
mInLayout = false;
}
这里我们只看重点的方法 host.layout(0, 0, host.getMeasuredWidth(), host.getMeasuredHeight())，因此我们跟踪进入 layout 方法中，在 layout 方法中有个 setFrame 方法该方法需要传入 4 个值来确定 View 的位置，也就是 left，top，right，bottom。而该方法调用完后会继续调用 onLayout 方法，若该 View 是 ViewGroup 时则需要重写该方法。这里我们来看 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 */);
}
void layoutChildren(int left, int top, int right, int bottom, boolean forceLeftGravity) {
final int count = getChildCount();
// 获取自己 padding
final int parentLeft = getPaddingLeftWithForeground();
final int parentRight = right - left - getPaddingRightWithForeground();
final int parentTop = getPaddingTopWithForeground();
final int parentBottom = bottom - top - getPaddingBottomWithForeground();
// 遍历子 View
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
// 只对可见性不为 GONE 的 View 布局
if (child.getVisibility() != GONE) {
final LayoutParams lp = (LayoutParams) child.getLayoutParams();
// 获取子 View 的宽高
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;
// 下面这段是通过自己的 padding 和子 View 的 Gravity 和 margin 来确定子 View 的位置
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;
}
// 确定完位置后通知子 View 布局
child.layout(childLeft, childTop, childLeft + width, childTop + height);
}
}
}
FrameLayout 会先获取自己的 padding，然后遍历取出子 View，判断子 View 的可见性不为 GONE 时，会通过过自己的 padding 和子 View 的 Gravity 和 margin 来确定子 View 的位置。
至此 View 的布局过程就结束了。
布局总结
- View 的布局会调用 layout 方法，而 layout 中会通过 setFrame 先确定自身的位置然后再调用 onLayout 方法
- ViewGroup 需要重写 onLayout 方法来为子 View 确定位置
绘制
这是 View 显示到屏幕上的最后一步，绘制。
这里承接上一篇从 ViewRootImpl#performTraversals 中调用 performDraw 在该方法中有会先调用 draw 方法，在 draw 方法中又会调用 drawSoftware，在 drawSoftware 中我们便能看到熟悉的 mView.draw(canvas) 啦！
public void draw(Canvas canvas) {
final int privateFlags = mPrivateFlags;
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;
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
onDraw(canvas);
// Step 4, draw the children
dispatchDraw(canvas);
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 (debugDraw()) {
debugDrawFocus(canvas);
}
// we're done...
return;
}
// ... ...
}
绘制总结
绘制有 4 步
- 绘制背景（drawBackground —> background.draw(canvas)）
- 绘制自己（onDraw）
- 绘制子 View（dispathDraw）
- 绘制装饰，如前景和滚动条（onDrawForeground）
646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
