TabLayout +ViewPager2 的customVie

1.布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:clipToPadding="true"
    android:orientation="vertical"
    android:background="@color/color_F4F4F4"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.zhipu.msgmodule.ui.MsgFragment">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_42">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="@dimen/dp_140"
            android:layout_height="@dimen/dp_42"
            app:tabBackground="@color/transparent"
            app:tabGravity="start"
            app:tabIndicator="@drawable/layer_tab_indicator"
            app:tabIndicatorColor="@color/color_CE3232"
            app:tabIndicatorFullWidth="false"
            app:tabIndicatorHeight="0dp"
            app:tabMaxWidth="0dp"
            app:tabMode="fixed"
            app:tabRippleColor="@null"
            app:tabSelectedTextColor="@color/ui_theme_text"
            app:tabTextAppearance="@style/MyCustomTextAppearance"
            app:tabTextColor="@color/color_999999" />

        <TextView
            android:id="@+id/tvRead"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_centerVertical="true"
            android:drawableStart="@mipmap/icon_yidu"
            android:layout_marginRight="@dimen/dp_14"
            android:layout_alignParentRight="true"
            android:text="一键已读"
            android:textColor="@color/color_999999"
            android:textSize="@dimen/sp_12" />
    </RelativeLayout>



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

2.初始化

 binding.tabLayout.addTabSelected{ tab, isSelected ->
            updateTabItemView(tab.customView as TextView,isSelected)
        }

        binding.viewPager.run {
            //禁用预加载
            offscreenPageLimit = ViewPager2.OFFSCREEN_PAGE_LIMIT_DEFAULT
            adapter = object : FragmentStateAdapter(childFragmentManager, lifecycle) {
                override fun getItemCount(): Int = tabs.size

                override fun createFragment(position: Int): Fragment = when (position) {
                    0 -> MsgChildFragment.newInstance()
                    else -> NoticeFragment.newInstance()
                }

            }
//            registerOnPageChangeCallback(pageChangeCallback)
        }

         mediator = TabLayoutMediator(
            binding.tabLayout, binding.viewPager,true,false
        ) { tab, position ->
             tab.text =tabs[position]
             val tv = TextView(context)
             tv.text = tabs[position]
             updateTabItemView(tv,false)
             tab.customView = tv
         }
        mediator.attach()

3.自定义view样式设置

 private fun updateTabItemView(tv :TextView, isSelect: Boolean) {
        context?.let {
            if (isSelect) {
                tv.setTextColor(ContextCompat.getColor(it, R.color.ui_theme_text))
                tv.textSize = ScreenUtils.px2sp(it,it.resources.getDimension(R.dimen.sp_23))
                tv.typeface = Typeface.DEFAULT_BOLD
            } else {
                tv.setTextColor(ContextCompat.getColor(it, R.color.color_999999))
                tv.textSize = ScreenUtils.px2sp(it,it.resources.getDimension(R.dimen.sp_17))
                tv.typeface = Typeface.DEFAULT
            }
        }

    }

4.TabLayout的选中事件监听

fun TabLayout.addTabSelected(onTabSelected:(TabLayout.Tab,Boolean)->Unit){

    addOnTabSelectedListener(object :TabLayout.OnTabSelectedListener{
        override fun onTabSelected(tab: TabLayout.Tab?) {
            tab?.let { onTabSelected.invoke(it,true) }
        }

        override fun onTabUnselected(tab: TabLayout.Tab?) {
            tab?.let { onTabSelected.invoke(it,false) }
        }

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

        }

    })
}