TabLayout

修改指示器长度

public class TablayoutUtil {
    /**
     * 反射Tablyout修改指示器长度
     *
     * @param tabs
     * @param leftDip  左边距
     * @param rightDip 右边距
     */
    public static void setIndicator(TabLayout tabs, int leftDip, int rightDip) {
        Class<?> tabLayout = tabs.getClass();
        Field tabStrip = null;
        try {
            tabStrip = tabLayout.getDeclaredField("slidingTabIndicator");
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        }

        tabStrip.setAccessible(true);
        LinearLayout llTab = null;
        try {
            llTab = (LinearLayout) tabStrip.get(tabs);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }

        int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());
        int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());

        for (int i = 0; i < llTab.getChildCount(); i++) {
            View child = llTab.getChildAt(i);
            child.setPadding(0, 0, 0, 0);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
            params.leftMargin = left;
            params.rightMargin = right;
            child.setLayoutParams(params);
            child.invalidate();
        }
    }
}

自定义布局

为了适应某些需求，Tablayout布局可能需要改变，比如需要添加文本或icon，那就只能通过自定义布局修改Tablayout的布局

Kotlin代码

package com.aib.opencv.tablayout.demo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentStatePagerAdapter
import com.google.android.material.tabs.TabLayout
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    private val fragments = arrayOf(OneFragment(), OneFragment())
    private val titles = arrayOf("广东", "广西")

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

        vp.adapter = object : FragmentStatePagerAdapter(supportFragmentManager) {
            override fun getItem(position: Int): Fragment = fragments[position]

            override fun getCount(): Int = fragments.size

            override fun getPageTitle(position: Int): CharSequence? = titles[position]
        }

        tl.setupWithViewPager(vp)

        //自定义View需要放到Tablayout和ViewPager绑定之后，才生效
        fragments.forEachIndexed { index, oneFragment ->
            //遍历得到每个Tab
            val tabAt = tl.getTabAt(index)
            //设置每个Tab视图
            tabAt?.setCustomView(R.layout.tab)
        }

        //可在监听里进行UI上颜色或者文本变化修改
        tl.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabReselected(tab: TabLayout.Tab?) {
                Log.e("HLP", "Tab重新选中")
            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
                Log.e("HLP", "Tab取消选中")
            }

            override fun onTabSelected(tab: TabLayout.Tab?) {
                Log.e("HLP", "Tab选中")
            }
        })

    }
}

R.layout.tab布局如下

背景是一个shape资源，其实就是加了边框的矩形

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/shape"
    android:paddingStart="15dp"
    android:paddingTop="10dp"
    android:paddingEnd="15dp"
    android:paddingBottom="10dp"
    android:text="文本" />