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

时间:2016-08-31 13:56:06

标签: android android-tablayout

我使用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>

问题是所选颜色,未选择不适用,它总是相同的颜色。

2 个答案:

答案 0 :(得分: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);
            }
        });

答案 1 :(得分:1)

使用以下方法更改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"/>