如何在Kotlin中实现双向滚动？解决TabLayout与RecyclerView滚动冲突

这个问题本质是布局层级配置错误导致的滚动事件拦截冲突，按以下步骤调整就能解决：

1. 修正Activity的主布局结构 #

核心是让TabLayout固定在顶部，ViewPager2填充其下方的剩余空间，而不是让两者都强行设置match_parent导致布局挤压。示例布局如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:tabMode="scrollable" /> <!-- 开启横向滚动的Tab模式 -->

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="0dp" <!-- 关键：用0dp配合constraint填充剩余空间 -->
        app:layout_constraintTop_toBottomOf="@id/tabLayout"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

2. 配置Fragment内的RecyclerView布局 #

每个Tab对应的Fragment中，直接让RecyclerView填充整个Fragment的空间即可，无需特殊设置：

<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

3. 代码层的正确配置 #

在Activity中关联TabLayout和ViewPager2，确保适配器正确绑定Fragment：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val viewPager = findViewById<ViewPager2>(R.id.viewPager2)
        val tabLayout = findViewById<TabLayout>(R.id.tabLayout)

        // 设置ViewPager2的适配器
        viewPager.adapter = object : FragmentStateAdapter(this) {
            override fun getItemCount() = 3 // 示例3个Tab页
            override fun createFragment(position: Int): Fragment {
                return when(position) {
                    0 -> ChatFragment()
                    1 -> StatusFragment()
                    2 -> CallsFragment()
                    else -> ChatFragment()
                }
            }
        }

        // 关联TabLayout和ViewPager2
        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            tab.text = when(position) {
                0 -> "聊天"
                1 -> "状态"
                2 -> "通话"
                else -> ""
            }
        }.attach()
    }
}

4. 特殊场景的触摸事件处理（可选） #

如果你的RecyclerView中包含横向滚动的子项（比如横向列表），可能会出现滚动冲突，此时可以自定义RecyclerView，重写触摸事件拦截逻辑：

class CustomRecyclerView(context: Context, attrs: AttributeSet?) : RecyclerView(context, attrs) {
    private var startX = 0f
    private var startY = 0f

    override fun onInterceptTouchEvent(e: MotionEvent): Boolean {
        when(e.action) {
            MotionEvent.ACTION_DOWN -> {
                startX = e.x
                startY = e.y
                parent.requestDisallowInterceptTouchEvent(true)
            }
            MotionEvent.ACTION_MOVE -> {
                val dx = e.x - startX
                val dy = e.y - startY
                // 判断滑动方向：横向滑动时交给ViewPager2处理
                if (abs(dx) > abs(dy)) {
                    parent.requestDisallowInterceptTouchEvent(false)
                } else {
                    parent.requestDisallowInterceptTouchEvent(true)
                }
            }
            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
                parent.requestDisallowInterceptTouchEvent(false)
            }
        }
        return super.onInterceptTouchEvent(e)
    }
}

替换Fragment布局中的RecyclerView为这个自定义类即可解决横向子项的滚动冲突。

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