TabLayout 常见设置

全路径地址为：com.google.android.material.tabs.TabLayout

1. app:tabPaddingEnd 与 app:tabPaddingStart 要相等，否则会导致indicator 不是居中的；
2. app:tabMode="scrollable"， 并设置了paddingStart, 会导致左边滑动。这时候 可以使用 margingStart 达到左边指定间距的效果；

3. indicator 希望是固定宽度，并且与文字居中。
   最简单的办法：做一个 .9 图，左右留白区域 设置可以缩放，左右和上下全部为内容区域。 设置 indicator 高度为 预期高度。

   
   indicator_with_padding.png

      <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="35dp"
                android:background="@color/white"
                app:tabIndicatorFullWidth="false"
                app:tabMode="scrollable"
                app:tabPadding="0dp"
                app:tabIndicatorHeight="3dp"
                app:tabRippleColor="@null"
                app:tabIndicator="@drawable/indicator_with_padding" />

app:tabRippleColor 是取消点击波纹效果；
app:tabPadding可以设置tab 左右间距、可以实现取消额外间距的效果；
app:tabIndicatorFullWidth 是设置indicator宽度是不是跟tab 等宽，设置为false, 则效果为 左右比tab文字小一点；
app:tabIndicator 为设置indicator drawable. 可以使用png图片；
app:tabIndicatorHeight 设置indicator高度。

app:tabIndicatorColor 设置indicator颜色。
一定要设置，不然效果就是colorPrimary颜色加app:tabIndicator 形状。设置成app:tabIndicator drawable的主题色即可。

4. 实现 tab 自定义view
   在tabLayout 设置adapter 后（个数确定），遍历个数，对每个tab 设置customView。然后设置默认选中的那个的文字颜色、大小、加粗与否。并在tab 选中和取消选中时再设置文字等ui。

step1.先设置tab选中后ui变化

  binding.tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabReselected(p0: TabLayout.Tab?) {
            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
                tab?.customView?.findViewById<TextView>(R.id.tabTextView)?.textSize = 14f
                tab?.customView?.findViewById<TextView>(R.id.tabTextView)?.setTextColor(ResUtil.getColor(R.color.gray))
            }

            override fun onTabSelected(tab: TabLayout.Tab?) {
                //修改文字大小
                tab?.customView?.findViewById<TextView>(R.id.tabTextView)?.textSize = 18f
                tab?.customView?.findViewById<TextView>(R.id.tabTextView)?.setTextColor(ResUtil.getColor(R.color.brand_text_color))
            }
        })

step2:给tablayout绑定viewpager；
step3:绑定viewpager后，给tab设置custom view. tab_text_view 实际就是一个TextView。

    /**
     * 给tab设置custom view。需要在tabLayout 绑定viewpager后调用（此时才有child）
     */
    private fun setTabCustomLayout() {
        val count = binding.tabLayout.tabCount
        for (i in 0 until count) {
            val tab = binding.tabLayout.getTabAt(i)
            tab?.setCustomView(R.layout.tab_text_view)
            (tab?.customView as? TextView)?.text = binding.viewPager.adapter?.getPageTitle(i)
            //文字加粗
            (tab?.customView as? TextView)?.typeface = Typeface.defaultFromStyle(Typeface.BOLD)
        }
        if (count > 0) {
            //选中第一个，设置文字大小和颜色
            binding.tabLayout.getTabAt(0)?.customView?.findViewById<TextView>(R.id.tabTextView)?.textSize = 18f
            binding.tabLayout.getTabAt(0)?.customView?.findViewById<TextView>(R.id.tabTextView)?.setTextColor(ResUtil.getColor(R.color.brand_text_color))
        }
    }