Osheep

时光不回头,当下最重要。

Android视图加载流程(5)之View的详细绘制流程Layout

《Android视图加载流程(5)之View的详细绘制流程Layout》

流程图

Android视图加载流程(4)之View的详细绘制流程Measure

上一篇文章我们对View的测量(Measure)进行讲解了。接着我们开始聊布局(Layout),以下是我们熟悉的performTraversals方法。

private void performTraversals() {
......
mView.measure(childWidthMeasureSpec, childHeightMeasureSpec);
......
//本文重点
mView.layout(0, 0, mView.getMeasuredWidth(), mView.getMeasuredHeight());
......
mView.draw(canvas);
......
} 

可以看见layout方法接收了4个参数,分别表示左、上、右、下。从上可以看出mView(DecorView)的左上都为0,右为width,下为height。

理解图 本文重点Layout

《Android视图加载流程(5)之View的详细绘制流程Layout》

源码解读

Step1 ViewGroup

mView即DecorView(FrameLayout)是ViewGroup的子类,我们来看下ViewGroup的layout方法。

@Override
public final void layout(int l, int t, int r, int b) {
    ......
    super.layout(l, t, r, b);
    ......
}

ViewGroup的layout实际调用了父类(View)的layout方法。且layout由final修饰,所以ViewGroup的所有子类都不能重写改方法。

Step2 View

public void layout(int l, int t, int r, int b) {
    ......
    //实质都是调用setFrame方法把参数分别赋值给mLeft、mTop、mRight和mBottom这几个变量
    //判断View的位置是否发生过变化,以确定有没有必要对当前的View进行重新layout
    boolean changed = isLayoutModeOptical(mParent) ?
            setOpticalFrame(l, t, r, b) : setFrame(l, t, r, b);
    //需要重新layout
    if (changed || (mPrivateFlags & PFLAG_LAYOUT_REQUIRED) == PFLAG_LAYOUT_REQUIRED) {
        //回调onLayout
        onLayout(changed, l, t, r, b);
        ......
    }
    ......
}
//空方法
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
}

layout完成后,随即调动用onLayout。这里与measure类似。View的onlayout是一个空方法。

Step3 ViewGroup

@Override
protected abstract void onLayout(boolean changed,
        int l, int t, int r, int b);

ViewGrpup的onLayout为抽象方法,也就意味着所有ViewGroup的子类都得实现onLayout方法。重写onLayout的目的就是安排其children在父View的具体位置。重写onLayout通常做法就是写一个for循环调用每一个子视图的layout(l,t,r,b)方法,通过传入不同的数据来排列所有的子视图。(这里可以参考onMeasure)

Step4 FrameLayout

我们以DecorView(FrameLayout)为例子来解析一下具体的onLayout是如何实现的?

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

            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;
                //判断水平方向,给子视图的left赋值
            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;
            }
            //判断竖直方向,给子视图top赋值
            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);
        }
    }
}

从上面对DecorView(FrameLayout)的onLaout分析可看出。DecorView通过获取子视图(measure)的宽高,且通过gravity计算出子视图对应的左、上坐标,从而得出右、下左标。从而实现一个子视图的布局。

当然各种ViewGroup有各种onLayout的实现,本文这里简单讲解FrameLayout。

额外 extra

我们以前遇到getWidth()、getHeight()和getMeasureWidth()、getMeasureHeight()傻傻不能分清楚,那他们的区别是什么呢?

public final int getMeasuredWidth() {
    return mMeasuredWidth & MEASURED_SIZE_MASK;
}

public final int getMeasuredHeight() {
    return mMeasuredHeight & MEASURED_SIZE_MASK;
}

public final int getWidth() {
    return mRight - mLeft;
}

public final int getHeight() {
    return mBottom - mTop;
}

public final int getLeft() {
    return mLeft;
}

public final int getRight() {
    return mRight;
}

public final int getTop() {
    return mTop;
}

public final int getBottom() {
    return mBottom;
}

getMeasureWith(),getMeasureHeight()我们的上文已经说过了,必须在onMeasure之后才有效。而getWith()和getHeight()要在onLayout之后才有效。

为什么有时候getWidth()和getMeasuredWidth()会得到不同的值?我们简单算一下~

当一个view视图的measuredWidth为100时,而左右margin各为10,此时的left为10,right为100-10=90。with等于90-10等于80。很明显with(80)与measureWith(100)不同

总结 Summary

通过以上几个步骤的分析,布局(Layout)的流程基本与Measure类似。通过循环调用布局各个子视图

  1. View.layout可重写,ViewGroup.layout不可重写。ViewGroup.onlayout为抽象方法,子类必须实现该方法。
  2. measure操作后得到的是measureIwhth和measureheight;layout操作后得到的是坐标left,top,right,bottom,当然这些值是相对于父View来说的
  3. getWith()和getHeight()犯法必须在onLayout后调用才有值

PS:本文整理自以下文章,若有发现问题请致邮 caoyanglee92@gmail.com

工匠若水 Android应用层View绘制流程与源码分析

点赞