TabLayout + ViewPager2 + Fragment的简单应用

在fragment_container.xml中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:ignore="MissingConstraints">
    
    
    
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout_book"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </com.google.android.material.tabs.TabLayout>


    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager_book"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</LinearLayout>

在activity_main中静态加载fragment

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:fitsSystemWindows="true"
    tools:ignore="MissingConstraints">



  <fragment class="com.example.englishstudy.ui.book.BookFragment"
      android:id="@+id/dsk"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />



</RelativeLayout>

在MainActivity文件中

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

再需要弄个适配器，设置TabItem的数目以及viewpager对应要加载的Fragment

class BookAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {


    override fun getItemCount(): Int {
        return 4
    }

    override fun createFragment(position: Int): Fragment {
        return when(position){
            0 -> {
                BookListFragment()
            }
            1 -> {
                 ListenFragment()
            }
            2 -> {
                 BookListFragment()
            }
            else ->{
                BookListFragment()
            }
        }
    }

}

最后在Fragment中完成具体的操作

利用 TabLayoutMediator 将TabLayout和ViewPager2之间的联动

利用addOnTabSelectedListener监听TabItem的点击

class BookFragment: Fragment() {

    private var _binding: FragmentBookContainerBinding? = null
    
    private val binding
        get() = _binding!!

    private val TAG = "BookFragment"

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        _binding = FragmentBookContainerBinding.inflate(layoutInflater,container,false)

        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding.viewPagerBook.adapter = BookAdapter(this)

        TabLayoutMediator(binding.tabLayoutBook,binding.viewPagerBook) { tab, position ->
            when(position){
                0 -> tab.text = "阿萨德"
                1 -> tab.text = "请王尔德"
                2 -> tab.text = "定金付货款"
                else -> tab.text = "觉得很疯狂”"
            }
        }.attach()

        binding.tabLayoutBook.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            // 点击
            override fun onTabSelected(tab: TabLayout.Tab?) {
                logD(TAG,"addOnTabSelectedListener111  ${tab!!.position}")
                when(tab.position) {
                    0 -> tab_num = 0
                    1 -> tab_num = 1
                    2 -> tab_num = 2
                    3 -> tab_num = 3

                }

            }
            // 释放点击
            override fun onTabUnselected(tab: TabLayout.Tab?) {
                logD(TAG,"addOnTabSelectedListener222  ${tab!!.position} ")
            }

            override fun onTabReselected(tab: TabLayout.Tab?) {
                logD(TAG,"addOnTabSelectedListener333 ")
            }
        })

    }
}

期间出现的问题：尝试在TabLayout下直接添加TabItem，出现 Error inflating class fragment 的错误，具体原因不明

解决方法：去掉TabItem中的 id 即可

 <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout_book"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_item0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_item1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_item2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </com.google.android.material.tabs.TabLayout>