Viewpage2+TabLayout+Fragment 使用过程中的一些问题总结

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指示器长度

首先提一下，大多数情况下是要求指示器和字体长度一致的，这个时候设置

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~ 希望对遇到同样问题的小伙伴有所帮助