ViewPager2 和TabLayout 的使用

最新推荐文章于 2025-07-23 21:34:58 发布

Android-Sky

最新推荐文章于 2025-07-23 21:34:58 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Android

本文链接：https://blog.csdn.net/u013297881/article/details/103764480

Android 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用ViewPager2和TabLayout实现自定义的页面切换效果，包括自定义下标长度、fragment加载策略及垂直或横向滑动展示。通过示例代码展示了如何配置ViewPager2与TabLayout的联动，以及如何创建适配器来管理多个Fragment。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

谷歌地址 https://github.com/android/views-widgets-samples

优点

可自定义下标长度

可实现fragment的可视再进行加载，

可实现垂直或者横向滑动展示

//design 变为如下
implementation "com.google.android.material:material:1.0.0"

implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha01'

<com.google.android.material.tabs.TabLayout
    android:id="@+id/mTabLayout"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    app:tabIndicatorFullWidth="false"
    app:tabBackground="?attr/colorPrimary"
    app:tabIndicatorColor="@color/colorAccent"
    app:tabIndicatorHeight="2.5dp"
    app:tabMaxWidth="0dp"
    app:tabSelectedTextColor="@color/colorAccent"
    app:tabMode="fixed"></com.google.android.material.tabs.TabLayout>

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

适配器变更如下

class BaseFragmentStateAdapter(fragmentManager: FragmentManager) :
    FragmentStateAdapter(fragmentManager) {

    fun add(fragment: Fragment) {
        mFragments.add(fragment)
    }
    private val mFragments = mutableListOf<Fragment>()
    override fun getItem(position: Int): Fragment {
        return mFragments[position]
    }

    override fun getItemCount(): Int {
        return mFragments.size
    }
}

主界面

class ViewPage2Activity : AppCompatActivity() {
    private lateinit var fragmentAdapter: BaseFragmentStateAdapter
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_view_page2)
        initFragment()
    }

    private fun initFragment() {
        fragmentAdapter = BaseFragmentStateAdapter(supportFragmentManager)
        fragmentAdapter.add(LoginFragment())
        fragmentAdapter.add(RegisterFragment())
        fragmentAdapter.add(LoginFragment())
        mViewPager.adapter = fragmentAdapter
        //        TabLayout和ViewPager的绑定
        val tabLayoutMediator =
            TabLayoutMediator(mTabLayout, mViewPager,
                OnConfigureTabCallback { tab, position ->
                    tab.text = "Tab$position" })
        tabLayoutMediator.attach()
    }
}