TabLayout（Android设计库）文本颜色

Answers:

256

通过XML属性：

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabTextColor="@color/your_unselected_text_color"
        app:tabSelectedTextColor="@color/your_selected_text_color"/>

此外，还有诸如tabIndicatorColor或tabIndicatorHeight之类的属性可用于进一步的样式设置。

在代码中：

tabLayout.setTabTextColors(
    getResources().getColor(R.color.your_unselected_text_color),
    getResources().getColor(R.color.your_selected_text_color)
);

由于从API 23开始不推荐使用这种旧方法，因此可以选择：

tabLayout.setTabTextColors(
    ContextCompat.getColor(context, R.color.your_unselected_text_color),
    ContextCompat.getColor(context, R.color.your_selected_text_color)
);
— 菲乐
source
@Fe Le如果我要务实的改变怎么办？
— PriyankaChauhan
@pcpriyanka感谢您的提示，我已经用一种简单的方法在代码中定义选定和未选定的颜色来更新答案。
— 2016年
81

这是用于覆盖文本样式和所选文本颜色的代码段代码

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabTextAppearance">@style/MyCustomTabText</item>
    <item name="tabSelectedTextColor">@color/tab_text_act</item>
</style>

<style name="MyCustomTabText" parent="TextAppearance.AppCompat.Button">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@color/tab_text</item>
</style>

这是布局的代码段代码

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/MyCustomTabLayout" />
— Chuehnone
source
1
谢谢-这对我有用。就像要指出的那样，tabSelectedTextColor是选项卡下面的行的颜色，是我选择选项卡时选项卡的文本的颜色。
— 西蒙（Simon）
为什么要继承Widget.Design.TabLayout？
— SpaceMonkey
1
为什么我们必须在TabLayout上使用“样式”？如果使用“ android：theme”，为什么它不起作用？
— 2015年
@Spacemonkey，因为Widget.Design.TabLayout包含选项卡的基本样式，例如“ tabIndicatorColor”，“ tabIndicatorHeight”
— sweetrenard
@sweetrenard哦，所以它覆盖了我在“ android：theme”中指定的主题？
— SpaceMonkey
5

上面的所有答案都是正确的，但我认为最好覆盖默认样式，只更改要更改的特定元素。下面的示例将使文本变为粗体：

<style name="Widget.TabItem" parent="TextAppearance.Design.Tab">
    <item name="android:textStyle">bold</item>
</style>

然后..，

app:tabTextAppearance="@style/Widget.TabItem"
— 提那舍
source
对不起，您在哪里找到这种方式？
— Deadfish '16
4

您只需要覆盖android:textAppearance样式。因为TabLayout使用textAppearance。这是样式的小片段代码。

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Below will reference with our custom style -->
    <item name="android:textAppearance">@style/my_tab_text</item>
</style>

<style name="my_tab_text" parent="Base.TextAppearance.AppCompat">
    <item name="android:textColor">@android:color/holo_blue_dark</item>
</style>

并且，如果您不想从您的Apptheme中进行引用，则可以使用“下面的代码段”直接指定给TabLayout。

 <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextAppearance="@style/my_tab_text"
            app:tabIndicatorHeight="48dp"/>
— 莫汉
source
确保您使用AppCompact作为父级
— Moinkhan 2015年
好的，您是对的，它有效。但仅适用于“未选中”标签。所选的制表符文本对我而言始终是黑色的
— sebastian 2015年
好的，设计库中没有代码可用于在设计支持库中分配选定选项卡的textColor。因此，对于选定的标签文本颜色，您必须使用属性设置。
— Moinkhan 2015年
1

对于自定义标签，我们必须覆盖以下内容：1）app：tabTextColor // for_unselected_text“

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            style="@style/MyCustomTabLayout"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:background="?attr/colorPrimary"
            android:scrollbarSize="24sp"
            android:visibility="gone"
            app:tabTextColor="@color/white_40_percent"
            app:tabMode="scrollable" />

2）tabSelectedTextColor //用于选定的标签颜色3）tabIndicatorColor //用于标签指示的颜色

   <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="android:textColorPrimary">@color/white</item>
    <item name="tabSelectedTextColor">@color/white</item>
    <item name="tabTextAppearance">@style/TabTextStyle</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">4dp</item>
    <item name="android:tabStripEnabled">true</item>
    <item name="android:padding">0dp</item>
  </style>



<style name="TabTextStyle">
    <item name="android:fontFamily">@string/font_fontFamily_medium</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textAllCaps">true</item>
    <item name="android:textColor">@color/tab_text_color</item>
    <item name="android:textSize">16sp</item>
</style>

tab_text_color.xml

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@color/white_40_percent"android:state_selected="false"/>
  <item android:color="@color/white_100_percent"android:state_selected="true"/>
 </selector>
— 桑迪普·桑克拉
source
1

使用材料组件库中TabLayout提供的，您可以：

  • 使用自定义样式 
  <com.google.android.material.tabs.TabLayout
      style="@style/My_Tablayout"
      ..>

并根据您的风格使用tabTextColor带有选择器的。

<!-- TabLayout -->
<style name="My_Tablayout" parent="Widget.MaterialComponents.TabLayout" >
    <item name="tabTextColor">@color/tab_layout_selector</item>
</style>


<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_selected="true"/>
  <item android:alpha="0.60" android:color="?attr/colorOnSurface"/>
</selector>
  • 使用app:tabTextColor您的布局：
  <com.google.android.material.tabs.TabLayout
      app:tabTextColor="@color/tab_layout_selector"
      ..>

在此处输入图片说明

— 加布里埃尔·马里奥蒂（Gabriele Mariotti）
source
0

简单完美的方法：

在xml文件中::

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

在values-styles文件中：

注意：“ cairo_semibold”是一种外部字体，您可以将其替换为字体。

<style name="TabText" parent="TextAppearance.Design.Tab">
    <item name="android:textColor">#1f57ff</item>
    <item name="android:textSize">14sp</item>
    <item name="android:fontFamily">@font/cairo_semibold</item>
</style>
— 奥萨马阿斯塔尔
source
0

最好或简短的简单方法是使自定义应用栏像

 <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorAccent"
    app:theme="@style/myCustomAppBarTheme"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"><RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageButton
            android:id="@+id/btn_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:background="@android:color/transparent"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/txt_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"
            android:layout_toEndOf="@+id/btn_back"
            android:layout_toRightOf="@+id/btn_back"
            android:text="Title"
            android:textColor="@android:color/white"
            android:textSize="20sp"
            android:textStyle="bold" />

    </RelativeLayout>
    </android.support.v7.widget.Toolbar>
— 维萨尼·拉维（Vithani Ravi）
source
0

XML属性

<com.google.android.material.tabs.TabLayout
                    android:id="@+id/tab_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:tabIndicatorColor="@color/white"
                    app:tabBackground="@color/colorAccent"
                    app:tabSelectedTextColor="@color/white"
                    app:tabTextColor="@color/white"
                    app:tabMode="scrollable" />

以编程方式在Kotlin中

(tab_layout as TabLayout).setBackgroundColor(ContextCompat.getColor(mContext, R.color.colorPrimary))
(tab_layout as TabLayout).setSelectedTabIndicatorColor(ContextCompat.getColor(mContext, R.color.white))
(tab_layout as TabLayout).setTabTextColors(ContextCompat.getColor(mContext, R.color.white),
                ContextCompat.getColor(mContext, R.color.white))
— 伊姆兰·乔杜里（Md Imran Choudhury）
source
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.