別費勁了，用第三方庫! SmartTabLayout

使用支持更多自定義的SmartTabLayout.有我們想要的自定義下劃線寬度屬性。

1. 添加依賴

    // smarttablayout
    implementation 'com.ogaclejapan.smarttablayout:library:1.6.1@aar'

2. 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=".modifyTablayoutIndicator.MondifyActivity">


    <com.ogaclejapan.smarttablayout.SmartTabLayout
        android:id="@+id/smart_tablayout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/colorPrimary"
        app:stl_clickable="true"
        app:stl_customTabTextLayoutId="@layout/view_tab_text"
        app:stl_distributeEvenly="true"
        app:stl_dividerThickness="0dp"
        app:stl_indicatorColor="@color/colorAccent"
        app:stl_indicatorGravity="bottom"
        app:stl_indicatorInterpolation="linear"
        app:stl_indicatorThickness="2dp"
        app:stl_indicatorWidth="20dp"
        app:stl_overlineThickness="0dp"
        app:stl_titleOffset="auto_center"
        app:stl_underlineThickness="0dp">

    </com.ogaclejapan.smarttablayout.SmartTabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</LinearLayout>

3. SmartTabLayout中并沒有設置文本選中和未選中Tab時的效果，我們可以通過app:stl_customTabTextLayoutId屬性引入自定義設置。

view_tab_text.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab_text"
    style="@style/Tabtext"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:paddingLeft="20dp"
    android:paddingRight="20dp">
</TextView>

styles.xml

    <style name="Tabtext">
        <item name="android:textColor">@color/selector_tab_text</item>
        <item name="android:textSize">20dp</item>
    </style>

selector_tab_text.xml
在這里設置選中tab的字體顏色，和未選中tab的字體顏色。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/holo_blue_light" android:state_selected="true" />
    <item android:color="@android:color/holo_gray_light" />
</selector>

4. 因為引用了自定義Tab布局，所以原生布局帶有的Tab點擊效果消失（類似于水波紋）。

我們可以在 view_tab_text.xml 文件中添加想要的水波紋效果。

 android:foreground="@drawable/ripple_app_color"

ripple_app_color.xml: 水波紋效果

<?xml version="1.0" encoding="utf-8" ?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#292421">
</ripple>

5. Activity

public class MondifyActivity extends AppCompatActivity {

    private SmartTabLayout mSmartTablayout;
    private ViewPager mViewPager;
    private List<String> titles = new ArrayList<>();
    private List<Fragment> fragments = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mondify);
        initView();
        initSet();
    }

    private void initView() {
        mSmartTablayout = (SmartTabLayout) findViewById(R.id.smart_tablayout);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
    }

    private void initSet() {

        titles.add("aaaa");
        titles.add("bbbb");
        titles.add("cccc");
        titles.add("dddd");
        titles.add("eeee");
        titles.add("ffff");

        for (int i = 0; i < titles.size(); i++) {
            fragments.add(new BlankFragment());
        }

        MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(adapter);
        mSmartTablayout.setViewPager(mViewPager);


    }

    class MyAdapter extends FragmentPagerAdapter {

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

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

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

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return titles.get(position);
        }
    }

}

6. 完成效果圖

自定義smartTabLayout.gif

7. 簡單的SmartTabLayout布局

但是選項卡沒有定義選中后的顏色，必須自定義選項卡才可以

<?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=".modifyTablayoutIndicator.SmartActivity">

    <com.ogaclejapan.smarttablayout.SmartTabLayout
        android:id="@+id/smartTabLayout"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        app:stl_indicatorGravity="bottom"
        app:stl_indicatorInterpolation="smart"
        app:stl_indicatorThickness="2dp"
        app:stl_distributeEvenly="true"
        app:stl_dividerThickness="0dp"
        app:stl_indicatorColor="@color/colorPrimary"
        app:stl_indicatorWidth="20dp">


    </com.ogaclejapan.smarttablayout.SmartTabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>


</LinearLayout>

效果圖

簡單smartTabLayout.gif