Android开发小技巧: TabLayout Indicator 限定指示器宽度

一、UI效果如下

二、代码

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="44dp"
    android:background="@color/white"
    app:tabBackground="@color/color_transparent"
    app:tabIconTintMode="screen"
    app:tabIndicator="@drawable/tab_indicator"
    app:tabRippleColor="@color/color_primary"
    app:tabSelectedTextColor="@color/color_txt_h1"
    app:tabTextAppearance="@style/TabLayoutTextStyle"
    app:tabTextColor="@color/color_txt_main" />

重点在tab_indicator的定义, 代码如下:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <item android:gravity="center">
        <shape>
            <size
                android:width="100dp"
                android:height="3dp" />
            <corners android:radius="2dp" />
            <solid android:color="@color/color_primary" />
        </shape>
    </item>
</layer-list>

其他, TabLayoutTextStyle的定义

 <style name="TabLayoutTextStyle">
        <item name="android:textSize">15sp</item>
    </style>

三、TabLayout与ViewPager的联动

private fun initViewPager() {
        val list: MutableList<String> = ArrayList()
        list.add("SMS")
        list.add("Phone Call")

        val smsHistoryDetailsFragment = SmsHistoryDetailsFragment()
        val phoneCallHistoryDetailsFragment = PhoneCallHistoryDetailsFragment()
        val fragments: MutableList<Fragment> = ArrayList()
        fragments.add(smsHistoryDetailsFragment)
        fragments.add(phoneCallHistoryDetailsFragment)

        val adapter = TabFragmentAdapter(supportFragmentManager, fragments, list)
        binding.viewPager.setAdapter(adapter)
        binding.tabLayout.setupWithViewPager(binding.viewPager)


        binding.viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
            override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
            }

            override fun onPageSelected(position: Int) {
                //standaloneFragment.onPageChange()
                //sharedFragment.onPageChange()
            }

            override fun onPageScrollStateChanged(state: Int) {
            }
        })
    }