TabLayout的使用及使用中的問題總結

改變Tab字體顏色設置默認字體顏色：

app:tabTextColor="#ffffff"

設置字體被選中後的顏色

app:tabSelectedTextColor="#e40707"

 設置指示器顏色

app:tabIndicatorColor="#30e407"

 設置指示器高度（如果希望選項卡不顯示指示器效果只需要把指示器高度設置爲0就行了）

 app:tabIndicatorHeight="2dp"

  設置Tab背景顏色（作用效果和Background一樣）

app:tabBackground="@color/colorye"

設置Tab滾動方式

可滾動

app:tabMode="scrollable"

固定

app:tabMode="fixed"

addOnTabSelectedListener

     mytab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
//                添加選中Tab的邏輯
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
//                添加未選中Tab的邏輯
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
//                再次選中tab的邏輯
            }
        });

ViewPager預加載

mViewPager.setOffscreenPageLimit(2);

TabLayout中英文大寫改成小寫有兩種方法：

app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"

或者自己定義一個Style

<style name="TabLayoutTextStyle" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">12sp</item>
        <item name="textAllCaps">false</item>
</style>

Button解決英文全是大寫的情況是添加一個屬性：

textAllCaps="false"

TabLayout在點擊Tab的時候會出現陰影的效果，如果想去掉陰影使用一下代碼：

app:tabBackground="@color/transparent"
app:tabRippleColor="@color/transparent"

如果在切換Tab的時候想讓選中Tab中文字加粗等操作可以使用下面這個Util

public class TabUtils {

    public static void boldTab(TabLayout.Tab tab) {
        setTabStyle(tab, Typeface.DEFAULT_BOLD, 0, 0, 0, 0);
    }

    /**
     * 選中某條， 改變樣式
     * @param tabLayout
     * @param currentTab
     */
    public static void tabSelect(TabLayout tabLayout, TabLayout.Tab currentTab) {
        int tabCount = tabLayout.getTabCount();
        TabLayout.Tab tab;
        for (int i = 0; i < tabCount; i++) {
            tab = tabLayout.getTabAt(i);
            setTabStyle(tab, Typeface.DEFAULT, 0, 0, 0, 0x00000000);
        }

        setTabStyle(currentTab, Typeface.DEFAULT_BOLD, 1, 2, 2, 0x55000000);
    }

    public static void tabSelectAt(TabLayout tabLayout, TabLayout.Tab currentTab,int position){
        int tabCount = tabLayout.getTabCount();
        TabLayout.Tab tab;
        for (int i = 0; i < tabCount; i++) {
            tab = tabLayout.getTabAt(i);
            if(i != position){
                setTabStyle(tab, Typeface.DEFAULT, 0, 0, 0, 0x00000000);
            }else {
                setTabStyle(currentTab, Typeface.DEFAULT_BOLD, 1, 2, 2, 0x55000000);
            }
        }
    }

    /**
     * 通過反射去設置樣式
     * @param tab
     * @param tf
     * @param radius
     * @param dx
     * @param dy
     * @param color
     */
    public static void setTabStyle(TabLayout.Tab tab, Typeface tf, int radius, float dx, float dy, int color) {
        TextView tv = getTextView(tab);
        if (tv == null) { return;}
        //TODO 暫時不做陰影效果
//        tv.setTypeface(tf);
//        tv.setShadowLayer(radius, dx, dy, color);
    }

    private static TextView getTextView(TabLayout.Tab tab){
        try {
            Field mView = tab.getClass().getDeclaredField("mView");
            mView.setAccessible(true);
            Object mViewObj = mView.get(tab);
            Field mTextView = mViewObj.getClass().getDeclaredField("mTextView");
            mTextView.setAccessible(true);
            return (TextView) mTextView.get(mViewObj);
        } catch (Exception e) {

        }

        return null;
    }

    /**
     * 通過反射去設置下劃線樣式bufen
     *
     * @param tab
     * @param leftDip
     * @param rightDip
     */
    public static void setIndicator(TabLayout tab, int leftDip, int rightDip) {
        try {
            Field tabStrip = TabLayout.class.getDeclaredField("mTabStrip");
            tabStrip.setAccessible(true);
            LinearLayout llTab = (LinearLayout) tabStrip.get(tab);
            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();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 加粗current
     * @param tabLayout
     * @param currentTab
     */
    public static void tabBoldCurrent(TabLayout tabLayout, TabLayout.Tab currentTab) {
        int tabCount = tabLayout.getTabCount();
        TabLayout.Tab tab;
        for (int i = 0; i < tabCount; i++) {
            tab = tabLayout.getTabAt(i);
            TextView tv = getTextView(tab);
            if (tv == null) { continue;}
            tv.setTypeface(Typeface.DEFAULT);
        }

        TextView tv = getTextView(currentTab);
        if (tv == null) { return;}
        tv.setTypeface(Typeface.DEFAULT_BOLD);
    }


    public static void enableTabs(TabLayout tabLayout, Boolean enable){
        ViewGroup viewGroup = getTabViewGroup(tabLayout);
        if (viewGroup != null)
            for (int childIndex = 0; childIndex < viewGroup.getChildCount(); childIndex++)
            {
                View tabView = viewGroup.getChildAt(childIndex);
                if ( tabView != null)
                    tabView.setEnabled(enable);
            }
    }

    public static View getTabView(TabLayout tabLayout, int position){
        View tabView = null;
        ViewGroup viewGroup = getTabViewGroup(tabLayout);
        if (viewGroup != null && viewGroup.getChildCount() > position)
            tabView = viewGroup.getChildAt(position);

        return tabView;
    }

    private static ViewGroup getTabViewGroup(TabLayout tabLayout){
        ViewGroup viewGroup = null;

        if (tabLayout != null && tabLayout.getChildCount() > 0 ) {
            View view = tabLayout.getChildAt(0);
            if (view != null && view instanceof ViewGroup)
                viewGroup = (ViewGroup) view;
        }
        return viewGroup;
    }
}

在Tab切換的時候監聽進行調用：

  mTitleTab.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //設置選中加粗
                TabUtils.tabSelect(mTitleTab,tab);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

在使用TabLayout的時候，標題的Tab自動換行的解決辦法，就是設置也給Tab的寬度。

   app:tabMinWidth="@dimen/space_100"
   app:tabMaxWidth="@dimen/space_200"

 

這就是在使用TabLayout的時候遇到的一些問題及總結，寫下來是爲了下次更快的找到結果。