ViewPager2正式推出已经一年多了，虽然不如3那样新潮，但是也不如老前辈ViewPager那样有众多开源库拥簇，比如它的灵魂伴侣TabLayout明显后援不足，好在TabLayout自身够硬！

ViewPager2灵魂伴侣是官方提供的：

com.google.android.material.tabs.TabLayout

TabLayout 利用其良好的设计，使得自定义非常容易。

像匹配ViewPager的优秀开源库FlycoTabLayout的效果，使用TabLayout都能比较容易的实现：

FlycoTabLayout 演示

实现上图中的几个常用效果TabLayout 仅需在xml重配置即可

不过稍微不同的是，上图中第二第三栏选中后的字体是有放大效果的。

这是利用TabLayout.Tab的customView属性达到的。下文便是实现的思路与过程记录。

正文

思路拆解：

• 
  
• 介于此功能耦合点仅仅是TabLayoutMediator，选择使用拓展包装TabLayoutMediator，轻量且无侵入性，API还便捷
  
• 自定义TabLayoutMediator,设置customView，放入自己的TextView
  
• 内部自动添加一个addOnTabSelectedListener,在选中后使用动画渐进式的改变字体大小，同理取消选中时还原
  

解决过的坑：

• 
  
• TextView的文本在Size改变时，宽度动态变化，调用requestLayout()。Tab栏会因此触发重新测量与重绘，出现短促闪烁。塞两个TextView，一个作为最大边界并且设置INVISIBLE
  
• 同样是重测问题，导致TabLayout额外多从头绘制一次Indicator时,直观表现就是每次切换Indicator时，会出现闪现消失。采用自定义了一个ScaleTexViewTabView,动态控制是否触发super.requestLayout
  

(因为已经准备了两个View,负责展示效果的View最大范围是明确无法超过既定范围的，所以这个办法不算“黑”)

• 
  
• 
  

  核心API：

  
  
  

fun <T : View> TabLayout.createMediatorByCustomTabView(

    vp: ViewPager2,

    config: CustomTabViewConfig<T>

): TabLayoutMediator {

    return TabLayoutMediator(this, vp) { tab, pos ->

        val tabView = config.getCustomView(tab.view.context)

        tab.customView = tabView

        config.onTabInit(tabView, pos)

    }

}


fun TabLayout.createTextScaleMediatorByTextView(

    vp: ViewPager2,

    config: TextScaleTabViewConfig

): TabLayoutMediator {


val mediator = createMediatorByCustomTabView(vp, config)

...

...

return mediator

}

• 
  
• 
  

  使用：

  
  
  

val mediator = tabLayout.createTextScaleMediatorByTextView(viewPager2,

    object : TextScaleTabViewConfig(scaleConfig) {

        override fun onBoundTextViewInit(boundSizeTextView: TextView, position: Int) {

            boundSizeTextView.textSizePx = scaleConfig.onSelectTextSize

            boundSizeTextView.text = tabs[position]

        }

        override fun onVisibleTextViewInit(dynamicSizeTextView: TextView, position: Int) {

            dynamicSizeTextView.setTextColor(Color.WHITE)

            dynamicSizeTextView.text = tabs[position]

        }

    })

mediator.attach()

整个代码去除通用拓展不过100行左右，不过鉴于其独立性还是要单独发布到基础组件库中。这样组件库中就有两个是单文件的组件了哈哈~

点击直达完整源码~，拷贝即用

END