TabLayout+ViewPager2+Fragment实现页面切换

如图：

1、activity_main.xml

<?xml version="1.0" encoding="utf-8"?>


    
    
    
    

　2、创建适配器继承 FragmentStateAdapter

package com.example.tablayoutdemo

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.lifecycle.Lifecycle
import androidx.viewpager2.adapter.FragmentStateAdapter

class GuideViewPagerAdapter (fragmentManager: FragmentManager, lifecycle: Lifecycle) : FragmentStateAdapter(fragmentManager,lifecycle){
    override fun getItemCount(): Int {
        return 3
    }

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> {
                OneFragment()
            }
            1 -> {
                TwoFragment()
            }
            2 -> {
                ThreeFragment()
            }
            else -> {
                OneFragment()
            }
        }
    }

}

3、MainActivity

package com.example.tablayoutdemo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.view.LayoutInflater
import android.widget.TextView
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.viewpager2.widget.ViewPager2
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayoutMediator

class MainActivity : AppCompatActivity() {

    private lateinit var guideViewPagerAdapter: GuideViewPagerAdapter

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

        val tabLayout = findViewById(R.id.tab_layout)
        val viewPager = findViewById(R.id.view_pager)

        guideViewPagerAdapter = GuideViewPagerAdapter(supportFragmentManager, lifecycle)
        viewPager.adapter = guideViewPagerAdapter
        TabLayoutMediator(tabLayout,viewPager){ tab, position ->
            val inflater = LayoutInflater.from(tab.parent?.context)
            val binding = inflater.inflate(R.layout.tab_item_indicator, tab.view, false)
            Log.i("打印11:","$position")
            val tvName = binding.findViewById(R.id.tv_name)
            if (position == 0){
                tvName.text = "one"
                tvName.setTextSize(20F)
                tvName.setBackgroundResource(R.drawable.btn_select)
            }else if (position == 1){
                tvName.text = "two"
            }else if (position == 2){
                tvName.text = "three"
            }

            tab.customView = binding
        }.attach()


        tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener{
            override fun onTabSelected(tab: TabLayout.Tab?) {
                val customView = tab?.customView as ConstraintLayout
                val tvName = customView.findViewById(R.id.tv_name)
                tvName.setTextSize(20F)
                Log.i("打印222:","${tab?.position}")
                /*if (tab?.position == 0){
                    tvName.text = "one"
                }else if (tab!!.position == 1){
                    tvName.text = "two"
                }else if (tab!!.position == 2){
                    tvName.text = "three"
                }*/
                tvName.setBackgroundResource(R.drawable.btn_select)
            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
                val customView = tab?.customView as ConstraintLayout
                val tvName = customView.findViewById(R.id.tv_name)
                Log.i("打印333:","${tab?.position}")
               /* if (tab?.position == 0){
                    tvName.text = "one"
                }else if (tab!!.position == 1){
                    tvName.text = "two"
                }else if (tab!!.position == 2){
                    tvName.text = "three"
                }*/
                tvName.setTextSize(16F)
                tvName.setBackgroundResource(R.drawable.btn_select_no)
            }

            override fun onTabReselected(tab: TabLayout.Tab?) {
                val customView = tab?.customView as ConstraintLayout
                val tvName = customView.findViewById(R.id.tv_name)
                Log.i("打印444:","${tab?.position}")
                /*if (tab?.position == 0){
                    tvName.text = "one"
                }else if (tab!!.position == 1){
                    tvName.text = "two"
                }else if (tab!!.position == 2){
                    tvName.text = "three"
                }*/
                tvName.setTextSize(18F)
                tvName.setBackgroundResource(R.drawable.btn_select)
            }

        })



    }
}

4、tab_item_indicator.xml

<?xml version="1.0" encoding="utf-8"?>


    
    

5、btn_select

<?xml version="1.0" encoding="utf-8"?>

    
    
    

    
   

    
    
    

    

6、btn_select_no

<?xml version="1.0" encoding="utf-8"?>

    
    
    

    

    
    
    

    

　7、styles.xml

<?xml version="1.0" encoding="utf-8"?>

    

 完成