能否仅在屏幕局部实现TabLayout切换Fragment的布局？

完全可以实现这种局部Tab切换的需求！不管是用官方的Fragment+TabLayout组合，还是不用Fragment直接切换View的方案都能搞定，我给你整理了两种实用的实现方式，附带代码示例，你可以直接参考：

方案一：Fragment + TabLayout（官方推荐，适合复杂页面） #

这种方式适合每个Tab对应的内容比较复杂、需要独立生命周期的场景，切换时只会更新红色容器区域，完全不影响页面其他部分。

步骤1：编写布局文件 #

在页面布局里，把绿、蓝、橙Tab按钮所在的TabLayout和红色容器对应的ViewPager2放在局部区域，其他布局元素正常保留：

<!-- 整个页面的根布局 -->
<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">

    <!-- 页面其他部分，比如顶部标题栏、其他控件 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="页面其他内容，切换Tab不影响这里"
        android:padding="16dp"
        android:textSize="18sp"/>

    <!-- 局部Tab区域：绿、蓝、橙Tab按钮 -->
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"
        <!-- 自定义Tab颜色，对应绿、蓝、橙 -->
        app:tabSelectedTextColor="#00FF00"
        app:tabTextColor="#8800FF00"/>

    <!-- 红色容器：加载Fragment的区域 -->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#FF0000"/>

    <!-- 页面底部其他内容 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="底部内容，切换Tab也不影响"
        android:padding="16dp"
        android:textSize="18sp"/>
</LinearLayout>

步骤2：创建Fragment类 #

分别创建三个对应绿、蓝、橙Tab的Fragment，示例如下：

// GreenFragment示例
class GreenFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_green, container, false)
    }
}

你可以根据需求给每个Fragment编写对应的布局文件，比如fragment_green.xml、fragment_blue.xml等。

步骤3：绑定TabLayout和ViewPager2 #

在Activity中编写适配器并绑定两者：

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

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

        // 设置ViewPager2的适配器
        viewPager.adapter = object : FragmentStateAdapter(this) {
            override fun getItemCount() = 3

            override fun createFragment(position: Int): Fragment {
                return when(position) {
                    0 -> GreenFragment()
                    1 -> BlueFragment()
                    else -> OrangeFragment()
                }
            }
        }

        // 绑定TabLayout和ViewPager2，设置Tab文本
        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            tab.text = when(position) {
                0 -> "绿色Tab"
                1 -> "蓝色Tab"
                else -> "橙色Tab"
            }
        }.attach()
    }
}

方案二：非Fragment方案（直接切换View，适合简单内容） #

如果每个Tab的内容比较简单，不需要Fragment的生命周期，可以直接用FrameLayout作为容器，切换不同的子View，这种方式更轻量化。

步骤1：编写布局文件 #

红色容器用FrameLayout，里面放三个需要切换的View，默认只显示第一个；绿、蓝、橙用普通按钮实现：

<!-- 整个页面的根布局 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 页面其他部分 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="页面其他内容，切换Tab不影响这里"
        android:padding="16dp"
        android:textSize="18sp"/>

    <!-- 局部Tab按钮区域：绿、蓝、橙按钮 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/green_tab"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="绿色Tab"
            android:background="#00FF00"/>

        <Button
            android:id="@+id/blue_tab"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="蓝色Tab"
            android:background="#0000FF"/>

        <Button
            android:id="@+id/orange_tab"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="橙色Tab"
            android:background="#FFA500"/>
    </LinearLayout>

    <!-- 红色容器：切换View的区域 -->
    <FrameLayout
        android:id="@+id/content_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#FF0000">

        <!-- 绿色Tab对应的内容View -->
        <LinearLayout
            android:id="@+id/green_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="绿色Tab内容"
                android:textSize="20sp"/>
        </LinearLayout>

        <!-- 蓝色Tab对应的内容View -->
        <LinearLayout
            android:id="@+id/blue_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:visibility="gone">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="蓝色Tab内容"
                android:textSize="20sp"/>
        </LinearLayout>

        <!-- 橙色Tab对应的内容View -->
        <LinearLayout
            android:id="@+id/orange_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:visibility="gone">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="橙色Tab内容"
                android:textSize="20sp"/>
        </LinearLayout>
    </FrameLayout>

    <!-- 页面底部其他内容 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="底部内容，切换Tab也不影响"
        android:padding="16dp"
        android:textSize="18sp"/>
</LinearLayout>

步骤2：编写切换逻辑 #

在Activity中给Tab按钮设置点击事件，切换FrameLayout里的View显示状态：

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

        // 初始化控件
        val greenTab = findViewById<Button>(R.id.green_tab)
        val blueTab = findViewById<Button>(R.id.blue_tab)
        val orangeTab = findViewById<Button>(R.id.orange_tab)

        val greenContent = findViewById<LinearLayout>(R.id.green_content)
        val blueContent = findViewById<LinearLayout>(R.id.blue_content)
        val orangeContent = findViewById<LinearLayout>(R.id.orange_content)

        // 绿色Tab点击事件
        greenTab.setOnClickListener {
            greenContent.visibility = View.VISIBLE
            blueContent.visibility = View.GONE
            orangeContent.visibility = View.GONE
        }

        // 蓝色Tab点击事件
        blueTab.setOnClickListener {
            greenContent.visibility = View.GONE
            blueContent.visibility = View.VISIBLE
            orangeContent.visibility = View.GONE
        }

        // 橙色Tab点击事件
        orangeTab.setOnClickListener {
            greenContent.visibility = View.GONE
            blueContent.visibility = View.GONE
            orangeContent.visibility = View.VISIBLE
        }
    }
}

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