伴随文字选中绽放细节：用ViewPager2赋能TabLayout

引子

在Android开发中，TabLayout和ViewPager2是两个非常常用的控件，它们经常被一起使用来实现页面之间的切换。但是，默认情况下，TabLayout并没有提供选中放大效果，这使得页面之间的切换显得有些单调。

本文将介绍一种简单的方法，使用ViewPager2赋予TabLayout选中放大效果。这种方法不需要自定义ViewPager2Adapter，也不需要在instantiateItem方法中返回一个自定义视图。只需几行代码即可实现。

实现步骤

1. 在布局文件中添加ViewPager2和TabLayout。

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

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

2. 在Activity或Fragment中，为ViewPager2设置适配器。

val adapter = MyViewPagerAdapter(this)
viewPager.adapter = adapter

3. 为TabLayout添加标签。

tabLayout.addTab(tabLayout.newTab().setText("Tab 1"))
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"))
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"))

4. 为TabLayout添加选中监听器。

tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab) {
        //选中时，放大文字
        tab.view.scaleX = 1.2f
        tab.view.scaleY = 1.2f
    }

    override fun onTabUnselected(tab: TabLayout.Tab) {
        //取消选中时，还原文字大小
        tab.view.scaleX = 1.0f
        tab.view.scaleY = 1.0f
    }

    override fun onTabReselected(tab: TabLayout.Tab) {}
})

效果预览

[图片]

优点

这种方法简单易用，只需几行代码即可实现TabLayout选中放大效果。而且，它不需要自定义ViewPager2Adapter，也不需要在instantiateItem方法中返回一个自定义视图，因此不会对ViewPager2的性能造成影响。

局限性

这种方法只适用于文本标签，不适用于图标标签。而且，它只能放大文本的字体，无法放大文本的背景颜色或其他样式。

结语

以上就是使用ViewPager2赋予TabLayout选中放大效果的简单方法。希望本文能够帮助您在开发中实现更美观、更易用的页面切换效果。