处理多层ViewPage嵌套产生滑动冲突的问题
场景
在项目中我们经常会遇到一下类似的嵌套效果，ViewPager从主页可以一直右滑经过每个页面。
graph LR
A(MainActivity: BottomNavigationView + ViewPager)-->B1(主页 : TabLayout + ViewPager)
A-->B2(发现 : TabLayout + ViewPager)
A-->B3(我的 : 普通布局)
B1-->C1(tab1 : TabLayout + ViewPager)-->RecycleView1-->items1
B1-->C2(tab1 : TabLayout + ViewPager)-->RecycleView2-->items2
B1-->C3(tab1 : TabLayout + ViewPager)-->RecycleView3-->items3
B2-->D1(tab1....)
B3-->E1(内容)
效果图
image
实际开发的时候，我们往往第一时间想到嵌套以上类似布局直接实现想要的效果。但总是会出现莫名奇妙的闪退效果，抛数组越界异常，其实问题就出现在嵌套的ViewPager左右滑动时，子Viewpager划到最右一页继续滑动时，Viewpager并不会吧触摸事件交给父ViewPager响应，而此时的子ViewPager已经到了末尾一页，继续右滑调用下一页当然会抛越界异常。
解决
其实这个问题很好解决，核心思想就是重写子ViewPager的触摸监听事件，当子ViewPager在首页向左滑动或末尾页向右滑动时，触摸响应交给父ViewPager来处理。
将原本的子ViewPager改为自定义的 ChildViewPager.java
/**
* @ClassName: ChildViewPager
* @Description:
* @Author: pinguoooo
* @Date: 2020/8/12 9:49
*/
public class ChildViewPager extends ViewPager {
int startX;
int startY;
public ChildViewPager(@NonNull Context context) {
super(context);
}
public ChildViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
//页面当前位置
int currentPosition;
//总页数
int count = Objects.requireNonNull(getAdapter()).getCount();
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = (int) ev.getRawX();
//startY = (int) ev.getY();
//申请让父View 不要拦截触摸事件
getParent().requestDisallowInterceptTouchEvent(true);
break;
case MotionEvent.ACTION_MOVE:
int endX = (int) ev.getRawX();
int disX = endX - startX;
currentPosition = this.getCurrentItem();
//最后一页且往左滑，由父View拦截触摸事件
if (currentPosition == count - 1 && disX < 0) {
//申请让父View拦截触摸事件
getParent().requestDisallowInterceptTouchEvent(false);
}
//第一页且右滑，由父View拦截触摸事件
else if (currentPosition == 0 && disX > 0) {
//申请让父View拦截触摸事件
getParent().requestDisallowInterceptTouchEvent(false);
}
//其他情况，由自己拦截
else {
//申请让父View拦截触摸事件
getParent().requestDisallowInterceptTouchEvent(true);
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
getParent().requestDisallowInterceptTouchEvent(false);
break;
}
return super.dispatchTouchEvent(ev);
}
}
其实核心想法就是，子ViewPager 在需要的时候让 父Viewpager 拦截触摸事件
关键语句：
getParent().requestDisallowInterceptTouchEvent(Boolean);
使用
使用方式就按上述简单的思维导图来嵌套就OK了
最外层 activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".main.MainActivity">
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottom_nav"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#fcfcfc"
app:itemIconTint="@color/bottom_nav_color_selector"
app:itemTextColor="@color/bottom_nav_color_selector"
app:menu="@menu/nav_tab_menu"/>
</RelativeLayout>
第一层ViewPager fragement_home.xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="XXX.XXX.XXX">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="enterAlways|scroll"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="@color/colorPrimary"
app:tabMode="scrollable"/>
</com.google.android.material.appbar.AppBarLayout>
<com.liuguoping.pretty_gank.gank.view.ChildViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:focusableInTouchMode="true"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
第二层ViewPager fragment_home_tab.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="XXX.XXX.XXX">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs_child"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="@color/colorPrimary"
app:tabMode="scrollable" />
<com.liuguoping.pretty_gank.gank.view.ChildViewPager
android:id="@+id/viewpager_child"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true" />
</LinearLayout>
继续嵌套最里层的 RecycleView 所在的 Fragment fragment_home_tab_list.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.scwang.smartrefresh.layout.SmartRefreshLayout
android:id="@+id/smartRefresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.scwang.smartrefresh.layout.header.ClassicsHeader
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_gank_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp" />
<com.scwang.smartrefresh.layout.footer.ClassicsFooter
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.scwang.smartrefresh.layout.SmartRefreshLayout>
</LinearLayout>
总结
将控制 父ViewPager 触摸事件的拦截与否交给 子ViewPager 的好处是这样可以灵活处理当前的滑动触摸事件，不用担心下一层是否继续嵌套了ViewPager。
