Android 自定义TabLayout

Posted 2022-05-25 哈特谢普苏特

默认的TabLayout是没有花里胡哨的功能的，比如说我们可能希望它有边框，或者有背景颜色,或者外边框。因此就需要更改一些属性，或者在代码中实现。比如下图这种带边框，字体改变。

实现思路：

tablayout外层嵌套RelativeLayout，和viewpager配合使用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FAFAFA">


    <RelativeLayout
        android:id="@+id/rlyout"
        android:layout_width="228dp"
        android:layout_height="25dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:background="@drawable/tab_background_ridus"
        android:padding="1dp">


        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:tabGravity="fill"
            app:tabIndicatorColor="#FF000000"
            app:tabIndicatorHeight="0dp"
            app:tabMaxWidth="0dp"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/white"
            app:tabTextAppearance="@style/tabLayoutTextStyle"
            app:tabTextColor="@color/black" />

    </RelativeLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/rlyout"
        android:layout_marginTop="20dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent" />


</RelativeLayout>

tab_background_ridus.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 填充 -->
    <solid android:color="@color/white" />
    <!-- 圆角 -->
    <corners android:radius="20dp" />
    <stroke
        android:width="1dp"
        android:color="@color/black" />
</shape>

tabLayoutTextStyle 这个是自定义tablayout的字体大小等

    <style name="tabLayoutTextStyle">
        <item name="android:textSize">13sp</item>
        <item name="android:fontFamily">sans-serif-medium</item>
    </style>

 在代码中添加addOnTabSelectedListener进行监听，然后修改当前布局的圆角、颜色等值，默认选中的是0位置的tab

        binding.tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener 
            override fun onTabReselected(tab: TabLayout.Tab) 
            

            override fun onTabUnselected(tab: TabLayout.Tab) 
                setBackground(tab, false)
            

            override fun onTabSelected(tab: TabLayout.Tab) 
                setBackground(tab, true)
            
        )
        binding.tabLayout.getTabAt(0)?.let  setBackground(it, true) 

setBackground（）中做的事情就是根据当前位置的不同，设置不同的布局

    private fun setBackground(tab: TabLayout.Tab, selected: Boolean) 
        var drawable: Drawable? = null
        when (tab.position) 
            0 -> 
                if (selected) 
                    drawable = getDrawable(R.drawable.tab_background_checked)
                 else 
                    drawable = getDrawable(R.drawable.tab_unchecked_first)
                
            
            1 -> 
                if (selected) 
                    drawable = getDrawable(R.drawable.tab_background_checked_second)
                 else 
                    drawable = getDrawable(R.drawable.tab_unchecked_second)
                
            
        
        ViewCompat.setBackground(tab.view, drawable)
    

比如，当第一个tab被选中时，我们希望它的左上左下都有圆角

也就是drawable为tab_background_checked文件

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/black" />
    <corners
        android:topLeftRadius="20dp"
        android:bottomLeftRadius="20dp"
        />

</shape>

这样就可以实现定制的一些需求

ps：当时一开始想的是去重写tablayout，这样就可以自定义它的字体大小、边框等等，但是发现其实没有必要，tablayout已经通过接口、或者是xml帮我们实现好了。

一个参考资料 tablayout自定义总结