[Android] View 工作原理(二)

前言

本文大量参照《Android 开发艺术探索》及参考资料的内容整合,主要帮助自己理清 View 的工作原理。深入学习希望大家更多的关注参考资料。

上一篇文章了解了 MeasureSpec 的概念及获取,从名字上看就能了解到这是用来辅助测量过程的对象,本次文章再来完整学习 View 的工作流程。

View 的工作流程主要指 measure、layout、draw 这三个过程:

  • measure:确定 View 的测量宽/高
  • layout:确定 View 的最终宽/高和四个顶点位置
  • draw:将 View 绘制到屏幕上

measure

如果是一个原始的 View,那么通过 measure 方法就完成了其测量过程。

如果是一个 ViewGroup,那么除了完成自己的测量过程之外,还会遍历去调用所有子元素的 measure()。

View 的 measure 过程

View 的 measure 过程由其 measure 方法完成,在 measure() 中会调用 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;
}

可以看到逻辑十分简单,当 measureSpec 的模式为 AT_MOST 或 EXACTLY 时,specSize 即为 View 测量后的大小。

而当为 UNSPECIFIED,View 测量大小为 getSuggestedMinimumWidth() 的值,会根据 View 的 android:minWidth 和 background 属性获取一个值,由于这种情况一般用于系统内部,所以就不深究,源码十分简单,大家可以亲自动手一试。

另外这里可以留意到,当你的 View 的宽高设置为 wrap_content 时。该 View 的 specSize 为 parentSize,specMode 为 AT_MOST;结果根据上面代码 View 的测量宽高就是父容器的宽高,这样的结果跟 match_parent 就没有区别!

所以实际上像 TextView 这些控件,都会重写 onMeasure 方法,根据 View 的 LayoutParams 为 wrap_content 的情况设置一个宽高,通常是小于父容器的。

ViewGroup 的 measure 过程

ViewGroup 是一个继承自 View 的抽象类,它并没有重写 View 的 onMeasure 方法,而是由其抽象实现类例如 LinearLayout 来重写,因为不同的 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);
}

这里 getChildMeasureSpec 方法就十分熟悉了,根据子元素的 LayoutParams 和 父容器的 measureSpec 创建子元素的 measureSpec,然后调用子元素的 measure 方法,这样就是上一节的内容了。

如此递归完成了 View 的测量过程。

layout

layout 的作用是确定元素的位置,当 ViewGroup 调用 layout 方法确定自己的位置后,又会调用 onLayout 来确定所有子元素的位置。

View 的 layout 过程

实际上 ViewGroup.layout() 中会通过 super.layout 调用其父类,即 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 的四个顶点位置,接着调用 onLayout 方法,该方法负责父容器确定子元素的位置。所以 View 和 ViewGroup 的 onLayout 都没有进行具体的实现,因为不同的布局有不同的特性,我们下面来看一下 LinearLayout 的实现。

LinearLayout 的 onLayout 过程

直接上代码~

protected void onLayout(boolean changed, int l, int t, int r, int b) {
    if (mOrientation == VERTICAL) {
        layoutVertical(l, t, r, b);
    } else {
        layoutHorizontal(l, t, r, b);
    }
}

这个 mOrientation 很明显了,我们只看垂直方向的 layoutVertical 方法,代码比较长:

void layoutVertical(int left, int top, int right, int bottom) {
    ...

    for (int i = 0; i < count; i++) {
        final View child = getVirtualChildAt(i);
        if (child == null) {
            childTop += measureNullChild(i);
        } else if (child.getVisibility() != GONE) {
            final int childWidth = child.getMeasuredWidth();
            final int childHeight = child.getMeasuredHeight();
            
            final LinearLayout.LayoutParams lp =
                    (LinearLayout.LayoutParams) child.getLayoutParams();
            ...

            if (hasDividerBeforeChildAt(i)) {
                childTop += mDividerHeight;
            }

            childTop += lp.topMargin;
            setChildFrame(child, childLeft, childTop + getLocationOffset(child),
                    childWidth, childHeight);
            childTop += childHeight + lp.bottomMargin + getNextLocationOffset(child);

            i += getChildrenSkipCount(child, i);
        }
    }
}

去除了一些细节内容,LinearLayout 的 layoutVertical 会调用 setChildFrame 来为子元素指定对应的位置;同时变量 childTop 会不断增加,使得后面的元素位置逐渐靠下,跟我们平时使用 LinearLayout 的效果特性是符合的。

setChildFrame 方法的代码如下:

private void setChildFrame(View child, int left, int top, int width, int height) {        
    child.layout(left, top, left + width, top + height);
}

调用了子元素的 layout 方法,这样又是逐步递归调用,完成 View 的布局流程。

draw

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

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

其中逐步执行了流程图中的内容,并且在不需要时会跳过 layer 的绘制以提高效率。

在 View 中,onDraw() 和 dispatchDraw() 都为空实现,因为不同的控件会有不同的绘制方式。于是我们也意识到,自定义绘制过程需要复写 onDraw 方法来绘制自身的内容。

而 ViewGroup 对 dispatchDraw() 则进行了实现,在其中通过 drawChild() 调用了子元素的 draw 方法,又是递归完成了绘制过程。

这里涉及到动画等内容的绘制,比较复杂,与理解 View 的工作原理的关系不强,所以可能在以后学习一些简单的自定义控件时再来学习控件是通过何种方式进行绘制的。

以上便是 View 的工作流程,再次声明,大量参考学习了他人的文章内容。

希望能对大家有所帮助,感谢这些优秀文章的作者们。

参考资料

公共技术点之 View 绘制流程

Android应用层View绘制流程与源码分析

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容