Viewpage2+Tablayout在实际开发中主要用于页面的头部导航或者底部导航（类似微信效果）。官方用法介绍不再多说，记录一下自己实际开发中遇到一下问题：
先上部分代码：
xml布局
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabTips"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingHorizontal="@dimen/dp10"
android:paddingVertical="4dp"
app:tabIndicatorHeight="4dp"
app:tabIndicatorFullWidth="false"
app:tabIndicatorColor="@color/color_0EA08A"
app:tabIndicator="@drawable/bg_tab_indicator_24"
app:tabMode="scrollable"
app:tabPaddingEnd="6dp"
app:tabPaddingStart="6dp"
app:tabRippleColor="@color/transparent" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:clipToPadding="false" />
activity：viewpage2和tablayout关联
val tabIndex = intent.getIntExtra("currentIndex", 0)
pager.adapter = FragmentAdapter(this)
pager.offscreenPageLimit = 3
pager.currentItem = tabIndex
TabLayoutMediator(tabTips, pager) { tabLayout, position ->
}.attach()
FragmentStateAdapter:
class FragmentAdapter(
var context: FragmentActivity,
) : FragmentStateAdapter(context) {
override fun createFragment(position: Int): Fragment {
return MyFragment.newInstance(position)
}
override fun getItemCount(): Int {
return titles.size
}
}
问题1：自定义TabLayout指示器tabIndicator的长度/固定TabLayout指示器长度
image.png
app:tabIndicatorFullWidth="false" 即可满足要求，true则表示指示器占满平分的空间；如图我们设计师要求指示器长度是固定24dp，网上很多说法是用反射修改源码之类的，不是很好使也有点麻烦，我这边采用的是layer-list，直接上代码
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item android:gravity="center">
<shape>
<size android:width="24dp"
android:height="4dp"/>
<solid android:color="@color/color_0EA08A"/>
</shape>
</item>
</layer-list>
使用的时候直接 app:tabIndicator="@drawable/bg_tab_indicator_24" 完美解决
问题2：修改选中后的字体大小和颜色
颜色问题好解决，有提供相应属性设置
app:tabTextColor="#000000"
app:tabSelectedTextColor="#FFFFFF"
至于字体大小，如果选中和不选中大小一致，可以设置一个字体样式， app:tabTextAppearance="@style/tab_text"
<style name="tab_text">
<item name="android:textStyle">bold</item>
<item name="android:textSize">18sp</item>
</style>
如果字体大小变化，需要在代码里面手动设置一下，先上代码
/**
* 改变tab选中后的字体样式
*/
private fun changeTabTextStyle(index: Int) {
val unSelectedSize: Float = TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_PX,
20f,
resources.displayMetrics
)
val selectedSize: Float = TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_PX,
28f,
resources.displayMetrics
)
TabLayoutMediator(tabTips, pager) { tabLayout, position ->
tabLayout.text = titles[position]
val textView = TextView(this@AllTipsActivity)
textView.gravity = Gravity.CENTER
textView.text = titles[position]
if (index == position) {
textView.setTextColor(resources.getColor(R.color.color_121E0C))
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, selectedSize)
} else {
textView.setTextColor(resources.getColor(R.color.color_8b9c97))
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, unSelectedSize)
}
tabLayout.customView = textView
}.attach()
tabTips.addOnTabSelectedListener(object : OnTabSelectedListener {
override fun onTabSelected(tab: TabLayout.Tab?) {
tab?.apply {
val textView = customView as TextView
textView.setTextColor(resources.getColor(R.color.color_121E0C))
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, selectedSize)
}
}
override fun onTabUnselected(tab: TabLayout.Tab?) {
tab?.apply {
val textView = customView as TextView
textView.setTextColor(resources.getColor(R.color.color_80827E))
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, unSelectedSize)
}
}
override fun onTabReselected(tab: TabLayout.Tab?) {
}
})
}
首先要为tablayout设置customView ，如果涉及复杂的样式，可通过xml的形式，支持直接添加布局id
tabLayout.setCustomView(R.layout.xxx)
我的需求主要就是textview，所以直接代码添加了，绑定时候给当前选中tab设置样式
TabLayoutMediator(tabTips, pager) { tabLayout, position ->
tabLayout.text = titles[position]
val textView = TextView(this@AllTipsActivity)
textView.gravity = Gravity.CENTER
textView.text = titles[position]
if (index == position) {
textView.setTextColor(resources.getColor(R.color.color_121E0C))
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, selectedSize)
} else {
textView.setTextColor(resources.getColor(R.color.color_8b9c97))
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, unSelectedSize)
}
tabLayout.customView = textView
}.attach()
接下来是手动点击或者滑动切换viewpage的时候 设置监听，修改样式
tabTips.addOnTabSelectedListener(object : OnTabSelectedListener {
override fun onTabSelected(tab: TabLayout.Tab?) {
tab?.apply {
val textView = customView as TextView
textView.setTextColor(resources.getColor(R.color.color_121E0C))
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, selectedSize)
}
}
override fun onTabUnselected(tab: TabLayout.Tab?) {
tab?.apply {
val textView = customView as TextView
textView.setTextColor(resources.getColor(R.color.color_80827E))
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, unSelectedSize)
}
}
override fun onTabReselected(tab: TabLayout.Tab?) {
}
})
问题3：移除viewpage平滑滚动效果
表象是入口进入tab页面的时候 定位到比较靠后的tabIndex时页面会有平滑滚动效果，视觉上会有闪烁一下的感觉，这个严格上来说不算问题，看设计师的具体要求吧，如果不需要的话就把 pager.currentItem = tabIndex 改为
pager.setCurrentItem(tabIndex,false)
问题4：关于viewpage2的懒加载问题
viewpage2也是支持预加载的，为保证滑动过程流畅，推荐的pager.offscreenPageLimit的值是3，这样就会带来fragment生命周期的一些问题，具体的源码分析也不多叙述，直接提解决方案。比较简单直接在onResume，onPause里面处理相应的逻辑即可
override fun onResume() {
super.onResume()
}
override fun onPause() {
super.onPause()
}
当然如果不想支持预加载，viewpage2也是支持的，这一点比viewpage灵活，支持设置offscreenPageLimit = -1 即表示不支持预加载。
end~ 希望对遇到同样问题的小伙伴有所帮助
