如何在Kotlin中实现类似WhatsApp的横向Tab滑动+纵向内容滚动？

核心思路 #

用TabLayout配合ViewPager2实现横向滚动/滑动的Tab栏，每个Tab对应的页面用RecyclerView（或NestedScrollView）承载可纵向滚动的内容，完全匹配WhatsApp的界面逻辑。

1. 布局文件实现 #

主布局（activity_main.xml）

将TabLayout和ViewPager2组合，设置TabLayout为可滚动模式：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

    <!-- 横向滚动的Tab栏 -->
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable" <!-- 关键：Tab过多时允许横向滚动 -->
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/teal_200"
        app:tabTextColor="@color/black"
        app:tabSelectedTextColor="@color/teal_700"/>

    <!-- 承载Tab内容的ViewPager2 -->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

Tab内容布局（fragment_tab_content.xml）

每个Tab对应的Fragment布局，用RecyclerView实现纵向滚动：

<?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"/>

2. Kotlin代码实现 #

第一步：创建Tab内容的Fragment

class TabContentFragment : Fragment() {

    private lateinit var recyclerView: RecyclerView
    private lateinit var adapter: ContentAdapter

    companion object {
        private const val ARG_TAB_TITLE = "tab_title"
        fun newInstance(title: String): TabContentFragment {
            val fragment = TabContentFragment()
            val args = Bundle()
            args.putString(ARG_TAB_TITLE, title)
            fragment.arguments = args
            return fragment
        }
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_tab_content, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        recyclerView = view.findViewById(R.id.recyclerView)
        initRecyclerView()
    }

    private fun initRecyclerView() {
        // 模拟纵向滚动的列表数据
        val dataList = mutableListOf<String>()
        repeat(50) { index ->
            dataList.add("${arguments?.getString(ARG_TAB_TITLE)} 条目 $index")
        }

        adapter = ContentAdapter(dataList)
        recyclerView.adapter = adapter
        // 设置纵向布局管理器，确保内容可纵向滚动
        recyclerView.layoutManager = LinearLayoutManager(requireContext(), LinearLayoutManager.VERTICAL, false)
        recyclerView.setHasFixedSize(true)
    }
}

// RecyclerView的适配器
class ContentAdapter(private val dataList: List<String>) : RecyclerView.Adapter<ContentAdapter.ViewHolder>() {

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val tvContent: TextView = itemView.findViewById(R.id.tvContent)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_content, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.tvContent.text = dataList[position]
    }

    override fun getItemCount(): Int = dataList.size
}

第二步：列表项布局（item_content.xml）

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tvContent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:textSize="16sp"/>

第三步：主Activity关联TabLayout和ViewPager2

class MainActivity : AppCompatActivity() {

    private lateinit var tabLayout: TabLayout
    private lateinit var viewPager: ViewPager2

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

        tabLayout = findViewById(R.id.tabLayout)
        viewPager = findViewById(R.id.viewPager)

        // 初始化Tab标题列表，模拟多个Tab测试横向滚动
        val tabTitles = listOf("聊天", "状态", "通话", "收藏", "设置")

        // 设置ViewPager2的适配器
        viewPager.adapter = TabPagerAdapter(this, tabTitles)

        // 关联TabLayout和ViewPager2
        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            tab.text = tabTitles[position]
        }.attach()
    }
}

// ViewPager2的适配器
class TabPagerAdapter(
    private val fragmentActivity: FragmentActivity,
    private val tabTitles: List<String>
) : FragmentStateAdapter(fragmentActivity) {

    override fun getItemCount(): Int = tabTitles.size

    override fun createFragment(position: Int): Fragment {
        return TabContentFragment.newInstance(tabTitles[position])
    }
}

3. 关键注意事项 #

• TabLayout滚动模式：必须设置app:tabMode="scrollable"，当Tab数量超过屏幕宽度时，Tab栏会自动允许横向滚动。
• ViewPager2滑动控制：默认是横向滑动，如需禁用滑动可设置viewPager.isUserInputEnabled = false。
• 纵向滚动优化：优先用RecyclerView承载大量数据，避免NestedScrollView的内存问题；若必须嵌套RecyclerView在NestedScrollView中，需开启recyclerView.isNestedScrollingEnabled = false。
• 依赖配置：确保项目引入必要依赖（通常默认已包含）：

implementation "com.google.android.material:material:1.9.0"
implementation "androidx.viewpager2:viewpager2:1.0.0"

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