很多使用的首页都会有一些嵌套翻滚、Tab吸顶的布局,尤其是一些生鲜类使用,例如 朴朴超市、大润发优鲜、盒马等等。

Android Tab吸顶 嵌套翻滚通用完成计划✅

在 Android 里边,翻滚吸顶方式通常能够经过 CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout + NestedScrollView 来完成,可是 AppBarLayoutBehavior fling 无法传递到 NestedScrollView,快速来回滑动偶然也会有些颤动,导致翻滚不流通。

另外关于头部是一些动态列表的,仍是更期望经过 RecyclerView 来完成,那么嵌套的方式变为:RecyclerView + ViewPager + RecyclerView,那么就需求处理好 RecyclerView 的滑动冲突问题。

假如 ViewPager 的 RecyclerView 内部还嵌套一层 ViewPager,例如一些广告Banner图,那么事情处理也会愈加复杂。本文将介绍一种通用的嵌套翻滚计划,既能够完成Tab的吸顶,又能够单纯完成的两个垂直 RecyclerView 嵌套(主要场景是:尾部的recyclerview能够完成容器级别的复用,例如往多个列表页的尾部嵌套一个相同样式的推荐商品列表,如下图所示)。

Android Tab吸顶 嵌套翻滚通用完成计划✅

代码库地址github.com/smuyyh/Nest…

目前已使用到线上,如有一些好的主张欢迎沟通沟通呀~~

中心思路:

  • 父容器滑动到底部之后,接触事情持续交给子容器滑动
  • 子容器翻滚到顶部之后,接触事情持续交给父容器滑动
  • fling 在父容器和子容器之间传递
  • Tab 在屏幕中心,切换 ViewPager 之后,假如子容器不在顶部,需求优先处理滑动

代码完成:

ParentRecyclerView

因为接触事情首要分发到父容器,所以中心的协调逻辑主要由父容器完成,子容器只需求处理 fling 传递即可。

public class ParentRecyclerView extends RecyclerView {
    private final int mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
    /**
     * fling时的加速度
     */
    private int mVelocity = 0;
    private float mLastTouchY = 0f;
    private int mLastInterceptX;
    private int mLastInterceptY;
    /**
     * 用于向子容器传递 fling 速度
     */
    private final VelocityTracker mVelocityTracker = VelocityTracker.obtain();
    private int mMaximumFlingVelocity;
    private int mMinimumFlingVelocity;
    /**
     * 子容器是否消耗了滑动事情
     */
    private boolean childConsumeTouch = false;
    /**
     * 子容器消耗的滑动间隔
     */
    private int childConsumeDistance = 0;
    public ParentRecyclerView(@NonNull Context context) {
        this(context, null);
    }
    public ParentRecyclerView(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public ParentRecyclerView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }
    private void init() {
        ViewConfiguration configuration = ViewConfiguration.get(getContext());
        mMaximumFlingVelocity = configuration.getScaledMaximumFlingVelocity();
        mMinimumFlingVelocity = configuration.getScaledMinimumFlingVelocity();
        addOnScrollListener(new OnScrollListener() {
            @Override
            public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                if (newState == SCROLL_STATE_IDLE) {
                    dispatchChildFling();
                }
            }
        });
    }
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mVelocity = 0;
                mLastTouchY = ev.getRawY();
                childConsumeTouch = false;
                childConsumeDistance = 0;
                ChildRecyclerView childRecyclerView = findNestedScrollingChildRecyclerView();
                if (isScrollToBottom() && (childRecyclerView != null && !childRecyclerView.isScrollToTop())) {
                    stopScroll();
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                childConsumeTouch = false;
                childConsumeDistance = 0;
                break;
            default:
                break;
        }
        try {
            return super.dispatchTouchEvent(ev);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }
    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        if (isChildConsumeTouch(event)) {
            // 子容器假如消费了接触事情,后续父容器就无法再阻拦事情
            // 在必要的时分,子容器需调用 requestDisallowInterceptTouchEvent(false) 来允许父容器持续阻拦事情
            return false;
        }
        // 子容器不消费接触事情,父容器按正常流程处理
        return super.onInterceptTouchEvent(event);
    }
    /**
     * 子容器是否消费接触事情
     */
    private boolean isChildConsumeTouch(MotionEvent event) {
        int x = (int) event.getRawX();
        int y = (int) event.getRawY();
        if (event.getAction() != MotionEvent.ACTION_MOVE) {
            mLastInterceptX = x;
            mLastInterceptY = y;
            return false;
        }
        int deltaX = x - mLastInterceptX;
        int deltaY = y - mLastInterceptY;
        if (Math.abs(deltaX) > Math.abs(deltaY) || Math.abs(deltaY) <= mTouchSlop) {
            return false;
        }
        return shouldChildScroll(deltaY);
    }
    /**
     * 子容器是否需求消费翻滚事情
     */
    private boolean shouldChildScroll(int deltaY) {
        ChildRecyclerView childRecyclerView = findNestedScrollingChildRecyclerView();
        if (childRecyclerView == null) {
            return false;
        }
        if (isScrollToBottom()) {
            // 父容器现已翻滚到底部 且 向下滑动 且 子容器还没翻滚到底部
            return deltaY < 0 && !childRecyclerView.isScrollToBottom();
        } else {
            // 父容器还没翻滚到底部 且 向上滑动 且 子容器现已翻滚到顶部
            return deltaY > 0 && !childRecyclerView.isScrollToTop();
        }
    }
    @Override
    public boolean onTouchEvent(MotionEvent e) {
        if (isScrollToBottom()) {
            // 假如父容器现已翻滚到底部,且向上滑动,且子容器还没翻滚到顶部,事情传递给子容器
            ChildRecyclerView childRecyclerView = findNestedScrollingChildRecyclerView();
            if (childRecyclerView != null) {
                int deltaY = (int) (mLastTouchY - e.getRawY());
                if (deltaY >= 0 || !childRecyclerView.isScrollToTop()) {
                    mVelocityTracker.addMovement(e);
                    if (e.getAction() == MotionEvent.ACTION_UP) {
                        // 传递剩下 fling 速度
                        mVelocityTracker.computeCurrentVelocity(1000, mMaximumFlingVelocity);
                        float velocityY = mVelocityTracker.getYVelocity();
                        if (Math.abs(velocityY) > mMinimumFlingVelocity) {
                            childRecyclerView.fling(0, -(int) velocityY);
                        }
                        mVelocityTracker.clear();
                    } else {
                        // 传递滑动事情
                        childRecyclerView.scrollBy(0, deltaY);
                    }
                    childConsumeDistance += deltaY;
                    mLastTouchY = e.getRawY();
                    childConsumeTouch = true;
                    return true;
                }
            }
        }
        mLastTouchY = e.getRawY();
        if (childConsumeTouch) {
            // 在同一个事情序列中,子容器消耗了部分滑动间隔,需求扣除去
            MotionEvent adjustedEvent = MotionEvent.obtain(
                    e.getDownTime(),
                    e.getEventTime(),
                    e.getAction(),
                    e.getX(),
                    e.getY() + childConsumeDistance, // 更新Y坐标
                    e.getMetaState()
            );
            boolean handled = super.onTouchEvent(adjustedEvent);
            adjustedEvent.recycle();
            return handled;
        }
        if (e.getAction() == MotionEvent.ACTION_UP || e.getAction() == MotionEvent.ACTION_CANCEL) {
            mVelocityTracker.clear();
        }
        try {
            return super.onTouchEvent(e);
        } catch (Exception ex) {
            ex.printStackTrace();
            return false;
        }
    }
    @Override
    public boolean fling(int velX, int velY) {
        boolean fling = super.fling(velX, velY);
        if (!fling || velY <= 0) {
            mVelocity = 0;
        } else {
            mVelocity = velY;
        }
        return fling;
    }
    private void dispatchChildFling() {
        // 父容器翻滚到底部后,假如还有剩下加速度,传递给子容器
        if (isScrollToBottom() && mVelocity != 0) {
            // 尽量让速度传递愈加滑润
            float mVelocity = NestedOverScroller.invokeCurrentVelocity(this);
            if (Math.abs(mVelocity) <= 2.0E-5F) {
                mVelocity = (float) this.mVelocity * 0.5F;
            } else {
                mVelocity *= 0.46F;
            }
            ChildRecyclerView childRecyclerView = findNestedScrollingChildRecyclerView();
            if (childRecyclerView != null) {
                childRecyclerView.fling(0, (int) mVelocity);
            }
        }
        mVelocity = 0;
    }
    public ChildRecyclerView findNestedScrollingChildRecyclerView() {
        if (getAdapter() instanceof INestedParentAdapter) {
            return ((INestedParentAdapter) getAdapter()).getCurrentChildRecyclerView();
        }
        return null;
    }
    public boolean isScrollToBottom() {
        return !canScrollVertically(1);
    }
    public boolean isScrollToTop() {
        return !canScrollVertically(-1);
    }
    @Override
    public void scrollToPosition(final int position) {
        if (position == 0) {
            // 父容器翻滚到顶部,从交互上来说子容器也需求翻滚到顶部
            ChildRecyclerView childRecyclerView = findNestedScrollingChildRecyclerView();
            if (childRecyclerView != null) {
                childRecyclerView.scrollToPosition(0);
            }
        }
        super.scrollToPosition(position);
    }
    @Override
    public boolean onStartNestedScroll(View child, View target, int nestedScrollAxes) {
        return target instanceof ChildRecyclerView;
    }
    @Override
    public void onNestedPreScroll(View target, int dx, int dy, int[] consumed) {
        ChildRecyclerView childRecyclerView = findNestedScrollingChildRecyclerView();
        //1、当时ParentRecyclerView没有滑动底,且dy> 0,即下滑
        boolean isParentCanScroll = dy > 0 && !isScrollToBottom();
        //2、当时ChildRecyclerView滑到顶部了,且dy < 0,即上滑
        boolean isChildCanNotScroll = dy < 0 && (childRecyclerView == null || childRecyclerView.isScrollToTop());
        if (isParentCanScroll || isChildCanNotScroll) {
            smoothScrollBy(0, dy);
            consumed[1] = dy;
        }
    }
    @Override
    public boolean onNestedFling(View target, float velocityX, float velocityY, boolean consumed) {
        return true;
    }
    @Override
    public boolean onNestedPreFling(View target, float velocityX, float velocityY) {
        ChildRecyclerView childRecyclerView = findNestedScrollingChildRecyclerView();
        // 1、当时ParentRecyclerView没有滑动底,且向下滑动,即下滑
        boolean isParentCanFling = velocityY > 0f && !isScrollToBottom();
        // 2、当时ChildRecyclerView滑到顶部了,且向上滑动,即上滑
        boolean isChildCanNotFling = velocityY < 0 && (childRecyclerView == null || childRecyclerView.isScrollToTop());
        if (!isParentCanFling && !isChildCanNotFling) {
            return false;
        }
        fling(0, (int) velocityY);
        return true;
    }
}

ChildRecyclerView

子容器主要处理 fling 传递,以及滑动到顶部时,允许父容器持续阻拦事情。

public class ChildRecyclerView extends RecyclerView {
    private ParentRecyclerView mParentRecyclerView = null;
    /**
     * fling时的加速度
     */
    private int mVelocity = 0;
    private int mLastInterceptX;
    private int mLastInterceptY;
    public ChildRecyclerView(@NonNull Context context) {
        this(context, null);
    }
    public ChildRecyclerView(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public ChildRecyclerView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }
    private void init() {
        setOverScrollMode(OVER_SCROLL_NEVER);
        addOnScrollListener(new OnScrollListener() {
            @Override
            public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                if (newState == SCROLL_STATE_IDLE) {
                    dispatchParentFling();
                }
            }
        });
    }
    private void dispatchParentFling() {
        ensureParentRecyclerView();
        // 子容器翻滚到顶部,假如还有剩下加速度,就交给父容器处理
        if (mParentRecyclerView != null && isScrollToTop() && mVelocity != 0) {
            // 尽量让速度传递愈加滑润
            float velocityY = NestedOverScroller.invokeCurrentVelocity(this);
            if (Math.abs(velocityY) <= 2.0E-5F) {
                velocityY = (float) this.mVelocity * 0.5F;
            } else {
                velocityY *= 0.65F;
            }
            mParentRecyclerView.fling(0, (int) velocityY);
            mVelocity = 0;
        }
    }
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        if (ev.getAction() == MotionEvent.ACTION_DOWN) {
            mVelocity = 0;
        }
        int x = (int) ev.getRawX();
        int y = (int) ev.getRawY();
        if (ev.getAction() != MotionEvent.ACTION_MOVE) {
            mLastInterceptX = x;
            mLastInterceptY = y;
        }
        int deltaX = x - mLastInterceptX;
        int deltaY = y - mLastInterceptY;
        if (isScrollToTop() && Math.abs(deltaX) <= Math.abs(deltaY) && getParent() != null) {
            // 子容器翻滚到顶部,持续向上滑动,此刻父容器需求持续阻拦事情。与父容器 onInterceptTouchEvent 对应
            getParent().requestDisallowInterceptTouchEvent(false);
        }
        return super.dispatchTouchEvent(ev);
    }
    @Override
    public boolean fling(int velocityX, int velocityY) {
        if (!isAttachedToWindow()) return false;
        boolean fling = super.fling(velocityX, velocityY);
        if (!fling || velocityY >= 0) {
            mVelocity = 0;
        } else {
            mVelocity = velocityY;
        }
        return fling;
    }
    public boolean isScrollToTop() {
        return !canScrollVertically(-1);
    }
    public boolean isScrollToBottom() {
        return !canScrollVertically(1);
    }
    private void ensureParentRecyclerView() {
        if (mParentRecyclerView == null) {
            ViewParent parentView = getParent();
            while (!(parentView instanceof ParentRecyclerView)) {
                parentView = parentView.getParent();
            }
            mParentRecyclerView = (ParentRecyclerView) parentView;
        }
    }
}

效果

有 Tab

Android Tab吸顶 嵌套翻滚通用完成计划✅

无 Tab,两个 RecyclerView 嵌套

Android Tab吸顶 嵌套翻滚通用完成计划✅