Android完全自定義下劃線的TabLayout

一 介紹：

導航功能幾乎是所有的APP都具備的基礎功能之一，Android系統提供了TabLayout+ViewPager的組合來實現該功能。再使用之初，發現該組合真是無敵了，但是。。。總有一些UI設計師覺得原生TabLayout的下劃線樣式不符合用戶的審美，比如說，下劃線的寬度要跟文本的寬度一樣，下劃線的樣式要換成圖片等等。TabLayout在這些需求面前顯得那麼無助，程序員被迫搬磚。

WeTabLayout繼承自HorizontalScrollView，這是爲了實現當有多個Tab的時候能夠左右滑動，且當滑動的時候將選中的那個Tab移至屏幕中間。其直接父佈局爲LinearLayout，再設置Tab充滿父佈局，或者是水平自由排列的時候很方便。下劃線由Drawable繪製，這樣的話就可以隨意的更改下劃線的樣式，設置寬高、設置圖片、設置Shape等。其控件已經在應用中使用，目前來看相當穩定，之後打算用來替換原生的TabLayout；

文末有代碼連接，可自行下載使用~

爲什麼使用WeTabLayout？

1. 實現了TabLayout的基本功能。
2. 擴展了在ViewPager+WeTabLayout有多個Tab時，ViewPager左右滑動的時候默認將當前選中的Tab移動到屏幕中間。
3. 完全自定義的Indicator指示器，通俗一點就是下劃線。其寬度、高度、顏色、樣式、圖片全部支持。
4. 開關控制Indicator指示器的寬度是否跟Tab顯示的文本寬度一樣。
5. TabView支持自定義佈局或者使用默認佈局。其TabView在父佈局中的位置，以及各個TabView之間的間距，完全自定義，也可選擇TabView填充滿父佈局。
6. 最重要的是WeTabLayout的源碼簡單，可以自行定製。

注意：

1. 爲了能夠及時的發現並更正該庫所存在的問題，現邀請大家加入該微信羣中，三人行必有我師，Android技術是無止境的。
2. 當使用自定義Tab佈局的時候，其設置的padding值，不要跟屬性wtl_tab_padding_left和wtl_tab_padding_right的值衝突。
3. 默認可以不用設置TabView的自定義佈局，也就是可以不用給mTabLayout屬性賦值，如果設置自定義佈局的話，自定義佈局的背景色會被忽略掉。

有問題可以先加入QQ羣684891631再轉微信羣~

更新日誌：

• 2020-04-02：

  更新了TabView對左右padding的支持，可以隨意的設置左右的padding值，下劃線的位置不會錯亂。

二 簡單使用：

2.1 XML佈局準備：

  <WeTabLayout
        android:id="@+id/dil_tablayout"
        android:layout_width="match_parent"
        android:layout_height="56dp" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="56dp" />
    
   //自定義屬性示例。
     <WeTabLayout
        android:id="@+id/dil_tablayout"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        app:wtl_default_text_color="@color/colorPrimary"
        app:wtl_indicator_margin_bottom="10dp"
        app:wtl_indicator_width_equal_title="true"
        app:wtl_selected_text_color="@color/colorAccent"
        app:wtl_indicator_color="@color/colorAccent"
        app:wtl_selected_text_size="16sp"
        app:wtl_default_text_size="12sp"
        app:wtl_indicator_height="1dp"
        app:wtl_indicator_width="50dp"
        app:wtl_selected_text_bold="true"
        app:wtl_tab_padding_left="30dp"
        app:wtl_tab_padding_right="16dp"
        app:wtl_indicator_corner_radius="4dp"
        app:wtl_tab_fill_container="false" />   

具體字段解釋：

 <declare-styleable name="WeTabLayout">
        <!-- indicator -->
        //下劃線的顏色。
        <attr name="wtl_indicator_color" format="color" />
        //下劃線的高度。
        <attr name="wtl_indicator_height" format="dimension" />
        //下劃線的寬度。
        <attr name="wtl_indicator_width" format="dimension" />
        //下劃線距離底部的Margin。
        <attr name="wtl_indicator_margin_bottom" format="dimension" />
        //下劃線的圓角。
        <attr name="wtl_indicator_corner_radius" format="dimension" />
        //下劃線是否的寬度是否跟文本的寬度一樣。 true是。
        <attr name="wtl_indicator_width_equal_title" format="boolean" />
        //Tab被選中時的文字大小。
        <attr name="wtl_selected_text_size" format="dimension" />
        //Tab默認時的文字大小。
        <attr name="wtl_default_text_size" format="dimension" />
        //Tab被選中時的文本的顏色。
        <attr name="wtl_selected_text_color" format="color" />
        //Tab默認時的文字大小。
        <attr name="wtl_default_text_color" format="color" />
        //Tab被選中時是否加粗 true 是。
        <attr name="wtl_selected_text_bold" format="boolean" />
        //Tab是否填充滿父View，true 是。
        <attr name="wtl_tab_fill_container" format="boolean" />
        //Tab的左padding。 
        <attr name="wtl_tab_padding_left" format="dimension" />
        //Tab的右padding。
        <attr name="wtl_tab_padding_right" format="dimension" />
    </declare-styleable>

屬性使用注意：

1. wtl_indicator_width_equal_title跟wtl_indicator_width同時設置的時候，以前者爲主。

2.2 代碼設置：

//Step 1 :查找對象
WeTabLayout tabLayout = findViewById(R.id.dil_tablayout);
ViewPager viewPager = findViewById(R.id.viewpager);
String[] titles = {"移動", "四個字的", "小靈通", "這個很長電影啊", "NBA", "電影", "小知識", "籃球"};
//重要的一步。
tabLayout.attachToViewPager(viewPager, titles);

注意： 調用 tabLayout.setCurrentTab()方法設置默認選中的Tab的時候，必須在ViewPager設置Adapter之後。

2.4 屬性應用Demo：

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final WeTabLayout tabLayout = findViewById(R.id.dil_tablayout);
        ViewPager viewPager = findViewById(R.id.viewpager);
        final String[] titles = {"移動", "四個字的", "小靈通", "這個很長電影啊", "NBA", "電影", "小知識", "籃球"};
        findViewById(R.id.selected_one).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tabLayout.setCurrentTab(3);
            }
        });
        tabLayout.setTabLayoutIds(R.layout.item_sliding_tab_layout);
        tabLayout.setIndicatorBottomMargin(10);
        tabLayout.setIndicatorEqualTabText(true);
        tabLayout.setTabFillContainer(false);
        tabLayout.setCurrentTab(2);
        tabLayout.addHandleTabCallBack(new IHandleTab() {
            @Override
            public void addTab(View tab, int index) {
                //該方法再創建TabView的時候調用。
            }
        });
        tabLayout.setTabSelectedListener(new WeTabSelectedListener() {
            @Override
            public void onTabSelected(View currentTab, int position) {
                //TabView被選中的時候調用。
            }
            @Override
            public void onPreTabSelected(View preTab, int prePosition) {
                 //上一個選中的TabView。
            }
        });
    
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return CeshiFragment.newInstance();
            }

            @Override
            public int getCount() {
                return titles.length;
            }
        });
        tabLayout.attachToViewPager(viewPager, titles);
    }
}

項目地址，感覺有用的點個star~ GitHub