标签栏布局活动标签文本颜色与原色相同答案

【问题标题】：Tabbar layout active tab textcolor is same as primary color标签栏布局活动标签文本颜色与原色相同
【发布时间】：2020-05-27 22:55:27
【问题描述】：

这是我的风格：

<resources>

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

  <style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
  </style>

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

  <style name="ThemeOverlay.AppCompat.navTheme">
    <!-- Color of text and icon when SELECTED -->
    <item name="colorPrimary">#ffffff</item>
    <!-- Background color when SELECTED -->
    <item name="colorControlHighlight">@color/colorPrimary</item>

  </style>

</resources>

我正在定义一个带有 tabbar 和 viewpager 的布局：

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

  <com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <com.google.android.material.appbar.MaterialToolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="?attr/colorPrimary"
      android:minHeight="?attr/actionBarSize"
      android:theme="?attr/actionBarTheme"
      android:title="@string/app_name" />

    <com.google.android.material.card.MaterialCardView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_marginLeft="4dp"
      android:layout_marginRight="4dp"
      android:layout_marginBottom="-2dp"
      android:theme="@style/Theme.MaterialComponents.DayNight"
      app:cardCornerRadius="4dp"
      app:cardElevation="4dp">
  <TextView
          android:id="@+id/moonset"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_below="@id/longi"
          android:layout_marginStart="5dp"
          android:layout_marginTop="2dp"
          android:layout_toEndOf="@+id/msicon"
          android:paddingTop="-2dp"
          android:text="@string/tv_sunst" />
      ....
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.tabs.TabLayout
      android:id="@+id/tabs"
      android:layout_width="match_parent"
      android:layout_height="40dp"
      android:background="?attr/colorPrimary"/>
  </com.google.android.material.appbar.AppBarLayout>


  <androidx.viewpager.widget.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/Theme.MaterialComponents.DayNight"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

一切正常，除了标签栏布局文本颜色中的活动按钮与背景颜色相同，因此不可见。

还需要一个建议：如您所见，我没有在 textview 中明确维护 android:textAppearence。我期待父母的主题会决定这一点。这样可以还是明确定义外观更好？

我该如何改变呢？

【问题讨论】：

标签： android android-layout android-tablayout material-components-android

【解决方案1】：

根据Material Components Library，这是从v1.1.0-alpha01 开始的正常行为。您可以通过设置TabLayout 的 normal 和 selected 文本颜色来更改默认行为，如下所示：

app:tabSelectedTextColor="@android:color/black"
app:tabTextColor="@android:color/white"

更新：根据suggestion of Mario，由于tabSelectedTextColor 已被弃用，您可以使用如下选择器（例如）：

颜色/tab_text_color_selector：

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

并将其设置为TabLayout 为tabTextColor

<com.google.android.material.tabs.TabLayout
    ...
    app:tabTextColor="@color/tab_text_color_selector"
    ...>

【讨论】：

哦...好的。我很困惑，因为我没有在 AppCompat 中看到这个
这是来自MaterialComponents 主题并且你已经在使用这个
tabSelectedTextColor 有效，但已弃用（并且未在材料组件主题中定义）。最好在tabTextColor 中使用选择器。

【解决方案2】：

TabLayout 上的文本颜色基于 tabTextColor 属性。

默认颜色由此selector定义：

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

您可以检查所选文本的颜色是?attr/colorPrimary。
您可以在布局或样式中提供自定义选择器：

<com.google.android.material.tabs.TabLayout
    app:tabTextColor="@color/my_selector"
    ..>

【讨论】：