【Android】MaterialButtonToggleGroup设计Tab控制多个Fragment【解决重叠的问题】

1、fragment_tab.xml

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

    <TextView
        android:id="@+id/fragment_tab_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="请输入fragment内容" />
</LinearLayout>

2、TabFragment.kt

package com.example.kotlingradletemplatefirst.myfragment

import android.os.Bundle
import android.view.TextureView
import android.view.View
import android.widget.TextView
import androidx.fragment.app.Fragment
import com.example.kotlingradletemplatefirst.R

class TabFragment : Fragment(R.layout.fragment_tab) {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        view.findViewById<TextView>(R.id.fragment_tab_view).text = arguments?.getString("button_id")
    }
}

3、activity_first.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragment_tab_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top" />

    <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/tab_button_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:gravity="bottom">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/tab_button01"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="tab01" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/tab_button02"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="tab02" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/tab_button03"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="tab03" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/tab_button04"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="tab04" />
    </com.google.android.material.button.MaterialButtonToggleGroup>

</LinearLayout>

4、MainActivity.kt

package com.example.kotlingradletemplatefirst


import android.graphics.Color
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.commit
import com.example.kotlingradletemplatefirst.myfragment.TabFragment
import com.google.android.material.button.MaterialButton
import com.google.android.material.button.MaterialButtonToggleGroup


class MainActivity : AppCompatActivity() {

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

        val materialButtonToggleGroup = findViewById<MaterialButtonToggleGroup>(
            R.id.tab_button_group
        )
        materialButtonToggleGroup.addOnButtonCheckedListener { group, checkedId, isChecked ->
            println("group=${group}, checkedId=${checkedId}, isChecked=${isChecked} ")
            for (i in 0 until group.childCount) {
                val button = group.getChildAt(i) as MaterialButton
                if (button.id == checkedId) {
                    this.updateTabFragment(button.id, true)
                    button.setTextColor(Color.BLUE)
                } else {
                    this.updateTabFragment(button.id, false)
                    button.setTextColor(Color.RED)
                }
            }
        }
        materialButtonToggleGroup.check(R.id.tab_button01)
    }

    private fun updateTabFragment(
        button_id: Int,
        isChecked: Boolean
    ) {
        val bundle = Bundle()
        bundle.putString("button_id", "$button_id")
        /**
         * 1、这里等待处理【必须获取已存在的fragment】不能每次新创建！
         */

        val fragmentTag = "tag_${button_id}"
        val tabFragment =
            supportFragmentManager.findFragmentByTag(fragmentTag) ?: TabFragment()

        tabFragment.arguments = bundle
        val sb = supportFragmentManager.beginTransaction()
        if (isChecked) sb.show(tabFragment) else sb.hide(tabFragment)
        if (!tabFragment.isAdded) {
            /**
             * 1、fragment实例不能重复添加,否则会抛异常！
             */
            sb.add(R.id.fragment_tab_container, tabFragment, fragmentTag)
        }
        sb.commitAllowingStateLoss()
        println("supportFragmentManager.fragments==${supportFragmentManager.fragments}")
        println("supportFragmentManager.fragments.size=${supportFragmentManager.fragments.size}")
    }
}