Android 原生Fragment+Tablayout+ViewPager2

效果图如下：

使用 HomeViewPagerFragment 布局中放 toolbar + tablayout+viewPager2

布局文件

<?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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ui.netfile.fragment.HomeViewPagerFragment">

    <include layout="@layout/layout_toolbar_file" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorPrimaryDark">

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tv_title_share"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/str_to_share" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tv_title_part"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:text="@string/str_to_part"

            android:textColor="@color/colorPrimaryDark" />
    </com.google.android.material.tabs.TabLayout>

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

</LinearLayout>

 

HomeViewPagerFragment.kt

private lateinit var obj: OnPageChangeCallback
override fun onActivityCreated(savedInstanceState: Bundle?) {
    super.onActivityCreated(savedInstanceState)
    adapter = MainPagerAdapter(this)
    viewPager.adapter = adapter
    TabLayoutMediator(tabs, viewPager) { tab, position ->
        tab.text = getTabTitle(position)
    }.attach()
    initListener()
}



private fun initListener() {
    obj = object : OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        onChange(position)
    }

    override fun onPageScrollStateChanged(newState: Int) {

    }
}
viewPager.registerOnPageChangeCallback(obj)
}

override fun onDestroy() {
    super.onDestroy()
    viewPager.unregisterOnPageChangeCallback(obj)
}

fun onChange(position: Int) {
    when (position) {
        0 -> {
            iv_add.visibility = View.INVISIBLE
        }
        1 -> {
            iv_add.visibility = View.VISIBLE
        }
    }
}

MainPagerAdapter中创建2个切换的fragment FileShareFragment FileMainFragment

const val SHARE_PAGE_INDEX = 0
const val PART_PAGE_INDEX = 1

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


    /**
     * Mapping of the ViewPager page indexes to their respective Fragments
     */
    private val tabFragmentsCreators: Map<Int, () -> Fragment> = mapOf(
        SHARE_PAGE_INDEX to { FileShareFragment() },
        PART_PAGE_INDEX to { FileMainFragment() }
    )

    override fun getItemCount() = tabFragmentsCreators.size

    override fun createFragment(position: Int): Fragment {
        return tabFragmentsCreators[position]?.invoke() ?: throw IndexOutOfBoundsException()
    }
    
}

滑动或点击tablayout切换viewPager中的fragment