如何使用Segmented Buttons切换Fragments？无需TabLayout/ViewPager及滑动

一、核心思路 #

不用TabLayout和ViewPager，我们可以用RadioGroup + RadioButton实现分段按钮效果，配合FrameLayout作为Fragment容器，通过监听单选按钮的选中状态切换对应Fragment（推荐用hide/show方式，避免Fragment反复重建）。

二、步骤实现 #

1. 编写布局文件 #

在Activity布局里，顶部放RadioGroup作为分段按钮组，下方放FrameLayout作为Fragment容器：

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

    <!-- 分段按钮组 -->
    <RadioGroup
        android:id="@+id/segmented_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:background="@drawable/segmented_bg"
        android:orientation="horizontal"
        android:padding="2dp">

        <RadioButton
            android:id="@+id/btn_tab1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/segmented_btn_selector"
            android:button="@null"
            android:gravity="center"
            android:paddingVertical="10dp"
            android:text="Tab 1"
            android:textColor="@drawable/segmented_text_selector"
            android:textSize="16sp" />

        <RadioButton
            android:id="@+id/btn_tab2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/segmented_btn_selector"
            android:button="@null"
            android:gravity="center"
            android:paddingVertical="10dp"
            android:text="Tab 2"
            android:textColor="@drawable/segmented_text_selector"
            android:textSize="16sp" />

        <RadioButton
            android:id="@+id/btn_tab3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/segmented_btn_selector"
            android:button="@null"
            android:gravity="center"
            android:paddingVertical="10dp"
            android:text="Tab 3"
            android:textColor="@drawable/segmented_text_selector"
            android:textSize="16sp" />
    </RadioGroup>

    <!-- Fragment容器 -->
    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

2. 自定义分段按钮样式 #

需要4个drawable文件实现配图视觉效果：

（1）分段按钮组背景 segmented_bg.xml

实现圆角边框：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#F5F5F5" />
    <corners android:radius="8dp" />
    <stroke
        android:width="1dp"
        android:color="#E0E0E0" />
</shape>

（2）单个按钮状态选择器 segmented_btn_selector.xml

控制选中/未选中背景：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/segmented_btn_selected" android:state_checked="true" />
    <item android:drawable="@android:color/transparent" android:state_checked="false" />
</selector>

（3）选中按钮背景 segmented_btn_selected.xml

选中时的填充背景：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <corners android:radius="6dp" />
    <stroke
        android:width="1dp"
        android:color="#E0E0E0" />
</shape>

（4）文字颜色选择器 segmented_text_selector.xml

控制选中/未选中文字颜色：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#2196F3" android:state_checked="true" />
    <item android:color="#757575" android:state_checked="false" />
</selector>

3. 实现Fragment切换逻辑 #

在Activity中提前初始化所有Fragment，通过hide/show切换以保留状态：

class MainActivity : AppCompatActivity() {
    private lateinit var fragment1: Fragment1
    private lateinit var fragment2: Fragment2
    private lateinit var fragment3: Fragment3
    private lateinit var currentFragment: Fragment

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

        // 初始化Fragment实例
        fragment1 = Fragment1()
        fragment2 = Fragment2()
        fragment3 = Fragment3()

        // 默认加载第一个Fragment
        supportFragmentManager.beginTransaction()
            .add(R.id.fragment_container, fragment3)
            .add(R.id.fragment_container, fragment2)
            .add(R.id.fragment_container, fragment1)
            .hide(fragment2)
            .hide(fragment3)
            .commit()
        currentFragment = fragment1
        findViewById<RadioButton>(R.id.btn_tab1).isChecked = true

        // 设置分段按钮选中监听
        findViewById<RadioGroup>(R.id.segmented_group).setOnCheckedChangeListener { _, checkedId ->
            when (checkedId) {
                R.id.btn_tab1 -> switchFragment(fragment1)
                R.id.btn_tab2 -> switchFragment(fragment2)
                R.id.btn_tab3 -> switchFragment(fragment3)
            }
        }
    }

    // 切换Fragment核心方法
    private fun switchFragment(targetFragment: Fragment) {
        if (currentFragment == targetFragment) return
        supportFragmentManager.beginTransaction()
            .hide(currentFragment)
            .show(targetFragment)
            .commit()
        currentFragment = targetFragment
    }
}

三、关键细节说明 #

• RadioGroup天然支持单选，完美匹配分段按钮的交互逻辑；
• hide/show比replace更高效，能保留Fragment的状态（比如输入框内容、滚动位置）；
• 自定义drawable可完全匹配配图样式，你可以根据需求调整颜色、圆角大小等参数。

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