如何解决垂直 RecyclerView 内水平 ViewPager2 和 RecyclerView 的滚动问题?

Qaz*_*han 4 java android kotlin android-recyclerview android-viewpager2

我有一个 RecyclerView(例如,rootRecyclerView),它可以根据某些 API 响应具有不同类型的行。我实现了其中一个是水平的ViewPager2,另一个是水平实现的 RecyclerView(例如,childRecyclerView)。

rootRecyclerView 垂直滑动,而 viewPager2 和 childRecyclerView 水平滑动。

问题:

当我在屏幕上滑动时,如果滑动是在 或 上viewPager2childRecyclerView则滑动必须水平完全笔直。否则,它们不会水平滚动;滑动是由 进行的rootRecyclerView,因此您会看到垂直移动。

因此,发生这种情况是因为您的拇指会沿弯曲/圆形方向移动,从而在 X 轴和 Y 轴上产生移动,因此 rootRecyclerView 会拦截滑动,从而产生这种不愉快的用户体验。

我确实尝试解决这个问题,例如OnItemTouchListener向 childRecyclerView 添加一个,如下所示:

    private float Y_BUFFER = ViewConfiguration.get(getContext())
                                     .getScaledPagingTouchSlop(); // 10;
    private float preX = 0f;
    private float preY = 0f;
childRecyclerView.addOnItemTouchListener(new RecyclerView.OnItemTouchListener() {
            @Override
            public boolean onInterceptTouchEvent(@NonNull RecyclerView rv, @NonNull MotionEvent e) {
                if(e.getAction()==MotionEvent.ACTION_DOWN){
                    childRecyclerView.getParent().requestDisallowInterceptTouchEvent(true);
                }
                if(e.getAction() == MotionEvent.ACTION_MOVE){
                    if (Math.abs(e.getX() - preX) > Math.abs(e.getY() - preY)) {
                        childRecyclerView.getParent().requestDisallowInterceptTouchEvent(true);
                    } else if (Math.abs(e.getY() - preY) > Y_BUFFER) {
                        childRecyclerView.getParent().requestDisallowInterceptTouchEvent(false);
                    }
                }
                preX = e.getX();
                preY = e.getY();
                return false;
            }
// ... rest of the code
Run Code Online (Sandbox Code Playgroud)

它只解决了问题childRecyclerView,但我无法解决问题ViewPager2

我还尝试使用GestureDetector答案链接中所述的方法以及其他一些代码组合,但我无法使其工作。

有人可以帮助我吗?

Qaz*_*han 6

好吧,经过一番研究,我得出的结论是ViewPager2用 a 来代替 my recyclerView,它的行为将“像” viewPager :/ 。

首先我viewPager2用水平替换了我的recyclerView。要使其表现得像 viewpager,请使用SnapHelper.

RecyclerView childRecyclerView2 = findViewById(R.id.previously_viewPager);
// other init like setup layout manager, adapter etc 
SnapHelper snapHelper = new PagerSnapHelper();
snapHelper.attachToRecyclerView(replacedRecyclerView); // <-- this makes out rv behave like a viewPager
Run Code Online (Sandbox Code Playgroud)

之后,您必须添加OnItemTouchListener并覆盖,onInterceptTouchEvent就像我的问题中的代码段一样:

childRecyclerView2.addOnItemTouchListener(new RecyclerView.OnItemTouchListener() {
            @Override
            public boolean onInterceptTouchEvent(@NonNull RecyclerView rv, @NonNull MotionEvent e) {
// same as the code segment in the question, 
//so skipping this part. 
//just copy it from my question
          }
// ...
}
Run Code Online (Sandbox Code Playgroud)

选修的:

在viewPager2中,你可以通过 获取当前焦点getCurrentItem(),但是由于我们已经用recyclerview替换了viewpager2,所以我们没有这个方法。因此,我们需要实现我们自己的等效版本。如果你是 Kotlin 爱好者,可以直接跳到参考文献 2并跳过这一部分。如果您需要的话,这里是 java 版本,不过我会跳过解释。创造SnapHelperExt.java

public class SnapHelperExt {

    public SnapHelperExt(){}

    public int getSnapPosition(RecyclerView recyclerView, SnapHelper snapHelper){
        RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
        View snapView =  snapHelper.findSnapView(layoutManager);
        if (snapView != null) {
            return layoutManager.getPosition(snapView);
        }else{
            return -1;
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

接下来创建一个接口OnSnapPositionChangeListener作为我们的监听器:

public interface OnSnapPositionChangeListener {
    void onSnapPositionChange(int position);
}
Run Code Online (Sandbox Code Playgroud)

之后,创建SnapOnScrollListener.java

public class SnapOnScrollListener extends RecyclerView.OnScrollListener {

    public enum Behavior {
        NOTIFY_ON_SCROLL,
        NOTIFY_ON_SCROLL_STATE_IDLE
    }

    private SnapHelperExt snapHelperExt;
    private SnapHelper snapHelper;
    private Behavior behavior;
    private OnSnapPositionChangeListener onSnapPositionChangeListener;
    private int snapPosition = RecyclerView.NO_POSITION;


    public SnapOnScrollListener(SnapHelper snapHelper, Behavior behavior, OnSnapPositionChangeListener onSnapPositionChangeListener){
        this.snapHelper = snapHelper;
        this.behavior = behavior;
        this.onSnapPositionChangeListener = onSnapPositionChangeListener;
        this.snapHelperExt = new SnapHelperExt();
    }

    @Override
    public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        if (behavior == Behavior.NOTIFY_ON_SCROLL) {
            maybeNotifySnapPositionChange(recyclerView);
        }
    }

    @Override
    public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);
        if (behavior == Behavior.NOTIFY_ON_SCROLL_STATE_IDLE
                && newState == RecyclerView.SCROLL_STATE_IDLE) {
            maybeNotifySnapPositionChange(recyclerView);
        }
    }

    private void maybeNotifySnapPositionChange(RecyclerView recyclerView){
        int prevPosition = this.snapHelperExt.getSnapPosition(recyclerView, snapHelper);
        boolean snapPositionIsChanged = (this.snapPosition!=prevPosition);

        if(snapPositionIsChanged){
            onSnapPositionChangeListener.onSnapPositionChange(prevPosition);
            this.snapPosition = prevPosition;
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

最后,这样使用:

            SnapOnScrollListener snapOnScrollListener = new SnapOnScrollListener(
                    snapHelper,
                    SnapOnScrollListener.Behavior.NOTIFY_ON_SCROLL,
                    position -> {   
Log.e(TAG, "currently focused page no = "+position);    
// your code here, do whatever you want
}
            );

            childRecyclerView2.addOnScrollListener(snapOnScrollListener);
Run Code Online (Sandbox Code Playgroud)

参考:

  1. 使用recyclerview创建viewpager
  2. 使用 androids-recyclerview 检测快照更改