如何解决垂直 RecyclerView 内的水平 ViewPager2 和 RecyclerView 的滚动问题?
How to fix Scrolling issue of horizontal ViewPager2 and RecyclerView that are inside a vertical RecyclerView?
我有一个 RecyclerView(比如,rootRecyclerView
),根据某些 API 响应,它可以有不同类型的行。我实现了其中一个是水平 ViewPager2
,另一个是水平 RecyclerView
(比如 childRecyclerView
)。
rootRecyclerView 垂直滑动,而 viewPager2 和 childRecyclerView 水平滑动。
问题:
当我在屏幕上滑动时,如果在 viewPager2
或 childRecyclerView
上滑动,则滑动必须完全水平笔直。否则,它们不会水平滚动; rootRecyclerView
进行了滑动,因此您会看到垂直移动。
因此,发生这种情况是因为您的拇指会沿 curved/circular 方向移动,从而在 X 轴和 Y 轴上产生移动,因此 rootRecyclerView 会拦截滑动,从而产生这种不愉快的用户体验。
我确实尝试过解决这个问题,比如像这样向 childRecyclerView 添加一个 OnItemTouchListener
:
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
它只解决了childRecyclerView
的问题,但我无法解决ViewPager2
的问题。
我也曾尝试使用 GestureDetector
中描述的 answer link 和其他一些代码组合,但我无法使其工作。
谁能帮帮我?
好吧,经过一些研究,我得出的结论是用 recyclerView
替换我的 ViewPager2
,这将 'behave like' 一个 viewPager :/ .
首先我用水平 recyclerView
替换了我的 viewPager2
。要使其表现得像一个 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
在那之后,你必须添加一个 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
}
// ...
}
可选:
在viewPager2中,可以通过getCurrentItem()
获取当前焦点,但由于我们已经将viewpager2替换为recyclerview,所以没有该方法。所以,我们需要实现我们自己的等效版本。如果你是 Kotlin 的人,你可以直接跳到 reference 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;
}
}
}
接下来创建一个接口 OnSnapPositionChangeListener
作为我们的监听器 :
public interface OnSnapPositionChangeListener {
void onSnapPositionChange(int position);
}
之后,创建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;
}
}
}
最后这样使用:
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);
参考文献:
我有一个 RecyclerView(比如,rootRecyclerView
),根据某些 API 响应,它可以有不同类型的行。我实现了其中一个是水平 ViewPager2
,另一个是水平 RecyclerView
(比如 childRecyclerView
)。
rootRecyclerView 垂直滑动,而 viewPager2 和 childRecyclerView 水平滑动。
问题:
当我在屏幕上滑动时,如果在 viewPager2
或 childRecyclerView
上滑动,则滑动必须完全水平笔直。否则,它们不会水平滚动; rootRecyclerView
进行了滑动,因此您会看到垂直移动。
因此,发生这种情况是因为您的拇指会沿 curved/circular 方向移动,从而在 X 轴和 Y 轴上产生移动,因此 rootRecyclerView 会拦截滑动,从而产生这种不愉快的用户体验。
我确实尝试过解决这个问题,比如像这样向 childRecyclerView 添加一个 OnItemTouchListener
:
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
它只解决了childRecyclerView
的问题,但我无法解决ViewPager2
的问题。
我也曾尝试使用 GestureDetector
中描述的 answer link 和其他一些代码组合,但我无法使其工作。
谁能帮帮我?
好吧,经过一些研究,我得出的结论是用 recyclerView
替换我的 ViewPager2
,这将 'behave like' 一个 viewPager :/ .
首先我用水平 recyclerView
替换了我的 viewPager2
。要使其表现得像一个 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
在那之后,你必须添加一个 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
}
// ...
}
可选:
在viewPager2中,可以通过getCurrentItem()
获取当前焦点,但由于我们已经将viewpager2替换为recyclerview,所以没有该方法。所以,我们需要实现我们自己的等效版本。如果你是 Kotlin 的人,你可以直接跳到 reference 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;
}
}
}
接下来创建一个接口 OnSnapPositionChangeListener
作为我们的监听器 :
public interface OnSnapPositionChangeListener {
void onSnapPositionChange(int position);
}
之后,创建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;
}
}
}
最后这样使用:
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);
参考文献: