如何将 TabLayout 中的选项卡标题设置为具有相同的字体大小？

Question

我正在使用带有 ViewPager 的 FragmentPagerAdapter 创建带有 4 个选项卡的 TabLayout。除字体大小外，一切正常。

我尝试了以下线程中建议的不同解决方案，但对我没有任何效果：

Text size of android design TabLayout tabs

Change the text size in tab in android

这就是我的 TabLayout 目前的样子：

这些是我的相关类:

MainActivity.class

private void setupUi() {
    final MainPagerAdapter mainPagerAdapter =
            new MainPagerAdapter(getSupportFragmentManager());
    viewPager.setAdapter(mainPagerAdapter);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
}

MainPagerAdapter.class

public class MainPagerAdapter extends FragmentPagerAdapter {

    private static final String UPCOMING_TITLE = "UPCOMING";
    private static final String INTERESTS_TITLE = "INTERESTS";
    private static final String ABOUT_TITLE = "ABOUT";
    private static final String ACCOUNT_TITLE = "ACCOUNT";

    private static final Integer TAB_COUNT = 4;

    public MainPagerAdapter(final FragmentManager fragmentManager) {
        super(fragmentManager);
    }

    @Override
    public Fragment getItem(final int position) {
        switch (position) {
        case 0:
        default:
            return new UpcomingFragment();
        case 1:
            return new InterestsFragment();
        case 2:
            return new AccountFragment();
        case 3:
            return new AboutFragment();
        }
    }

    @Override
    public int getCount() {
        return TAB_COUNT;
    }

    @Override
    public CharSequence getPageTitle(final int position) {
        switch (position) {
            case 0:
                return UPCOMING_TITLE;
            case 1:
                return INTERESTS_TITLE;
            case 2:
                return ACCOUNT_TITLE;
            case 3:
                return ABOUT_TITLE;
            default:
                return null;
        }
    }
}

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:layout_scrollFlags="scroll|enterAlways"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

</android.support.v7.widget.Toolbar>

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorPrimaryDark</item>
    </style>

    <style name="AppTheme.TabLayout" parent="Widget.Design.TabLayout">
        <item name="tabIndicatorColor">?attr/colorAccent</item>
        <item name="tabIndicatorHeight">2dp</item>
        <item name="tabPaddingStart">0dp</item>
        <item name="tabPaddingTop">0dp</item>
        <item name="tabPaddingBottom">0dp</item>
        <item name="tabPaddingEnd">0dp</item>
        <item name="tabBackground">?attr/selectableItemBackground</item>
        <item name="tabSelectedTextColor">?android:textColorPrimary</item>
        <item name="android:background">@color/colorPrimary</item>
        <item name="tabTextAppearance">@style/TabLayoutTextAppearance</item>
    </style>

    <style name="TabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>

</resources>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true" >

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:theme="@style/AppTheme.AppBarOverlay">

            <include
                android:id="@+id/toolbar"
                layout="@layout/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </android.support.design.widget.CoordinatorLayout>


    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view_filter"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="right|end"
        android:layout_marginTop="?attr/actionBarSize"
        android:background="@color/md_white_1000" />

</android.support.v4.widget.DrawerLayout>

请救救我！

Answer 1

在 activity_main.xml

试试这个

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

Answer 2

可能的替代方案。

app:tabMode="scrollable"

这使得每个选项卡的标题具有相同的字体大小。但与此同时，标签将不再固定。但如果你保持 "fixed" 标签模式，在宽度较小的手机中，标题看起来很小甚至会转到下一行。因此，tabMode = "scrollable" 是 4 个选项卡的更好选择。

但是，如果您需要固定标签和每个标题的相同字体大小，请在样式中设置字体大小并确保其较小。示例：

`<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
        <item name="android:textSize">13sp</item>
        <item name="android:textAllCaps">true</item> 
    </style>`

如何将 TabLayout 中的选项卡标题设置为具有相同的字体大小？

How can I set the titles of my tabs in a TabLayout to have the same font size?

android

android-viewpager

android-tablayout

android-design-library

fragmentpageradapter