美文网首页
Android 中 View 的绘制原理

Android 中 View 的绘制原理

作者: 零星瓢虫 | 来源:发表于2020-06-30 00:02 被阅读0次

在 Android 的知识体系中,View 扮演着很重要的角色。只有对 View 的相关机制深入理解之后,才能通过自定义 View 实现各种效果,以及处理开发中遇到的各种问题。

我们知道 View 的绘制过程有三大重要的过程,即 View 的 measure 、layout 和 draw 过程。在 Android 中 Activity Window ViewRootImpl 的关联 这篇文章中,我们知道 ViewRootImpl 类是绑定 View 和 Window 中重要的一环, 而View 的绘制过程就是从从 ViewRootImpl 中开始的:

root = new ViewRootImpl(view.getContext(), display);
root.setView(view, wparams, panelParentView);

ViewRootImpl 的 setView 方法最终会调用到 performTraversals 方法开始 View 的绘制工作。绘制的大致流程可用下图来表示。

View 绘制过程

performTraversals 方法会依次调用 performMeasure、performLayout 和 performDraw 方法。三个方法分别调用顶级 View 的 measure、layout 和 draw 方法。而在 ViewGroup 的 performMeasure 方法中会调用到 measure 方法,measure 方法调用 onMeasure 方法。在 onMeasure 方法中遍历子类的 measure 方法。
同理 layout 和 draw 方法与此类似。

我们知道 ,顶层 View 即为 DecorView ,而 DecorView 继承于 FrameLayout,所以绘制过程从 FrameLayout 开始。

在了解绘制 Measure 任务开始之前,首先介绍一下和测量紧密相关的类 MeasureSpec:

    public static class MeasureSpec {
        private static final int MODE_SHIFT = 30;
        private static final int MODE_MASK  = 0x3 << MODE_SHIFT;
        public static final int UNSPECIFIED = 0 << MODE_SHIFT;
        public static final int EXACTLY     = 1 << MODE_SHIFT;
        public static final int AT_MOST     = 2 << MODE_SHIFT;

        public static int makeMeasureSpec(int size, int mode) {
            if (sUseBrokenMakeMeasureSpec) {
                return size + mode;
            } else {
                return (size & ~MODE_MASK) | (mode & MODE_MASK);
            }
        }

        public static int getMode(int measureSpec) {
            return (measureSpec & MODE_MASK);
        }

        public static int getSize(int measureSpec) {
            return (measureSpec & ~MODE_MASK);
        }
      ......
}

MeasureSpec 封装了一个 32 位的 int 值,其中高 2 位表示 SpecMode ,低 30 位表示 SpecSize。SpecMode 指的是测量模式,SpecSize 表示测量规格的大小。 SpecMode 和 SpecSize 打包在一起构成 MeasureSpec。

SpecMode 有三类:

UNSPECIFIED

对 view没有任何限制,要多大给多大。一般用于系统内部。

EXACTLY

给出了测出 View 所需要的精确大小,这个时候子 View 的最终大小就是 SpecSize 对应的值。一般对应 LayoutParams 中的 match_parent 和具体的数值大小。

AT_MOST

指定了一个可用大小 SpecSize, View 的大小不能大于这个值,具体值需要查看对应子 View 具体的实现。对应 LayoutParams 中的 warp_content。

上面说到 MeasureSpec 和 View 的测量相关,正常情况下使用 View 都会使用 MeasureSpec,同时我们也可以给 View 设置 LayoutParams。而 View 最终的宽高测量 MeasureSpec 由自己 LayoutParams 和 父容器的 MeasureSpec 一起确定的。

接下来去查看具体的测量过程,既然绘制过程 ViewRootImpl 开始,查看 ViewRootImpl 的 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);
        }
    }

performMeasure 会调用到 View 的 measure 方法,我们知道 mView 是 DecorView,而 DecorView 继承自 FragmentLayout。而 FragmentLayout 的 measure 方法的最终实现类在 View 中:

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

        final boolean forceLayout = (mPrivateFlags & PFLAG_FORCE_LAYOUT) == PFLAG_FORCE_LAYOUT;
        final boolean isExactly = MeasureSpec.getMode(widthMeasureSpec) == MeasureSpec.EXACTLY &&
                MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.EXACTLY;
        final boolean matchingSize = isExactly &&
                getMeasuredWidth() == MeasureSpec.getSize(widthMeasureSpec) &&
                getMeasuredHeight() == MeasureSpec.getSize(heightMeasureSpec);
        if (forceLayout || !matchingSize &&
                (widthMeasureSpec != mOldWidthMeasureSpec ||
                        heightMeasureSpec != mOldHeightMeasureSpec)) {

            // 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;
            }

            // flag not set, setMeasuredDimension() was not invoked, we raise
            // an exception to warn the developer
            if ((mPrivateFlags & PFLAG_MEASURED_DIMENSION_SET) != PFLAG_MEASURED_DIMENSION_SET) {
                throw new IllegalStateException("onMeasure() did not set the"
                        + " measured dimension by calling"
                        + " setMeasuredDimension()");
            }

            mPrivateFlags |= PFLAG_LAYOUT_REQUIRED;
        }

        mOldWidthMeasureSpec = widthMeasureSpec;
        mOldHeightMeasureSpec = heightMeasureSpec;

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

这里会判断有没有设置 PFLAG_FORCE_LAYOUT ,如果没有设置并且 mMeasureCache 有缓存,会继续调用 onMeasure 方法,这里就会回到上层 FragmentLayout 中的 onMeasure 方法:

 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int count = getChildCount();

        final boolean measureMatchParentChildren =
                MeasureSpec.getMode(widthMeasureSpec) != MeasureSpec.EXACTLY ||
                MeasureSpec.getMode(heightMeasureSpec) != MeasureSpec.EXACTLY;
        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) {
                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);
                    }
                }
            }
        }
    ......

    // Account for padding too
        maxWidth += getPaddingLeftWithForeground() + getPaddingRightWithForeground();
        maxHeight += getPaddingTopWithForeground() + getPaddingBottomWithForeground();

        // Check against our minimum height and width
        maxHeight = Math.max(maxHeight, getSuggestedMinimumHeight());
        maxWidth = Math.max(maxWidth, getSuggestedMinimumWidth());

        // Check against our foreground's minimum height and width
        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));
}

onMeasure 方法会遍历子类,并调用 measureChildWithMargin 方法,而且 FragmentLayout 的测量会依赖于子类的测量宽高进行叠加并最终调用 setMeasuredDimension 方法完成自己的测量,先进行查看 measureChildWithMargin 方法:

    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);
    }

在对子元素进行 measure 测量之前,会通过 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 = 0;
                resultMode = MeasureSpec.UNSPECIFIED;
            } else if (childDimension == LayoutParams.WRAP_CONTENT) {
                // Child wants to determine its own size.... find out how
                // big it should be
                resultSize = 0;
                resultMode = MeasureSpec.UNSPECIFIED;
            }
            break;
        }
        return MeasureSpec.makeMeasureSpec(resultSize, resultMode);
    }

上述方法,主要就是根据父容器的 MeasureSpec 同时结合子 View 本身的 LayoutParams 来确定子元素的 MeasureSpec 。

针对上面的确定规则,可以用一张表进行梳理:

MeasureSpec的测量

针对 View 的 MeasureSpec 的测量,前面提到,普通 View 的 MeasureSpec 是由父容器的 MeasureSpec 和 自身的 LayoutParams 共同确定的。那么针对不同的父容器 和 View 本身不同的 LayoutParams,View 可以有多种 MeasureSpec:
1 View 的设置固定宽高的时候 ,不管父容器 MeasureSpec 是什么,View 本身 MeasureSpec 都遵从精准模式,且大小是设置的大小。
2 当 View 的宽高设置是 match_parent 的时候,如果父容器是精准模式,那么 View 也是精准模式并且大小和父容器剩余空间一样大,如果父容器是最大模式,那么 View 也是最大模式并且大小不超过父容器的最大空间。
3 当 View 设置宽高为 warp_content 的时候,不管父容器是精准模式还是最大化模式,View总是最大化模式,且大小不能超过父容器的剩余空间。

获取了View 的 MeasureSpec 数据之后,继续去调用子类 View 的 measure 方法:

继续调用子类 View 的 measure 方法,和上述 measure 方法调用一样,此时一定会再次调用到 onMeasure方法,上面因为 FragmentLayout 重写了 onMeasure 方法,所以调用到 FragmentLayout 的 onMeasure 方法,如果此时的 View 没有重写 onMeasure,则进入到 View 自己的 onMeasure 方法中:

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

setMeasuredDimension 方法会设置 View 的测量值,只需要看 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;
    }

getDefaultSize 针对 AT_MOST 和 EXACTLY 两个模式,获取到的 size 其实就是我们测量出来的大小。UNSPECIFIED 一般用内部测量。

getSuggestedMinimumWidth 方法会根据 View 是否设置背景以及设置的相关 minWidth 和 maxWidth 属性来获取最小值,如果没有进行设置就是测量值的大小。

    protected int getSuggestedMinimumWidth() {
        return (mBackground == null) ? mMinWidth : max(mMinWidth, mBackground.getMinimumWidth());
    }

到这里 View 的 measure 测量流程走完。会遍历完成所有子类的方法完成测量,并最终叠加计算完成 FragmentLayout 自己的测量,在上述流程已经提到过。

同理,接下来类似继续以 DecorView 往下调用查看 performLayout 的方法:

 private void performLayout(WindowManager.LayoutParams lp, int desiredWindowWidth,
            int desiredWindowHeight) {
       ......
        final View host = mView;
        if (DEBUG_ORIENTATION || DEBUG_LAYOUT) {
            Log.v(TAG, "Laying out " + host + " to (" +
                    host.getMeasuredWidth() + ", " + host.getMeasuredHeight() + ")");
        }

        Trace.traceBegin(Trace.TRACE_TAG_VIEW, "layout");
        try {
            host.layout(0, 0, host.getMeasuredWidth(), host.getMeasuredHeight());

           
                    if (validLayoutRequesters != null) {
                        final ArrayList<View> finalRequesters = validLayoutRequesters;
                        // Post second-pass requests to the next frame
                        getRunQueue().post(new Runnable() {
                            @Override
                            public void run() {
                                int numValidRequests = finalRequesters.size();
                                for (int i = 0; i < numValidRequests; ++i) {
                                    final View view = finalRequesters.get(i);
                                    Log.w("View", "requestLayout() improperly called by " + view +
                                            " during second layout pass: posting in next frame");
                                    view.requestLayout();
                                }
                            }
                        });
                    }
                }

            }
        } finally {
            Trace.traceEnd(Trace.TRACE_TAG_VIEW);
        }
        mInLayout = false;
    }

和 measure 方法类似,可以直接去看 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 方法对比 View 前后 layout 有没有变化,如果有变化调用到 DecorView 的 父类 FragmentLayout 中的 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();

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

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

        mForegroundBoundsChanged = true;
        
        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);
            }
        }
    }

看过 measure 测量之后这里就更好理解了,同样遍历子类,然后再去调用子类的 layout 方法,直至整 过程完成。这里的 layout 进行布局是 FragmentLayout 的方式,像 LinerLayout 和 RealativeLayout 的 onLayout 的实现方式又会不一样。具体可以自行研究。如果是自定义 View 则需根据需求来进行编写。

继续调用 draw 方法进行绘制。

有了上面的流程解析,这里就可以直接定位去看 View 中的 draw 方法:

    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);

            // Step 6, draw decorations (scrollbars)
            onDrawScrollBars(canvas);

            if (mOverlay != null && !mOverlay.isEmpty()) {
                mOverlay.getOverlayView().dispatchDraw(canvas);
            }

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

上面注释已经给了详细的解释 draw 方法的相关主要步骤:
1 绘制背景 drawBackground(canvas)。
2 绘制内容 onDraw(canvas) 。
3 绘制子类 dispatchDraw(canvas)。
4 绘制装饰 onDrawScrollBars(canvas)。

dispatchDraw 方法实现 View 的传递,遍历所有的子类进行绘制。

通过以上分析,已经完成了一个 View 的绘制过程,在实际开发中会有各式各样的需求,其本质就是根据具体的需求实现 onMeasure、onLayout、onDraw 方法从而达到不同的效果。

相关文章

网友评论

      本文标题:Android 中 View 的绘制原理

      本文链接:https://www.haomeiwen.com/subject/otgifktx.html