已实现TabLayout+ViewPager，内容滚动时无法切换页面如何解决？

我太懂这种憋屈的感觉了！明明想快速切换Tab，结果因为ViewPager里的列表还在慢悠悠减速滚动，手指滑半天没反应，非得等它停下来才行。别着急，咱们来搞定这个问题，给你几个可行的方案：

方案一：自定义ViewPager，优先拦截横向滑动事件 #

这个方案最直接，通过重写ViewPager的触摸拦截逻辑，让横向滑动事件优先被ViewPager处理，不管内部控件有没有在滚动。

步骤1：创建自定义ViewPager类 #

public class CustomViewPager extends ViewPager {
    private float startTouchX;
    private float startTouchY;

    public CustomViewPager(Context context) {
        super(context);
    }

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

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 记录触摸起始点
                startTouchX = ev.getX();
                startTouchY = ev.getY();
                // 告诉父布局不要拦截当前事件，确保ViewPager能拿到触摸事件
                getParent().requestDisallowInterceptTouchEvent(true);
                break;
            case MotionEvent.ACTION_MOVE:
                float touchDx = Math.abs(ev.getX() - startTouchX);
                float touchDy = Math.abs(ev.getY() - startTouchY);
                
                // 如果横向滑动距离大于纵向，判定为切换页面的操作，拦截事件
                if (touchDx > touchDy) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                    return super.onInterceptTouchEvent(ev);
                } else {
                    // 纵向滑动，交给内部滚动控件处理
                    getParent().requestDisallowInterceptTouchEvent(false);
                }
                break;
        }
        return super.onInterceptTouchEvent(ev);
    }
}

步骤2：替换布局中的ViewPager #

把你activity_main.xml里的ViewPager换成自定义的CustomViewPager，记得替换成自己的包名：

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical">

    <com.your.package.name.CustomViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <!-- 你的TabLayout代码 -->
</LinearLayout>

方案二：给内部滚动控件添加触摸监听 #

如果不想自定义ViewPager，也可以直接给ViewPager里的滚动控件（比如RecyclerView、ScrollView）设置触摸监听，当检测到横向滑动时，把事件交还给ViewPager。

以RecyclerView为例：

RecyclerView recyclerView = findViewById(R.id.innerRecyclerView);
ViewPager viewPager = findViewById(R.id.viewPager);

recyclerView.addOnItemTouchListener(new RecyclerView.OnItemTouchListener() {
    private float startX;
    private float startY;

    @Override
    public boolean onInterceptTouchEvent(@NonNull RecyclerView rv, @NonNull MotionEvent e) {
        switch (e.getAction()) {
            case MotionEvent.ACTION_DOWN:
                startX = e.getX();
                startY = e.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                float dx = Math.abs(e.getX() - startX);
                float dy = Math.abs(e.getY() - startY);
                // 横向滑动时，让ViewPager接管事件
                if (dx > dy) {
                    viewPager.requestDisallowInterceptTouchEvent(false);
                    return false;
                } else {
                    // 纵向滑动时，保持内部控件处理事件
                    viewPager.requestDisallowInterceptTouchEvent(true);
                }
                break;
        }
        return false;
    }

    @Override
    public void onTouchEvent(@NonNull RecyclerView rv, @NonNull MotionEvent e) {}

    @Override
    public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {}
});

方案三：升级到ViewPager2（推荐） #

ViewPager2是官方推出的ViewPager升级版，内部基于RecyclerView实现，默认就处理了这种触摸冲突的问题，还支持垂直滚动、RTL布局等更多特性，适合新项目或者有升级空间的老项目。

步骤1：替换布局控件 #

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

步骤2：绑定TabLayout和ViewPager2 #

TabLayout tabLayout = findViewById(R.id.tabLayout);
ViewPager2 viewPager2 = findViewById(R.id.viewPager2);

// 设置Fragment适配器
viewPager2.setAdapter(new FragmentStateAdapter(this) {
    @NonNull
    @Override
    public Fragment createFragment(int position) {
        // 返回对应位置的Fragment
        return YourFragment.newInstance(position);
    }

    @Override
    public int getItemCount() {
        // 返回Tab数量
        return 3;
    }
});

// 绑定TabLayout和ViewPager2
new TabLayoutMediator(tabLayout, viewPager2, (tab, position) -> {
    tab.setText("Tab " + (position + 1));
}).attach();

这三个方案里，方案一快速解决问题，方案三是长远的最优选择，你可以根据自己的项目情况来选~

内容的提问来源于stack exchange，提问作者Aung