Android设计TabLayout标签的文本大小


95

我很难更改设计库tablayout(android.support.design.widget.TabLayout)标签的文本大小。

我设法通过在TabLayout中分配tabTextAppearance来更改它

app:tabTextAppearance="@style/MyTabLayoutTextAppearance"

以下样式

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

但我有2种副作用:

1)我丢失了所选标签的强调色

2)标签文本不再大写。

Answers:


186
<style name="MineCustomTabText" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">16sp</item>
</style>

使用是TabLayout这样的

<android.support.design.widget.TabLayout
            app:tabTextAppearance="@style/MineCustomTabText"
            ...
            />

工作正常。我正在使用支持库25.1.0。
苏菲安

在支持库25.3.1上工作
Luis

精湛的thax bro,您节省了我的时间,,,它在lib 25.1.0上工作
Kunal Dharaiya

@Sufian,它对我不起作用,我正在使用与您相同的支持版本(25.1.0)。知道为什么吗?
山姆

2
如果您的标签文本是多行。然后使用不同的字段为它的tabLayout设置文本大小。请在这里签出我的答案以寻求解决方案:stackoverflow.com/a/48797329/700693
Evren Ozturk

46

像以前一样继续使用tabTextAppearance,但是

1)要修复大写字母的副作用,请在您的样式中添加textAllCap:

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

2)修复选定的选项卡颜色副作用,在TabLayout xml中添加以下库属性:

app:tabSelectedTextColor="@color/color1"
app:tabTextColor="@color/color2" 

希望这可以帮助。


现在它就像一种魅力。感谢u2gilles为您迅速回答。
马尔科

@ u2gilles我在选项卡中使用了自定义布局,该选项卡是带有2个textviews的linearlayout,但是我只想更改选项卡选择中的一种textview颜色?
Erum

1
如果要设置<item name =“ android:textAllCaps”> false </ item>,则这里应该是除二进制以外的另一个字符串:<item name =“ textAllCaps”> false </ item>
CodeToLife

24

使用API​​ 22和23制作此样式:

<style name="TabLayoutStyle" parent="Base.Widget.Design.TabLayout">
    <item name="android:textSize">12sp</item>
    <item name="android:textAllCaps">true</item>
</style>

并将其应用于您的布局:

<android.support.design.widget.TabLayout
            android:id="@+id/contentTabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="@drawable/list_gray_border"
            app:tabTextAppearance="@style/TabLayoutStyle"
            app:tabSelectedTextColor="@color/colorPrimaryDark"
            app:tabTextColor="@color/colorGrey"
            app:tabMode="fixed"
            app:tabGravity="fill"/>

21

执行以下操作。

1.将样式添加到XML

    <style name="MyTabLayoutTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">14sp</item>
    </style>

2.套用样式

找到包含TabLayout的布局并添加样式。添加的行为粗体。

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        app:tabTextAppearance="@style/MyTabLayoutTextAppearance" 
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

17

试试下面提到的片段,它也对我有用。

在我有布局的布局xmlTabLayout,为TabLayout以下样式添加了样式:

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

在我style.xml已经定义了布局xml中使用的样式的情况下,检查下面添加的样式的代码:

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="android:background">YOUR BACKGROUND COLOR</item>
    <item name="tabTextAppearance">@style/MyCustomTabText</item>
    <item name="tabSelectedTextColor">SELECTED TAB TEXT COLOR</item>
    <item name="tabIndicatorColor">SELECTED TAB INDICATOR COLOR</item>
</style>

<style name="MyCustomTabText" parent="TextAppearance.AppCompat.Button">
    <item name="android:textSize">YOUR TEXT SIZE</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">@android:color/white</item>
</style>

我希望它对您有用.....


15

我有类似的问题和类似的解决方案:

1)尺寸

在xml中,您具有TabLayout,

        <android.support.design.widget.TabLayout
            ...
            app:tabTextAppearance="@style/CustomTextStyle"
            ...
        />

然后风格

        <style name="CustomTextStyle" parent="@android:style/TextAppearance.Widget.TabWidget">
           <item name="android:textSize">16sp</item>
           <item name="android:textAllCaps">true</item>
        </style>

如果您不希望大写的字符在“ android:textAllCaps”中输入false

2)选中或未选中的标签的文本颜色,

TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
        tabLayout.setTabTextColors(getResources().getColorStateList(R.color.tab_selector,null));
    } else {
        tabLayout.setTabTextColors(getResources().getColorStateList(R.color.tab_selector));
    }

然后在res / color / tab_selector.xml中

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/white" android:state_selected="true" />
<item android:color="@color/white" />


8
TabLayout  tab_layout = (TabLayout)findViewById(R.id.tab_Layout_);

private void changeTabsFont() {
    Typeface font = Typeface.createFromAsset(getActivity().getAssets(), "fonts/"+ Constants.FontStyle);
    ViewGroup vg = (ViewGroup) tab_layout.getChildAt(0);
    int tabsCount = vg.getChildCount();
    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 TextView) {
                ((TextView) tabViewChild).setTypeface(font);
                ((TextView) tabViewChild).setTextSize(15);

            }
        }
    }
}

这段代码适用于我使用tablayout的代码。它将改变字体的大小,并改变字体样式。

这也对你们有帮助,请检查此链接

https://stackoverflow.com/a/43156384/5973946

此代码适用于Tablayout更改文本颜色,字体类型(字体样式)以及文本大小。


0

我使用的是Android Pie,但似乎没有任何效果,因此我使用了app:tabTextAppearance属性。我知道这不是一个完美的答案,但可能会对某人有所帮助。

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabTextAppearance="@style/TextAppearance.AppCompat.Caption" />
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.