NestedScrollView嵌套RecyclerView实现仿京东Tab吸顶效果

概述

本文主要分享使用NestedScrollView嵌套RecyclerView实现仿京东Tab吸顶效果，先来看一下效果图：

image

实现要点

• Tab控件如何吸顶
• 如何实现嵌套滚动，即父view可以滚动的情况下子view也可以滚动
• 如何实现惯性滑动

Tab控件吸顶

先看一下布局结构：

布局中使用了LinearLayout包裹TabLayout与ViewPager2作为内容控件，那将LinearLayout的高度设置为NestedScrollView的高度即可实现TabLayout吸顶效果，本质上是NestedScrollView滑到底了，所以TabLayout自然就吸顶了，代码如下：

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        ViewGroup.LayoutParams layoutParams = mContentView.getLayoutParams();
        layoutParams.height = getMeasuredHeight();
        mContentView.setLayoutParams(layoutParams);
    }

如何实现嵌套滚动

嵌套滚动的两个角色：NestedScrollingParent3与NestedScrollingChild3，由NestedScrollingChild3触发嵌套滚动事件，这里采用NestedScrollView嵌套RecyclerView的实现方法，而NestedScrollView与RecyclerView分别实现了NestedScrollingParent3与NestedScrollingChild3
但需要注意，当使用NestedScrollView嵌套RecyclerView并将内容控件的高度设置为NestedScrollView的高度后，会出现一个奇怪的现象如下：

可以发现，在滑动RecyclerView时并没有先让NestedScrollView滚动到顶部后，然后RecyclerView在滑动，那是什么原因造成的呢？先来看一下嵌套滚动的大致流程图：

图片 1.png

从流程图可以发现，在NestedScrollingChild滚动前会调用dispatchNestedPreScroll方法询问NestedScrollingParent是否要先滚动，而NestedScrollingParent会调用自身的onNestedPreScroll方法处理事件，那追踪NestedScrollView的onNestedPreScroll方法：

    @Override
    public void onNestedPreScroll(@NonNull View target, int dx, int dy, @NonNull int[] consumed,
            int type) {
        dispatchNestedPreScroll(dx, dy, consumed, null, type);
    }
    
    @Override
    public boolean dispatchNestedPreScroll(int dx, int dy, int[] consumed, int[] offsetInWindow,
            int type) {
        return mChildHelper.dispatchNestedPreScroll(dx, dy, consumed, offsetInWindow, type);
    }
    //该方法属于NestedScrollingChildHelper
    public boolean dispatchNestedPreScroll(int dx, int dy, @Nullable int[] consumed,
            @Nullable int[] offsetInWindow, @NestedScrollType int type) {
        if (isNestedScrollingEnabled()) {
            final ViewParent parent = getNestedScrollingParentForType(type);
            if (parent == null) {
                return false;
            }

            if (dx != 0 || dy != 0) {
                int startX = 0;
                int startY = 0;
                if (offsetInWindow != null) {
                    mView.getLocationInWindow(offsetInWindow);
                    startX = offsetInWindow[0];
                    startY = offsetInWindow[1];
                }

                if (consumed == null) {
                    consumed = getTempNestedScrollConsumed();
                }
                consumed[0] = 0;
                consumed[1] = 0;
                ViewParentCompat.onNestedPreScroll(parent, mView, dx, dy, consumed, type);

                if (offsetInWindow != null) {
                    mView.getLocationInWindow(offsetInWindow);
                    offsetInWindow[0] -= startX;
                    offsetInWindow[1] -= startY;
                }
                return consumed[0] != 0 || consumed[1] != 0;
            } else if (offsetInWindow != null) {
                offsetInWindow[0] = 0;
                offsetInWindow[1] = 0;
            }
        }
        return false;
    }

由源码可知，NestedScrollView的onNestedPreScroll方法并没有处理滑动事件，而是调用了dispatchNestedPreScroll方法将事件又传递给了NestedScrollingParent了，由于NestedScrollView本身即实现了NestedScrollingParent又实现了NestedScrollingChild，所以导致无法先滚动到顶部的现象，那只需重新onNestedPreScroll方法并实现滚动到顶部的逻辑即可解决此问题，代码如下：

   @Override
    public void onNestedPreScroll(@NonNull View target, int dx, int dy, @NonNull int[] consumed, int type) {
        //super.onNestedPreScroll(target, dx, dy, consumed, type);
         boolean hideTop = dy > 0 && getScrollY() < mHeadView.getMeasuredHeight();

        if (hideTop) {
            //滚动到相应的滑动距离
            scrollBy(0, dy);
            //记录父控件消费的滚动记录，防止子控件重复滚动
            consumed[1] = dy;
        }
    }

如何实现惯性滑动

观察京东的滚动效果，可以发现，当快速滑动父控件松手后，会带动子控件惯性向上滑动，那如何实现这张效果呢？

实现思路：

• 记录父控件惯性滑动的速度
• 将惯性滑动的速度转化成距离
• 计算子控件应滑的距离 = 惯性距离 - 父控件已滑动距离
• 将子控件应滑的距离转化成速交给子控件进行惯性滑动

记录父控件惯性滑动的速度

@Override
    public void fling(int velocityY) {
        super.fling(velocityY);
        if (velocityY <= 0) {
            mVelocityY = 0;
        } else {
            mVelocityY = velocityY;
        }
    }

记录父控件惯性滑动的速度

double distance = mFlingHelper.getSplineFlingDistance(mVelocityY);

计算子控件应滑的距离 = 惯性距离 - 父控件已滑动距离

//设置滚动监听事件
setOnScrollChangeListener(new View.OnScrollChangeListener() {

    @Override
    public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
        /*
         * scrollY == 0 即还未滚动
         * scrollY == getChildAt(0).getMeasuredHeight() - v.getMeasuredHeight()即滚动到顶部了
         */
        //判断NestedScrollView是否滚动到顶部，若滚动到顶部，判断子控件是否需要继续滚动滚动
        if (scrollY == getChildAt(0).getMeasuredHeight() - v.getMeasuredHeight()) {
            dispatchChildFling();
        }
        //累计自身滚动的距离
        mConsumedY += scrollY - oldScrollY;
    }
});     

将子控件应滑的距离转化成速交给子控件进行惯性滑动

private void dispatchChildFling() {
    if (mVelocityY != 0) {
        //将惯性滑动速度转化成距离
        double distance = mFlingHelper.getSplineFlingDistance(mVelocityY);
        //计算子控件应该滑动的距离 = 惯性滑动距离 - 已滑距离
        if (distance > mConsumedY) {
            RecyclerView recyclerView = getChildRecyclerView(mContentView);
            if (recyclerView != null) {
                //将剩余滑动距离转化成速度交给子控件进行惯性滑动
                int velocityY = mFlingHelper.getVelocityByDistance(distance - mConsumedY);
                recyclerView.fling(0, velocityY);
            }
        }
    }

    mConsumedY = 0;
    mVelocityY = 0;
}

NestedScrollLayout核心类实现

public class NestedScrollLayout extends NestedScrollView {

    ViewGroup mHeadView;//顶部控件
    ViewGroup mContentView;//内容控件
    int mVelocityY;//惯性滚动速度
    FlingHelper mFlingHelper;//处理惯性滑动速度与距离的转化
    int mConsumedY;//记录自身已经滚动的距离

    public NestedScrollLayout(@NonNull Context context) {
        this(context, null);
    }

    public NestedScrollLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public NestedScrollLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mFlingHelper = new FlingHelper(getContext());
        //设置滚动监听事件
        setOnScrollChangeListener(new View.OnScrollChangeListener() {

            @Override
            public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                /*
                 * scrollY == 0 即还未滚动
                 * scrollY == getChildAt(0).getMeasuredHeight() - v.getMeasuredHeight()即滚动到顶部了
                 */
                //判断NestedScrollView是否滚动到顶部，若滚动到顶部，判断子控件是否需要继续滚动滚动
                if (scrollY == getChildAt(0).getMeasuredHeight() - v.getMeasuredHeight()) {
                    dispatchChildFling();
                }
                //累计自身滚动的距离
                mConsumedY += scrollY - oldScrollY;
            }
        });
    }

    //将惯性滑动剩余的距离分发给子控件，继续惯性滑动
    private void dispatchChildFling() {
        if (mVelocityY != 0) {
            //将惯性滑动速度转化成距离
            double distance = mFlingHelper.getSplineFlingDistance(mVelocityY);
            //计算子控件应该滑动的距离 = 惯性滑动距离 - 已滑距离
            if (distance > mConsumedY) {
                RecyclerView recyclerView = getChildRecyclerView(mContentView);
                if (recyclerView != null) {
                    //将剩余滑动距离转化成速度交给子控件进行惯性滑动
                    int velocityY = mFlingHelper.getVelocityByDistance(distance - mConsumedY);
                    recyclerView.fling(0, velocityY);
                }
            }
        }

        mConsumedY = 0;
        mVelocityY = 0;
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mHeadView = (ViewGroup) ((ViewGroup) getChildAt(0)).getChildAt(0);
        mContentView = (ViewGroup) ((ViewGroup) getChildAt(0)).getChildAt(1);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //第一个要点：顶部悬浮效果
        //解决方式：将内容布局的高度设置为NestedScrollView的高度，即滑到顶了，自然就固定在顶部了
        ViewGroup.LayoutParams layoutParams = mContentView.getLayoutParams();
        layoutParams.height = getMeasuredHeight();
        mContentView.setLayoutParams(layoutParams);
    }

    /**
     * 嵌套滑动的两个角色：NestedScrollingParent3和NestedScrollingChild3，是由NestedScrollingChild3触发嵌套滑动，由NestedScrollingParent3触发不算嵌套滑动
     * 小结：子控件触发dispatchNestedPreScroll时会先调用支持嵌套滚动父控件的onNestedPreScroll让父控件先滚动，再执行
     * 自身的dispatchNestedScroll进行滚动
     */
    @Override
    public void onNestedPreScroll(@NonNull View target, int dx, int dy, @NonNull int[] consumed, int type) {
        //super.onNestedPreScroll(target, dx, dy, consumed, type);
        /*
          第二个要点：先让NestedScrollingParent3滑动到顶部后，NestedScrollingChild3才可以滑动
          解决方法:由于NestedScrollView即实现了NestedScrollingParent3又实现了NestedScrollingChild3，
                  所以super.onNestedPreScroll(target, dx, dy, consumed, type)内部实现又会去调用父控件
                  的onNestedPreScroll方法，就会出现NestedScrollView无法滑动到顶部的想象，所以此处
                  注释掉super.onNestedPreScroll(target, dx, dy, consumed, type)，实现滑动逻辑
         */

        //向上滚动并且滚动的距离小于头部控件的高度，则此时父控件先滚动并记录消费的滚动距离
        boolean hideTop = dy > 0 && getScrollY() < mHeadView.getMeasuredHeight();

        if (hideTop) {
            //滚动到相应的滑动距离
            scrollBy(0, dy);
            //记录父控件消费的滚动记录，防止子控件重复滚动
            consumed[1] = dy;
        }
    }


    /**
     * 要点三：惯性滑动，父控件在滑动完成后，在通知子控件滑动,此时不是嵌套滚动
     * 解决方法:1.记录惯性滑动的速度
     * 2.将速度转化成距离
     * 3.计算子控件应该滑动的距离 = 惯性滑动距离 - 已滑距离
     * 4.将剩余滑动距离转化成速度交给子控件进行惯性滑动
     */
    @Override
    public void fling(int velocityY) {
        super.fling(velocityY);
        //3.1记录惯性滚动的速度
        if (velocityY <= 0) {
            mVelocityY = 0;
        } else {
            mVelocityY = velocityY;
        }
    }

    //递归获取子控件RecyclerView
    private RecyclerView getChildRecyclerView(ViewGroup viewGroup) {
        for (int i = 0; i < viewGroup.getChildCount(); i++) {
            View view = viewGroup.getChildAt(i);
            if (view instanceof RecyclerView && Objects.requireNonNull(((RecyclerView) view).getLayoutManager()).canScrollVertically()) {
                return (RecyclerView) view;
            } else if (viewGroup.getChildAt(i) instanceof ViewGroup) {
                RecyclerView childRecyclerView = getChildRecyclerView((ViewGroup) viewGroup.getChildAt(i));
                if (childRecyclerView != null && Objects.requireNonNull((childRecyclerView).getLayoutManager()).canScrollVertically()) {
                    return childRecyclerView;
                }
            }
        }
        return null;
    }
}

完整代码实现

百度链接
密码:r6mi