ViewPager2+Fragment+TabLayout

ViewPager2的底层源码是RecycleView，所以我们需要为他设置一个适配器

class WechatFragmentAdapter(
    private val fragmentActivity: Fragment,
    val fragments: ArrayList<Fragment>
) : FragmentStateAdapter(fragmentActivity) {
    override fun getItemCount(): Int {
        return fragments.size
    }

    override fun createFragment(position: Int): Fragment {
        return fragments[position]
    }
}

这个类中主构造函数

第一个参数传入它的父布局，即它的容器（这个说法可能不对，我也不是很懂第一个参数什么作用，因为我是把它们放在Fragment布局中的，如果第一个参数类型设置为Activity，编译错误，所以我想第一个参数有可能是容器。两个月后回来更新了，如果父布局是Activity的话就设置为FragmentActivity）

第二个参数就是fragments即装fragment的集合

这个类中有两个函数

第一个函数 getItemCount()作用是获取fragments集合中fragment的数量

第二个函数 createFragment()作用是获取当前的位置，为当前位置设置fragment

还是先在布局中导入ViewPager2+Tablayout吧

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/wechat_tabLayout"
        app:tabMode="scrollable"
        android:layout_width="match_parent"
        android:layout_height="50dp" />

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

</LinearLayout>

LinearLayout的orientation属性一定要设置为vertical布局

然后初始化Fragment，继承自Fragment类

<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:text="This is fragment1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

class Fragment1:Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment1,container,false)
    }
}

Fragment2和这一样，就不用代码展示了

我们在看看Fragment内加载这三个布局

class WechatFragment : Fragment() {
    private lateinit var view1: View
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        view1 = inflater.inflate(R.layout.fragment_wechat, container, false)
        initViewPager()
        return view1
    }

    private fun initViewPager() {
        val viewPager: ViewPager2 = view1.findViewById(R.id.wechat_viewpager2)
        val tabLayout: TabLayout = view1.findViewById(R.id.wechat_tabLayout)
        var fragments = ArrayList<Fragment>()
        fragments.add(Fragment1())
        fragments.add(Fragment2())
        //为Tablayout设置显示的文字的集合
        val data = arrayOf(
            "Fragment1",
            "Fragment2",
        )
        //初始化ViewPager2的Adapter，传入两个参数即可
        val adapter1 = WechatFragmentAdapter(this, fragments)
        //为这个布局中的ViewPager2设置Adapter
        viewPager.adapter = adapter1
        //这个方法特别关键，将ViewPager2与TabLayout进行联动，主要为TabLayoutMediator
        //这里Kotlin用lambda表达式简化了很多代码
        TabLayoutMediator(
            tabLayout, viewPager
        ) { tab, position ->
        //先获取position，然后再为tabLayout设置text
            tab.text = data[position]
        }.attach() //最后这一个attach()一定要加上，这是将TabLayout和ViewPager2联动起来的关键
    }
}

作为一名初学者，如有问题请指出，代码可能也写的不是很好