使用自定义字体更改 Tablayout 的选定选项卡颜色

Question

我正在使用 Calligraphy 库来应用自定义字体。我遇到 TabLayout 字体不适用的问题。所以我必须使用以下代码手动设置它：

        mViewPager.setAdapter(pagerAdapter);
        tabLayout.setupWithViewPager(mViewPager);
        for (int i = 0; i < pagerAdapter.getCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            if (tab != null) {
                tab.setCustomView(R.layout.tab_text);
                tab.setText(pagerAdapter.getPageTitle(i));
            }
        }

XML 文件到自定义选项卡视图

  <?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center">

    <TextView
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:gravity="center"
        android:textSize="@dimen/item_txt_size"
        android:textColor="@color/progress_color"
        android:maxLines="2"
        app:fontPath="fonts/font_regular.ttf"
        tools:ignore="MissingPrefix"
        tools:text="User Profile" />
</FrameLayout>

视图的XML：

    <android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_below="@id/map_google"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorColor="@color/progress_color"
    app:tabIndicatorHeight="@dimen/indicator_height"
    android:background="@color/actionbar_home"
    app:tabMode="fixed"
    app:tabTextColor="@android:color/white"
    app:tabSelectedTextColor="@color/progress_color"
    app:tabGravity="fill"/>

<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_below="@id/tabs"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

问题是选择的颜色和未选择的不适用，总是一样的颜色。

Answer 1

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
           @Override
           public void onTabSelected(TabLayout.Tab tab) {
            if (tab != null && tab.getCustomView() != null)
                    // set unselected color
           }
           @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                if (tab != null && tab.getCustomView() != null)
                    // set unselected color
            }

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

Answer 2

使用以下方法更改 Tabs 字体：

 protected void changeTabsFont(TabLayout tabLayout) {
        Logger.print("In change tab font");
        ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
        int tabsCount = vg.getChildCount();
        Logger.print("Tab count--->"+tabsCount);
        for (int j = 0; j < tabsCount; j++) {
            ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
            int tabChildsCount = vgTab.getChildCount();
            for (int i = 0; i < tabChildsCount; i++) {
                View tabViewChild = vgTab.getChildAt(i);
                if (tabViewChild instanceof AppCompatTextView) {
                    Logger.print("In font");
                    Typeface type = Typeface.createFromAsset(getContext().getAssets(),"Helvetica_57_Condensed.otf");
                    TextView viewChild = (TextView) tabViewChild;
                    viewChild.setTypeface(type);
                    viewChild.setAllCaps(false);
                }
            }
        }
    }

要更改选项卡文本颜色，请在 styles.xml

中定义以下样式

 <style name="tab_layout">
        <item name="android:background">@color/background_blue</item>
        <item name="tabTextColor">@color/tab_unselected</item>
        <item name="tabSelectedTextColor">@color/white</item>
        <item name="android:actionBarDivider">@color/background_blue</item>
        <item name="tabTextAppearance">?android:textAppearanceMedium</item>
        <item name="tabIndicatorHeight">4dp</item>
    </style>

并将此样式设置为您的选项卡布局：

<android.support.design.widget.TabLayout
            android:id="@+id/tabs_profile"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            style="@style/tab_layout"
            app:tabGravity="fill"/>

使用自定义字体更改 Tablayout 的选定选项卡颜色

Change selected tab color for Tablayout with custom font

android

android-tablayout