View之layout过程

1. 介绍

  • View的绘制过程分为三部分:测量位置绘制

    测量View的宽和高: measure
    计算View的位置:layout
    绘制View: draw

  • 经过measure之后就进入了layout过程,measure过程可以查看这篇文章:自定义View原理篇-measure过程

  • 本篇文章主要对layout过程进行分析。

2. layout的开始

measure一样,layout也是始于ViewRootImplperformTraversals():

2.1 ViewRootImpl的performTraversals

    private void performTraversals() {

        //获得view宽高的测量规格,mWidth和mHeight表示窗口的宽高,lp.widthhe和lp.height表示DecorView根布局宽和高
        int childWidthMeasureSpec = getRootMeasureSpec(mWidth, lp.width);
        int childHeightMeasureSpec = getRootMeasureSpec(mHeight, lp.height);
        //进行测量
        performMeasure(childWidthMeasureSpec, childHeightMeasureSpec);

        //...
       //进行布局
        performLayout(lp, mWidth, mHeight);

        //...
        //进行绘制
        performDraw();
        //...
    }

进一步看看performLayout():

2.2 ViewRootImpl的performLayout

    private void performLayout(WindowManager.LayoutParams lp, int desiredWindowWidth,
            int desiredWindowHeight) {

        //...

        //调用layout
        host.layout(0, 0, host.getMeasuredWidth(), host.getMeasuredHeight());

        //...
    }

这里的host就是DecorView,如果不知道DecorView,可以自己私下找文章理解理解。
layout()方法传入的0,0,host.getMeasuredWidth,host.getMeasuredHeight就是一个View的上下左右四个位置,可以看到,DecorView都是从左上角位置(0,0)开始进行布局的,其宽高则为测量宽高。

下面重点来分析Layout过程

3.layout过程分析

layout用来计算View的位置,即确定ViewLeftTopRightBottom这四个顶点的位置。如下图所示:

View的位置坐标展示.png

同样,layout过程根据View的类型也可以分为两种情况:

  1. 计算单一View位置时,只需计算其自身即可;
  2. 计算ViewGroup位置时,需要计算ViewGroup自身的位置以及其包含的子ViewViewGroup中的位置。

我们对这两种情况分别进行分析。

3.1 单一View的layout过程

单一Viewlayout过程是从Viewlayout()方法开始:

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

        //isLayoutModeOptical(mParent);//判断该view布局模式是否有一些特殊的边界
        //有特殊边界则调用setOpticalFrame(l, t, r, b)
        //无特殊边界则调用setFrame(l, t, r, b)
        boolean changed = isLayoutModeOptical(mParent) ?
                setOpticalFrame(l, t, r, b) : setFrame(l, t, r, b);

        // 若View的大小或位置有变化
        // 会重新确定该View所有的子View在父容器的位置,通过调用onLayout()来实现。
        if (changed || (mPrivateFlags & PFLAG_LAYOUT_REQUIRED) == PFLAG_LAYOUT_REQUIRED) {
            onLayout(changed, l, t, r, b);

        // ...
    }

我们接下来分别看看setOpticalFrame()setFrame()onLayout()这三个方法。

3.1.2 View的setOpticalFrame

先来看看setOpticalFrame()

    private boolean setOpticalFrame(int left, int top, int right, int bottom) {
        Insets parentInsets = mParent instanceof View ?
                ((View) mParent).getOpticalInsets() : Insets.NONE;
        Insets childInsets = getOpticalInsets();

        //调用setFrame()
        return setFrame(
                left   + parentInsets.left - childInsets.left,
                top    + parentInsets.top  - childInsets.top,
                right  + parentInsets.left + childInsets.right,
                bottom + parentInsets.top  + childInsets.bottom);
    }

setOpticalFrame()里面最终还是会调用到setFrame()

3.1.3 View的setFrame

  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;

            //...

            //赋值,保存View的四个位置
            mLeft = left;
            mTop = top;
            mRight = right;
            mBottom = bottom;
            mRenderNode.setLeftTopRightBottom(mLeft, mTop, mRight, mBottom);

            //...
        }
        return changed;
    }

可以看到,View的四个位置就在这里给确定下来了。

3.1.4 View的onLayout

    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    }

onLayout()View中就是个空实现,由于单一的View没有子View,因此不需要确定子View的布局,所以onLayout()也无需实现。

3.1.5 单一View的layout过程流程图

所以,单一ViewLayout还是很简单的,来张流程图简单总结一下:

单一View的layout过程.png

3.2 ViewGroup的layout过程

ViewGrouplayout过程除了需要计算ViewGroup自身的位置外,还需要计算其包含的子ViewViewGroup中的位置。
计算ViewGroup自身的位置实际上跟单一View的过程是一样的,这里就不重述;唯一不同的就是单一ViewonLayout()实现为空,ViewGroup需要具体实现onLayout()方法。

onLayout()方法在ViewGroup是一个抽象方法,需要其子类去重写,因为确定子View的位置与具体的布局有关,所以ViewGroup中没有办法统一实现。

我们在这里看看LinearLayoutonLayout()实现:

3.2.1 LinearLayout的onLayout

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

LinearLayout会区分方向来进行不同的layout方法,我们主要看下竖向的layoutVertical(),横向的原理差不多这里就不看了。

3.2.2 LinearLayout的layoutVertical

    void layoutVertical(int left, int top, int right, int bottom) {
        final int paddingLeft = mPaddingLeft;

        int childTop;//记录子View的Top位置
        int childLeft;//记录子View的Left位置

        // ...

        // 子View的数量
        final int count = getVirtualChildCount();

        // ...

        for (int i = 0; i < count; i++) {//遍历子View
            final View child = getVirtualChildAt(i);
            if (child == null) {
                childTop += measureNullChild(i);
            } else if (child.getVisibility() != GONE) {

                //获取子View的测量宽 / 高值
                final int childWidth = child.getMeasuredWidth();
                final int childHeight = child.getMeasuredHeight();

                //...

                //childTop加上子View的topMargin的值
                childTop += lp.topMargin;

                //调用setChildFrame(),这里确定子View的位置
                setChildFrame(child, childLeft, childTop + getLocationOffset(child),
                        childWidth, childHeight);

                //childTop加上子View的高度、bottomMargin等值
                //因此后面的子View就顺延往下放,这符合垂直方向的LinearLayout的特性
                childTop += childHeight + lp.bottomMargin + getNextLocationOffset(child);

                //...
            }
        }
    }

layoutVertical()通过遍历子View,并调用setChildFrame()方法来确定子View的位置。

3.2.3 LinearLayout的setChildFrame

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

setChildFrame()中就是调用子Viewlayout()方法来来确定子View的位置。

3.2.4 ViewGroup的layout过程流程图

ViewGroup的layout过程.png

4. 自定义View

4.1 自定义单一view

自定义单一view一般无需重写onLayout()方法。

4.2 自定义ViewGroup

由于ViewGroup没实现onLayout(),所以自定义ViewGroup需要重写onLayout()方法。这里给个简单的模板:

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

        //遍历子View
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);

            //获取当前子View宽/高值
            int width = child.getMeasuredWidth();
            int height = child.getMeasuredHeight();

            //计算当前子View的四个位置值
            int mLeft = l + 100 * i;//具体逻辑请自行计算
            int mTop = t + 100 * i;//具体逻辑请自行计算
            int mRight = mLeft + width;//具体逻辑请自行计算
            int mBottom = mTop + height;//具体逻辑请自行计算

            //根据上面的计算结果设置子View的4个顶点
            child.layout(mLeft, mTop, mRight, mBottom);
        }
    }

5. 其他

5.1 getWidth()与getMeasuredWidth()区别,getHeight()与getMeasuredHeight()同理

  • getWidth():获得View最终的宽;
  • getMeasuredWidth():获得View测量的宽;

一般情况下,这两者获得的值是一样的,我们可以来看看他们的代码实现:

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

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

结合源码中的各种赋值过程,getWidth()的值就是测量出的宽度。

当然,我们可以通过重写layout()来修改最终的宽度,但一般这没有任何的实际意义,如:

    @Override
    public void layout(int l, int t, int r, int b) {

        // 修改传入的位置参数,这样一来,getWidth()获得的宽度就比测量出来的宽度大上100了
        super.layout(l, t, r + 100, b + 100);
    }

5.2

本篇文章只是大概的讲解一下位置的流程,还需要大家自己下去好好的理解理解

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

推荐阅读更多精彩内容