如何使TabLayout的文本加粗显示

Question

我正在使用 Android Design Support 库中的 TabLayout 并希望美化其文本（标题）。具体来说，我想让它加粗。如何仅通过 XML 实现？

<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="@color/accent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="3dp" />

- Vahid Amiri

Answer 1

首先必须将此内容添加到styles.xml中：

<style name="TabLayoutTextStyle">
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">bold</item>
</style>

即使您不想改变文本大小，必须将其包含在样式中，否则将不会显示任何内容。

然后，必须使用app：tabTextAppearance而不是style属性将样式应用于TabLayout！

<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="@color/accent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="3dp" 
app:tabTextAppearance="@style/TabLayoutTextStyle" />

要启用全大写，您可以将以下内容添加到TabLayoutTextStyle中：

<item name="android:textAllCaps">true</item>

- Vahid Amiri

---

它崩溃了，但当我在样式中也声明textColor时，它能够工作。 - Darpan

Answer 2

1. One option is to add In styles.xml

     <item name="android:textStyle">bold</item> 
   

   inside "TextAppearance.Design.Tab" with same name as parent

   <style name="TextAppearance.Design.Tab" parent="TextAppearance.Design.Tab">
     <item name="android:textSize">15sp</item>
     <item name="android:textStyle">bold</item>
     <item name="android:textColor">?android:textColorSecondary</item>
     <item name="textAllCaps">true</item>
     <item name="android:singleLine">true</item>
   </style>
   

2. Other option : inside your layout direct to your style - lets say you call it myTabLayoutStyle

    style="@style/myTabLayoutStyle"
   

并且在那个样式里再次重定向到其他样式，仅用于文本外观：

      <item name="tabTextAppearance">@style/myTabTextStyle</item>

就像这样：

  <android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    style="@style/myTabLayoutStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolbar"
    android:background="?attr/colorPrimary"
    android:elevation="600dp"
    android:minHeight="?attr/actionBarSize"
    app:tabGravity="fill"
    android:singleLine="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

在styles.xml内：

  <style name="myTabLayoutStyle" parent="Widget.Design.TabLayout">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">4dp</item>
    <item name="tabPaddingStart">3dp</item>
    <item name="tabPaddingEnd">3dp</item>
    <item name="android:singleLine">true</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
    <item name="tabTextAppearance">@style/myTabTextStyle</item>
  </style>

   <style name="myTabTextStyle">
       <item name="android:textSize">15sp</item>
       <item name="android:textStyle">bold</item>
       <item name="android:textColor">?android:textColorSecondary</item>
       <item name="textAllCaps">true</item>
       <item name="android:singleLine">true</item>
  </style>

- Udi Reshef

Answer 3

您需要声明以下样式：

<style name="TabLayoutTextStyle">
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">@color/black</item>
</style>

现在，您只需要像这样使用它：

然后，必须使用app:tabTextAppearance而不是style属性将样式应用于TabLayout！

<android.support.design.widget.TabLayout
     android:layout_width="match_parent"
     app:tabTextColor="@color/white"
     app:tabSelectedTextColor="@color/white"
     app:tabIndicatorColor="@color/accent"
     android:layout_height="wrap_content"
     app:tabTextAppearance="@style/TabLayoutTextStyle" />

- Armin Haghighi

Answer 4

在styles.xml中添加TabLayout文本样式。

---

<style name="TabLayoutTextStyle">
    <item name="android:textStyle">bold</item>
</style>

将TabLayoutTextStyle设置为您的TabLayout属性的样式。

---

<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="@color/accent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="3dp" 
style="@style/TabLayoutTextStyle" />

- Love Bdsobuj

---

请点击此链接，它可能有效... 在TabLayout上设置文本样式 - Love Bdsobuj

Answer 5

这是正确的做法。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:baselineAligned="false">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabTextAppearance="@style/TextAppearance.Bold"
        app:tabTextColor="@color/grey"
        app:tabSelectedTextColor="@color/black" />

</LinearLayout>

- JPM