双RecyclerView 不一样的联动方式

导读

• 问题描述
• 代码分析及修改
• 性能测试

问题描述

数据2000多条，双Recycleview联动滑动，左右各一个，滑动左边的右边也动，滑动右边左边也动；
先滑动左边的Recycleview-rcvLeft，两个列表滑动过程中（重点），去滑动右边的Recycleview-rcvRight
这时就会报错，堆内存溢出8M （StackOverflowError），同理先滑右过程中去滑左也是崩溃

首先看下下需求,设计稿如下图

image

红色部分左右滑动，蓝色部分上下滑动，所以红色部分使用了HorizontalScrollView+RecyclerView；绿色为两个RecyclerView：

实际效果

image

代码梳理

网上方式
mLeftScrollListener = new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
        
            }

            @Override
            public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                if (recyclerView.getScrollState() != RecyclerView.SCROLL_STATE_IDLE) {
                    rcvRight.scrollBy(dx, dy);
                }
            }
        };
        rcvLeft.addOnScrollListener(mLeftScrollListener);

        mRightScrollListener = new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
              
            }

            @Override
            public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                if (recyclerView.getScrollState() != RecyclerView.SCROLL_STATE_IDLE) {
            
                    rcvLeft.scrollBy(dx, dy);//报StackOverflowError
                }
            }
        };
        rcvRight.addOnScrollListener(mRightScrollListener);

网上上下联动都是这套代码，可能数据量比较小，滑动时都没发现StackOverflowError这个异常；
解决办法：在滑动rcvLeft时让rcvRight的父布局去拦截rcvRight的触摸事件，在滑动rcvRight时让rcvLeft的父布局去拦截rcvLeft的触摸事件；
所以重写了右边的HorizontalScrollView和左边父布局RelativeLayout；

TouchHorizontalScrollView.java:
public class TouchHorizontalScrollView extends HorizontalScrollView {
    public TouchHorizontalScrollView(Context context) {
        super(context);
    }

    public TouchHorizontalScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public TouchHorizontalScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if (intercept) {
            return true;
        }
        return super.onInterceptTouchEvent(ev);
    }

    /**
     * 是否拦截子View
     */
    private boolean intercept=false;

    public boolean isIntercept() {
        return intercept;
    }

    public void setIntercept(boolean intercept) {
        this.intercept = intercept;
    }

TouchRelativeLayout.java :
public class TouchRelativeLayout extends RelativeLayout {
    public TouchRelativeLayout(Context context) {
        super(context);
    }

    public TouchRelativeLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public TouchRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if (intercept) {
            return true;
        }
        return super.onInterceptTouchEvent(ev);
    }

    /**
     * 是否拦截子View
     */
    private boolean intercept=false;

    public boolean isIntercept() {
        return intercept;
    }

    public void setIntercept(boolean intercept) {
        this.intercept = intercept;
    }
}

处理后代码：

mLeftScrollListener = new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                //newState 0：停止，1、2表示滑动，再滑动时去拦截右侧RecyclerView 的触摸事件
               
                horizontalScrollview.setIntercept(newState != 0);
              
            }

            @Override
            public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                if (recyclerView.getScrollState() != RecyclerView.SCROLL_STATE_IDLE) {
                    rcvRight.scrollBy(dx, dy);
                }
            }
        };
        rcvLeft.addOnScrollListener(mLeftScrollListener);

        mRightScrollListener = new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                    //newState 0：停止，1、2表示滑动，在滑动时去拦截左侧RecyclerView 的触摸事件
               
                    rl_left.setIntercept(newState != 0);
              
            }

            @Override
            public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                if (recyclerView.getScrollState() != RecyclerView.SCROLL_STATE_IDLE) {
                
                    rcvLeft.scrollBy(dx, dy);//报StackOverflowError
                }
            }
        };
        rcvRight.addOnScrollListener(mRightScrollListener);

这样处理完之后稍微有点小瑕疵：在滑动左侧后，滑动右侧是不生效的（因为触摸事件被拦截了），但是总比报StackOverflowError 崩溃强；

记得在onDestroy时移除滑动事件监听,不然在滑动时，关闭页面会报空指针

@Override
    protected void onDestroy() {
        try {
            if (rcvLeft != null) {
                rcvLeft.removeOnScrollListener(mLeftScrollListener);
            }
            if (rcvRight != null) {
                rcvRight.removeOnScrollListener(mRightScrollListener);
            }
            mLeftScrollListener=null;
            mRightScrollListener=null;
        }catch (Exception e){
           e.printStackTrace();
        }

        super.onDestroy();
    }

最后测试下这个滑动的性能,看看有没有掉帧的现象

打开https://perfdog.qq.com/,进行测试,通过windows 客户端 链接手机进行数据收集,两次之前的代码测试,一次修改的代码测试,选择好进行对比

image.png

蓝色的线是我们修复代码后的曲线
FPS

image

JANK

image