android设计TabLayout标签的文字大小

Posted 2023-03-06

【中文标题】android设计TabLayout标签的文字大小

【英文标题】：Text size of android design TabLayout tabs

【发布时间】：2015-10-06 21:36:51

【问题描述】：

我在更改设计库 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) 选项卡文本不再大写。

【参考方案1】：

继续使用 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 个文本视图的线性布局，但我只想在标签选择上更改一种文本视图颜色？

如果你想设置 false 那么这里应该是除了两个之外的另一个字符串：false

【参考方案2】：

<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

太棒了，兄弟，你节省了我的时间，，它在 lib 25.1.0 上工作

@Sufian，它对我不起作用，我使用与您相同的支持版本（25.1.0）。知道为什么吗？

如果您的标签文本是多行的。然后 tabLayout 它使用不同的字段来设置文本大小。请在此处查看我的答案以获得解决方案：***.com/a/48797329/700693

【参考方案3】：

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

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" />

【参考方案4】：

使用 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_
    android:layout_
    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"/>

【参考方案5】：

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://***.com/a/43156384/5973946

此代码适用于 Tablayout 更改文本颜色、字体（字体样式）以及文本大小。

【参考方案6】：

试试下面提到的截图，它也适用于我。

在我的布局xml 中，我有我的TabLayout，为TabLayout 添加了样式，如下所示：

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    style="@style/MyCustomTabLayout"
    android:layout_
    android:layout_
    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>

希望对你有用.....

【参考方案7】：

按照以下方式进行。

1.将样式添加到 XML

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

2。应用样式

找到包含 TabLayout 的 Layout 并添加样式。添加的行是粗体。

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

【参考方案8】：

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

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_
        android:layout_
        app:tabMode="fixed"
        app:tabTextAppearance="@style/TextAppearance.AppCompat.Caption" />

【参考方案9】：

XML 文件的值

<style name="tab">
    <item name="android:textSize">@dimen/_10ssp</item>
    <item name="android:textColor">#FFFFFF</item>
</style>

标签布局

<com.google.android.material.tabs.TabLayout
    android:layout_
    android:layout_
    android:layout_marginLeft="@dimen/_10sdp"
    android:layout_marginRight="@dimen/_10sdp"
    app:layout_constraintEnd_toEndOf="parent"
    app:tabTextAppearance="@style/tab"
    app:tabGravity="fill"
    android:layout_marginTop="@dimen/_10sdp"
    app:layout_constraintStart_toStartOf="parent"
   >

    <com.google.android.material.tabs.TabItem
        android:layout_
        android:layout_
        android:text="TAB 1"
        android:scrollbarSize="@dimen/_4sdp"
        />

    <com.google.android.material.tabs.TabItem
        android:layout_
        android:layout_
        android:scrollbarSize="@dimen/_6sdp"
        android:text="TAB 2" />

    <com.google.android.material.tabs.TabItem
        android:layout_
        android:layout_
        android:scrollbarSize="@dimen/_4sdp"
        android:text="TAB 3" />
</com.google.android.material.tabs.TabLayout>

【参考方案10】：

>   **create custom style in styles.xml**  <style name="customStylename"
> parent="Theme.AppCompat">
>         <item name="android:textSize">22sp</item>  <item name="android:color">colors/primarydark</item>
>     </style>
> 
>   **link to your material same name **  
> <android.support.design.widget.TabLayout  
> android:layout_
>         android:layout_ 
>         android:id="@+id/tabs"
>         app:tabTextAppearance="@style/customStylename" 
>       />

这是我的解决方案