TabLayout自定义显示

有时候会用到TabLayout和ViewPager联动的场景，各种指示器的样式就会用到自定义TabLayout的Tab，虽然用RecyclerView也能实现，但是TableLayout的指示器可以自动在屏幕中滚动并选中对应的条目，下边是自定义效果。

		val tabNames = ArrayList<String>()
        val fragmentList = ArrayList<BaseFragment>()
        val rticle = articleList.rticle
        //动态添加指示条目
        for (i in 0 until rticle.size) {
            val tab: TabLayout.Tab = binding.tabLayout.newTab()
            //自定义条目的样式，可以根据需要写成自己想要的
            val view =
                LayoutInflater.from(this).inflate(R.layout.compete_tablayout_tabitem_view, null)
            val tv_text: TextView = view.findViewById(R.id.tv_text)
            tv_text.text = rticle.get(i).name
            tab.customView = view
            binding.tabLayout.addTab(tab)
            val fragment = Fragment()
            fragmentList.add(fragment )
        }
        binding.viewPager.setOffscreenPageLimit(1)
        binding.viewPager.setAdapter(BaseFragmentPagerAdapter(supportFragmentManager, tabNames, fragmentList))
        //注意这里的关联
        binding.viewPager.addOnPageChangeListener(object :
            TabLayout.TabLayoutOnPageChangeListener(binding.tabLayout) {
        })
        binding.tabLayout.addOnTabSelectedListener(object : OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab) {
                binding.viewPager.currentItem = tab.position
            }

            override fun onTabUnselected(tab: TabLayout.Tab) {

            }

            override fun onTabReselected(tab: TabLayout.Tab) {

            }

        })
 binding.tabLayout.getTabAt(position)?.select()
   

class BaseFragmentPagerAdapter(fm: FragmentManager,val tabNames: ArrayList<String>, val list: List<BaseFragment>): FragmentPagerAdapter(fm) {

    override fun getItem(position: Int): Fragment {
        return list[position]
    }

    override fun getCount(): Int {
    	//这里要注意，不要写tabNames.size，会有问题
        return list.size
    }

    override fun getPageTitle(position: Int): CharSequence {
        return tabNames[position]
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:textAlignment="center"
        app:tabBackground="@null"
        app:tabIndicatorHeight="@dimen/size_0dp"
        app:tabIndicatorColor="#2e8cff"
        app:tabIndicatorFullWidth="false"
        app:tabMode="auto"
        android:overScrollMode="ifContentScrolls"
        app:tabPaddingBottom="@dimen/size_10dp"
        app:tabPaddingTop="@dimen/size_5dp"
        app:tabRippleColor="@null"
        app:tabSelectedTextColor="#2e8cff"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabTextColor="#333333"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>