TabLayout顶部导航根据textview长度决定下划线长度

废话不多说，虽然很简单，但我还是想记录一下这美好的时刻

效果就不上了，因为我是真机测试的，也懒得搞这个

首先需要一个依赖，当然，这个依赖跟之前底部导航一样，都需要选择design依赖

compile 'com.android.support:design:27.1.0'

老样子，先走布局
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_goods"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#fff"
        app:tabIndicatorColor="#f00"
        app:tabSelectedTextColor="#f00"
        app:tabMode="scrollable"
        app:tabGravity="center"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabTextColor="#0f0"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_goods"
        android:background="#fff"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
</LinearLayout>

fragment_blank.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BlankFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="哈哈" />
</FrameLayout>

fragment_blank_fragment2.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BlankFragment2">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="啦啦啦啦啦啦" />

</FrameLayout>

fragment_blank_fragment3.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BlankFragment3">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="嘻" />

</FrameLayout>

style中添加一个样式

<style name="TabLayoutTextStyle">
    <item name="android:textSize">16sp</item>
    <item name="android:textAllCaps">true</item>
</style>

mainactivity.java

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private List<Fragment> list=new ArrayList<>();
    private String title[]={"哈哈","啦啦啦啦啦啦","嘻","哗哗哗","哔哩哔哩","哈哈哈哈哈哈啊哈哈哈"};
    private MyFragmentAdapter adapter;
    private TabLayout tab;
    private ViewPager vp;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tab= (TabLayout)findViewById(R.id.tab_goods);
        vp= (ViewPager) findViewById(R.id.vp_goods);
        addTabs(tab);
        //添加完所有tab后调用！！
        Utils.reflex(tab);
        initFragment();
    }

    private void initFragment() {
        BlankFragment blankFragment1=new BlankFragment();
        BlankFragment2 blankFragment2=new BlankFragment2();
        BlankFragment3 blankFragment3=new BlankFragment3();
        BlankFragment3 blankFragment4=new BlankFragment3();
        BlankFragment3 blankFragment5=new BlankFragment3();
        BlankFragment3 blankFragment6=new BlankFragment3();


        list.add(blankFragment1);
        list.add(blankFragment2);
        list.add(blankFragment3);
        list.add(blankFragment4);
        list.add(blankFragment5);
        list.add(blankFragment6);

        adapter=new MyFragmentAdapter(getSupportFragmentManager(),title,list);
        vp.setAdapter(adapter);
        tab.setupWithViewPager(vp);
    }

    public void addTabs(TabLayout tabLayout){
        tabLayout.addTab(tabLayout.newTab().setText("哈哈哈"));
        tabLayout.addTab(tabLayout.newTab().setText("啦啦啦啦啦啦"));
        tabLayout.addTab(tabLayout.newTab().setText("嘻"));
        tabLayout.addTab(tabLayout.newTab().setText("哗哗哗"));
        tabLayout.addTab(tabLayout.newTab().setText("哔哩哔哩"));
        tabLayout.addTab(tabLayout.newTab().setText("哈哈哈哈哈哈啊哈哈哈"));
    }
}

fragment就不多写了，自己写就行了

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


/**
 * A simple {@link Fragment} subclass.
 */
public class BlankFragment extends Fragment {



    public BlankFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_blank, container, false);
    }

}

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * Created by jlj on 2019/2/13.
 */

public class MyFragmentAdapter extends FragmentPagerAdapter {
    private String []title;
    private List<Fragment> list;

    public MyFragmentAdapter(FragmentManager fm, String[] title, List<Fragment> list) {
        super(fm);
        this.title = title;
        this.list = list;
    }

    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return title[position];
    }
}


最后的都是压箱底的，这个utils相当重要

import android.content.Context;
import android.support.design.widget.TabLayout;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.lang.reflect.Field;

/**
 * Created by jlj on 2019/2/13.
 */

public class Utils {
    public static void reflex(final TabLayout tabLayout) {
        //了解源码得知 线的宽度是根据 tabView的宽度来设置的
        tabLayout.post(new Runnable() {
            @Override
            public void run() {
                try {
                    //拿到tabLayout的mTabStrip属性
                    Field mTabStripField = tabLayout.getClass().getDeclaredField("mTabStrip");
                    mTabStripField.setAccessible(true);
                    LinearLayout mTabStrip = (LinearLayout) mTabStripField.get(tabLayout);
                    int dp10 = Utils.dip2px1(tabLayout.getContext(), 10);

                    for (int i = 0; i < mTabStrip.getChildCount(); i++) {
                        View tabView = mTabStrip.getChildAt(i);
                        //拿到tabView的mTextView属性
                        Field mTextViewField = tabView.getClass().getDeclaredField("mTextView");
                        mTextViewField.setAccessible(true);
                        TextView mTextView = (TextView) mTextViewField.get(tabView);
                        tabView.setPadding(0, 0, 0, 0);
                        //因为我想要的效果是   字多宽线就多宽，所以测量mTextView的宽度
                        int width = 0;
                        width = mTextView.getWidth();
                        if (width == 0) {
                            mTextView.measure(0, 0);
                            width = mTextView.getMeasuredWidth();
                        }

                        //设置tab左右间距为10dp  注意这里不能使用Padding 因为源码中线的宽度是根据 tabView的宽度来设置的
                        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
                        params.width = width;
                        params.leftMargin = dp10;
                        params.rightMargin = dp10;
                        tabView.setLayoutParams(params);
                        tabView.invalidate();
                    }

                } catch (NoSuchFieldException e) {
                    e.printStackTrace();
                } catch (IllegalAccessException e) {
                    e.printStackTrace();
                }
            }
        });
    }

    public static int dip2px1(Context context, float dipValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }
}

还有一点需要注意，很多次了，系统的东西一般都会有一个水纹效果，项目中肯定是不需要的，主要是中国人也不喜欢这个，反正我个人也不喜欢，当初因为这个水纹效果，害的我找了很多这个动画，原来是个背景，不需要的朋友，只需要在tablayout布局上添加

app:tabBackground="@null"这个就好了，其实感觉这个水纹效果还是挺不错的，就是中国人没那风情

欢迎加入qq群：490959314   一起探讨Android技术