Android 修改TabLayout選中狀態字體大小

前言

TabLayout對於我們來說並不陌生，大部分項目都會使TabLayout+Viewpager+Fragment展示首頁列表內容，一般情況下，只會設置選中時tab顏色改變，並不會設置字體大小的改變，這些從TabLayout的屬性亦可知。通常情況下，如果需要改變選中tab的字體大小，一般都是去引用第三方庫去實現這種效果，但是又覺得這種做法得不償失。通過閱讀TabLayout源碼可知，可以設置自定義tab來實現選中字體大小變大效果，因此本篇主要是通過自定義tabview來實現選中字體大小問題。

分析

• 當選中狀態時,TabLayout回調接口會回調Tab對象，此時設置自定義view即可
• 默認未選中狀態下，tab可自定義view，亦可使用默認狀態的，本文采用默認狀態下的tab

自定義Tab

通過閱讀TabLayout源碼，TabLayout是通過繼承HorizontalScrollView實現滑動tab的效果，監聽ViewPager的滑動，操作其內部類TabLayout.Tab實現切換tab。其內部操作內部類Tab，包含TabView，TabView繼承LinearLayout,內包含兩個控件，Imageview和TextView，主要是TextView設置Tabname。通過分析因此我們可以通過自定義Textview或者LinearLayout來實現改變字體大小。通過前面分析，監聽tab切換選中狀態回調：

選中狀態

@Override
    public void onTabSelected(TabLayout.Tab tab) {
        TextView textView = new TextView(getActivity());
        float selectedSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 16, getResources().getDisplayMetrics());
        textView.setTextSize(TypedValue.COMPLEX_UNIT_SP,selectedSize);
        textView.setTextColor(getResources().getColor(R.color.color_eb1e03));
        textView.setText(tab.getText());
        tab.setCustomView(textView);
    }

說明：1、TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 16, getResources().getDisplayMetrics()) 這個方法是格式轉換，因爲最後要轉換爲sp格式（想要的是16sp）
2、textView.setTextSize(TypedValue.COMPLEX_UNIT_SP,selectedSize)這個方法是設置字體格式爲sp格式，目的是與普通未選中的tab格式一致

未選中狀態

未選中狀態處理有兩種方式，第一種是同選中狀態一樣設置，第二種方式是通過設置默認樣式，並且設置自定義view爲空實現。本文選用第二種方式實現。

@Override
    public void onTabUnselected(TabLayout.Tab tab) {
        tab.setCustomView(null);
    }

<style name="TabText">
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">@color/color_3a3a3a</item>
    </style>

<android.support.design.widget.TabLayout
            android:id="@+id/tl_channel"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"
            app:tabBackground="@color/white"
            app:tabIndicatorHeight="0dp"
            app:tabMode="scrollable"
            app:tabTextAppearance="@style/TabText" />

默認選中Tab

完成上述步驟，只有當點擊tab切換的時候纔會實現選中的tab文字字體稍大和變色，但是我們是通過監聽tab切換來實現字體改變效果的，因此默認選中的tab並不會改變。因此需要單獨處理，首先取到默認選中的tab，然後再通過設置該tab的自定義view即可。

/**
     * Returns the tab at the specified index.
     */
    @Nullable
    public Tab getTabAt(int index) {
        return (index < 0 || index >= getTabCount()) ? null : mTabs.get(index);
    }

    /**
     * Returns the position of the current selected tab.
     *
     * @return selected tab position, or {@code -1} if there isn't a selected tab.
     */
    public int getSelectedTabPosition() {
        return mSelectedTab != null ? mSelectedTab.getPosition() : -1;
    }

mTabLayout.getTabAt(0)

說明：上面兩個方法是源碼中的方法，如果已經確定默認選中某個tab的情況下使用第一個方法即可，如果未知的情況下，通過第二個方法獲取選中的tab然後再去調用第一個方法。