安卓笔记：自定义TabLayout

TabLayout用于实现标签布局。类似下图：

原生的TabLayout支持文字和图标，不过图标大小不可调，颜色也比较单调，为了美观，需要自定义。

下面是最新版的 TabLayout

   <com.google.android.material.tabs.TabLayout
        android:id="@+id/bottom_tab_layout"
        android:layout_width="match_parent"
        app:tabIndicatorHeight="0dp"
        android:background="@android:color/black"
        android:layout_height="50dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        >

    </com.google.android.material.tabs.TabLayout>

使用前，需要导入 下包

 implementation 'com.google.android.material:material:1.5.0'

自定义每个标签的样式，创建 layout 资源文件：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout  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">

    <com.pingbu.nban.activity.ui.IconFontTextView
        android:id="@+id/bottom_menu_item_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp"
        android:text="@string/iconfont_hangqing"
        android:textColor="@color/white"

        android:textSize="22dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        >

    </com.pingbu.nban.activity.ui.IconFontTextView>

    <TextView
        android:id="@+id/bottom_menu_item_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:text="@string/hangqing"
        android:textColor="@color/white"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/bottom_menu_item_img"
        >

    </TextView>

</androidx.constraintlayout.widget.ConstraintLayout>

这里当然应该创建多个，我省略了，就做了一个演示一下。上面是图标文字 IconFont ，下面是普通文字。当然，作为演示，上面本不应该用 IconFont标签的，那个是我自定义的标签，我会在后续中详细介绍 IconFont 的使用。

在 主 Activity 的代码中如下：

package com.pingbu.nban.activity

import android.graphics.Typeface
import android.os.Bundle
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.tabs.TabLayout
import com.pingbu.nban.R
import kotterknife.bindView


class MainActivity : AppCompatActivity() {


    private val mTabLayout: TabLayout? by bindView<TabLayout>(R.id.bottom_tab_layout)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        initView()
    }

    private fun initView(){

        val tab1 = mTabLayout!!.newTab().setCustomView(R.layout.bottom_item1)
        mTabLayout!!.addTab(tab1);

        val tab2 = mTabLayout!!.newTab().setCustomView(R.layout.bottom_item2)
        mTabLayout!!.addTab(tab2);

        mTabLayout!!.addTab(mTabLayout!!.newTab().setCustomView(R.layout.bottom_middle_item));

        val tab3 = mTabLayout!!.newTab().setCustomView(R.layout.bottom_item3)
        mTabLayout!!.addTab(tab3);

        val tab4 = mTabLayout!!.newTab().setCustomView(R.layout.bottom_item4)
        mTabLayout!!.addTab(tab4);

        val tabSelect:TabLayout.OnTabSelectedListener = object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab?) {
                val view1 = tab!!.view
                if(view1!! == null){
                    return;
                }
                val txt1 = view1.findViewById<TextView>(R.id.bottom_menu_item_txt)
                if(txt1!! == null){
                    return;
                }

                txt1.setTextColor(getResources().getColor(R.color.orang1))

                val txtImg1 = view1.findViewById<TextView>(R.id.bottom_menu_item_img)
                txtImg1.setTextColor(getResources().getColor(R.color.orang1))

            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
                val view1 = tab!!.view
                if(view1!! == null){
                    return;
                }
                val txt1 = view1.findViewById<TextView>(R.id.bottom_menu_item_txt)
                if(txt1!! == null){
                    return;
                }

                txt1.setTextColor(getResources().getColor(R.color.white))

                val txtImg1 = view1.findViewById<TextView>(R.id.bottom_menu_item_img)
                txtImg1.setTextColor(getResources().getColor(R.color.white))

            }

            override fun onTabReselected(tab: TabLayout.Tab?) {
                val view1 = tab!!.view
                if(view1!! == null){
                    return;
                }
                val txt1 = view1.findViewById<TextView>(R.id.bottom_menu_item_txt)
                if(txt1!! == null){
                    return;
                }

                txt1.setTextColor(getResources().getColor(R.color.orang1))

                val txtImg1 = view1.findViewById<TextView>(R.id.bottom_menu_item_img)
                txtImg1.setTextColor(getResources().getColor(R.color.orang1))

            }

        }

        mTabLayout!!.addOnTabSelectedListener(tabSelect)

    }


    override fun onBackPressed() {
        super.onBackPressed()
        android.os.Process.killProcess(android.os.Process.myPid());
    }
}

上面的代码显示了，如何向 TabLayout 中添加多个 自定义的Tab标签， 这里用到了  bottom_item1 bottom_item2   bottom_item3  bottom_item4  以及 bottom_middle_item ，除了 bottom_item1 的脚本代码其他的我都省略了。

同时，由于自定义控制了，标签的颜色等都没法切换，所以，我自定义了 TabLayout的OnTabSelectedListener ，自定义了选中、不选中、再次选中的字体颜色。