RecyclerView源码分析一:测量 布局 绘制

注意:本文基于25.4.0源码

RecyclerView的源码非常复杂,仅仅RecyclerView.java一个文件就有一万多行,阅读起来十分困难。不过RecyclerView作为一个View,再复杂也得遵循View的基本法:三大流程。所以我们从View绘制的三大流程入手就会轻松许多。

Measure

    @Override
    protected void onMeasure(int widthSpec, int heightSpec) {
        //LayoutManager为空
        if (mLayout == null) {
            //设置默认宽高
            defaultOnMeasure(widthSpec, heightSpec);
            return;
        }
        //默认自动测量
        if (mLayout.mAutoMeasure) {
            final int widthMode = MeasureSpec.getMode(widthSpec);
            final int heightMode = MeasureSpec.getMode(heightSpec);
            final boolean skipMeasure = widthMode == MeasureSpec.EXACTLY
                    && heightMode == MeasureSpec.EXACTLY;
            //通过LayoutManger计算宽高
            mLayout.onMeasure(mRecycler, mState, widthSpec, heightSpec);
            if (skipMeasure || mAdapter == null) {
                return;
            }
            if (mState.mLayoutStep == State.STEP_START) {
                /**
                 * 处理adpter更新
                 * 决定是否要执行动画
                 * 保存动画信息
                 * 如果有必要的话,进行预布局
                 */
                dispatchLayoutStep1();
            }
            // set dimensions in 2nd step. Pre-layout should happen with old dimensions for
            // consistency
            mLayout.setMeasureSpecs(widthSpec, heightSpec);
            mState.mIsMeasuring = true;
            //进行真正的测量和布局
            dispatchLayoutStep2();

            // now we can get the width and height from the children.
            mLayout.setMeasuredDimensionFromChildren(widthSpec, heightSpec);

            // if RecyclerView has non-exact width and height and if there is at least one child
            // which also has non-exact width & height, we have to re-measure.
            if (mLayout.shouldMeasureTwice()) {
                mLayout.setMeasureSpecs(
                        MeasureSpec.makeMeasureSpec(getMeasuredWidth(), MeasureSpec.EXACTLY),
                        MeasureSpec.makeMeasureSpec(getMeasuredHeight(), MeasureSpec.EXACTLY));
                mState.mIsMeasuring = true;
                dispatchLayoutStep2();
                // now we can get the width and height from the children.
                mLayout.setMeasuredDimensionFromChildren(widthSpec, heightSpec);
            }
        } else {
              //非自动测量
        }
    }

先进行整体描述一下measure流程

  • 如果未设置LayoutManger,设置默认宽高,结束,否则继续向下
  • 分为自动测量和非自动测量两种情况,一般情况都为自动测量,我们这里也只分析自动测量情况
  • 通过LayoutManger初步计算宽高(一般使用默认宽高计算方式),如果RecyclerView的宽高都是EXACTLY的,则测量结束,否则继续测量
  • dispatchLayoutStep1处理adpter更新,决定是否要执行动画,保存动画信息,处理预布局
  • dispatchLayoutStep2进行真正测量布局,对子view(itemView)进行measurelayout,确定子view的宽高和位置
  • 如果RecyclerView仍然有非精确的宽和高,或者这里还有至少一个Child还有非精确的宽和高,再进行一次测量

下面进行关键点梳理

设置默认宽高

mLayout就是recyclerView.setLayoutManager(layoutManager)中设置的layoutManager。当mLayoutnull的时候,使用默认测量方法,这个时候RecyclerView空白什么都不会显示

    void defaultOnMeasure(int widthSpec, int heightSpec) {
        // calling LayoutManager here is not pretty but that API is already public and it is better
        // than creating another method since this is internal.
        final int width = LayoutManager.chooseSize(widthSpec,
                getPaddingLeft() + getPaddingRight(),
                ViewCompat.getMinimumWidth(this));
        final int height = LayoutManager.chooseSize(heightSpec,
                getPaddingTop() + getPaddingBottom(),
                ViewCompat.getMinimumHeight(this));

        setMeasuredDimension(width, height);
    }

默认测量时,我们可以看到会使用LayoutManager.chooseSize()方法获取宽高

        public static int chooseSize(int spec, int desired, int min) {
            final int mode = View.MeasureSpec.getMode(spec);
            final int size = View.MeasureSpec.getSize(spec);
            switch (mode) {
                case View.MeasureSpec.EXACTLY:
                    return size;
                case View.MeasureSpec.AT_MOST:
                    return Math.min(size, Math.max(desired, min));
                case View.MeasureSpec.UNSPECIFIED:
                default:
                    return Math.max(desired, min);
            }
        }

很简单,这里不做过多介绍

自动测量

mLayout不为null的时候,会进行判断是否进行自动测量。mLayout.mAutoMeasure默认为true,表示自动测量,例如LinearLayoutManager,除非你自定义LayoutManager或者调用setAutoMeasureEnabled(false)

    public LinearLayoutManager(Context context, int orientation, boolean reverseLayout) {
        setOrientation(orientation);
        setReverseLayout(reverseLayout);
        setAutoMeasureEnabled(true);
    }
初步测量宽高

自动测量时,先调用mLayout.onMeasure,委托给mLayout进行测量。

            final int widthMode = MeasureSpec.getMode(widthSpec);
            final int heightMode = MeasureSpec.getMode(heightSpec);
            final boolean skipMeasure = widthMode == MeasureSpec.EXACTLY
                    && heightMode == MeasureSpec.EXACTLY;
            mLayout.onMeasure(mRecycler, mState, widthSpec, heightSpec);
            if (skipMeasure || mAdapter == null) {
                return;
            }
        public void onMeasure(Recycler recycler, State state, int widthSpec, int heightSpec) {
            mRecyclerView.defaultOnMeasure(widthSpec, heightSpec);
        }

onMeasure方法默认使用RecyclerView的默认测量,和上面一样。

如果RecyclerView的宽高都是固定值或者adapter为空,此时测量结束。否则调用dispatchLayoutStep1dispatchLayoutStep2继续进行测量。

下面继续看dispatchLayoutStep1dispatchLayoutStep2,其实onLayout中还有一个dispatchLayoutStep3,这三个方法共同组成了RecyclerView的绘制布局过程。

  • dispatchLayoutStep1 处理adpter更新,决定是否要执行动画,保存动画信息,如果有必要的话,进行预布局。方法结束状态置为State.STEP_LAYOUT
  • dispatchLayoutStep1 进行真正的测量和布局操作。方法结束状态置为State.STEP_ANIMATIONS
  • dispatchLayoutStep1 触发动画并进行任何必要的清理。方法结束状态重置为State.STEP_START
dispatchLayoutStep1

dispatchLayoutStep1方法主要和动画和预布局相关,这里暂时先略过,直接看dispatchLayoutStep2

dispatchLayoutStep2
    private void dispatchLayoutStep2() {
        ...
        // Step 2: Run layout
        mState.mInPreLayout = false;
        mLayout.onLayoutChildren(mRecycler, mState);
        ...
    }

我们可以看到View的测量和布局委托给mLayout进行处理,从这里可以看出RecyclerView的灵活性,只要替换不同的LayoutManger就能够实现不同的布局,相当灵活。onLayoutChildren方法默认为空,需要各个实现类去实现。
onLayoutChildren主要用来对RecyclerView的ItemView进行measurelayout,后面再进行详细介绍。

根据子View的宽高计算自身的宽高

dispatchLayoutStep2成功之后,我们已经完成对RecyclerView的子View的测量和布局,下面就可以根据子view的宽高来计算自己的宽高了。这里比较简单就不做具体介绍了,主要需要注意的是DecoratedBounds,即recyclerView.addItemDecoration(itemDecoration)中的itemDecoration所需占的空间。

二次测量

是否需要二次测量和具体LayoutManger有关,由LayoutManger来具体实现,以LinearLayoutManager举例

    @Override
    boolean shouldMeasureTwice() {
        return getHeightMode() != View.MeasureSpec.EXACTLY
                && getWidthMode() != View.MeasureSpec.EXACTLY
                && hasFlexibleChildInBothOrientations();
    }

果RecyclerView仍然有非精确的宽和高,或者这里还有至少一个Child还有非精确的宽和高,我们就需要再次测量。

LinearLayoutManager的onLayoutChildren

下面我们具体介绍一下LinearLayoutManager的onLayoutChildren实现,来看一下LinearLayoutManager是怎么对子View进行布局的。

    @Override
    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
        ...

        if (!mAnchorInfo.mValid || mPendingScrollPosition != NO_POSITION ||
                mPendingSavedState != null) {
            mAnchorInfo.reset();
            //Item布局方向
            mAnchorInfo.mLayoutFromEnd = mShouldReverseLayout ^ mStackFromEnd;
            // calculate anchor position and coordinate
            //查找锚点,锚点可以看做是布局的一个起始点,以这个点为基点,分别向上和向下进行测量布局
            updateAnchorInfoForLayout(recycler, state, mAnchorInfo);
            mAnchorInfo.mValid = true;
        }

        ...
        
        //将屏幕上显示的Item移除,并将对应viewholder暂存起来
        detachAndScrapAttachedViews(recycler);
        mLayoutState.mInfinite = resolveIsInfinite();
        mLayoutState.mIsPreLayout = state.isPreLayout();
        if (mAnchorInfo.mLayoutFromEnd) {
            //表示RecyclerView是从下往上位置为0,1,2...顺序
            // fill towards start
            updateLayoutStateToFillStart(mAnchorInfo);
            mLayoutState.mExtra = extraForStart;
            fill(recycler, mLayoutState, state, false);
            startOffset = mLayoutState.mOffset;
            final int firstElement = mLayoutState.mCurrentPosition;
            if (mLayoutState.mAvailable > 0) {
                extraForEnd += mLayoutState.mAvailable;
            }
            // fill towards end
            updateLayoutStateToFillEnd(mAnchorInfo);
            mLayoutState.mExtra = extraForEnd;
            mLayoutState.mCurrentPosition += mLayoutState.mItemDirection;
            fill(recycler, mLayoutState, state, false);
            endOffset = mLayoutState.mOffset;

            if (mLayoutState.mAvailable > 0) {
                // end could not consume all. add more items towards start
                extraForStart = mLayoutState.mAvailable;
                updateLayoutStateToFillStart(firstElement, startOffset);
                mLayoutState.mExtra = extraForStart;
                fill(recycler, mLayoutState, state, false);
                startOffset = mLayoutState.mOffset;
            }
        } else {
            //与上面布局方法类似,只是方向相反
            ...
        }

        ...
    }
  • 首先确定布局方向,updateAnchorInfoForLayout查找锚点。布局方向用来确定Item是从上往下顺序显示还是从下往上顺序显示;锚点用来确认布局起始点
  • detachAndScrapAttachedViews如果屏幕上有Item显示,则将它们全部移除,并且暂存起来
  • 以锚点坐标为起始点,从锚点处分别向上和向下布局Item。fill()方法用来做具体添加child操作,并对child进行测量和布局

Layout

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        TraceCompat.beginSection(TRACE_ON_LAYOUT_TAG);
        dispatchLayout();
        TraceCompat.endSection();
        mFirstLayoutComplete = true;
    }

Layout非常简单,主要通过dispatchLayout实现。

    void dispatchLayout() {
        ...
        mState.mIsMeasuring = false;
        if (mState.mLayoutStep == State.STEP_START) {
            //measure阶段未对children布局
            dispatchLayoutStep1();
            mLayout.setExactMeasureSpecsFrom(this);
            dispatchLayoutStep2();
        } else if (mAdapterHelper.hasUpdates() || mLayout.getWidth() != getWidth() ||
                mLayout.getHeight() != getHeight()) {
            // First 2 steps are done in onMeasure but looks like we have to run again due to
            // changed size.
            //执行过布局但size有改变
            mLayout.setExactMeasureSpecsFrom(this);
            dispatchLayoutStep2();
        } else {
            // always make sure we sync them (to ensure mode is exact)
            //执行过布局且布局未发生变化
            mLayout.setExactMeasureSpecsFrom(this);
        }
        dispatchLayoutStep3();
    }

这个方法很简单,主要保证RecyclerView必须经历三个过程--dispatchLayoutStep1、dispatchLayoutStep2、dispatchLayoutStep3。如果开启自动测量就会在measure阶段对children进行布局,如果未开启自动测量layout阶段就会对children进行布局。

  private void dispatchLayoutStep3() {
        mState.mLayoutStep = State.STEP_START;
        if (mState.mRunSimpleAnimations) {
            执行动画
            ...
        }
        清除状态和无用信息
        ...
    }

Draw

Draw流程主要处理的就是ItemDecoration的一些绘制操作,类似分割线、悬浮title之类。

   @Override
    public void draw(Canvas c) {
        super.draw(c);
        final int count = mItemDecorations.size();
        for (int i = 0; i < count; i++) {
            mItemDecorations.get(i).onDrawOver(c, this, mState);
        }
        ...
    }

是不是很熟悉,这里就是ItemDecorationonDrawOver方法,children的绘制在super.draw(c)中,可以看出onDrawOver的绘制是在最上层。

    @Override
    public void onDraw(Canvas c) {
        super.onDraw(c);

        final int count = mItemDecorations.size();
        for (int i = 0; i < count; i++) {
            mItemDecorations.get(i).onDraw(c, this, mState);
        }
    }

这里绘制的是ItemDecorationonDraw方法。

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

推荐阅读更多精彩内容