android - MaterialComponents 主题中断 TabLayout

Question

我正在将我的应用程序迁移到 MaterialComponents 主题。我有一个带有滚动行为的协调器布局内的 TabLayout 的活动，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="6dp">

        <com.google.android.material.appbar.MaterialToolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light"
            app:elevation="0dp"
            app:layout_scrollFlags="scroll|enterAlways|snap" />

        <com.google.android.material.tabs.TabLayout
            android:layout_below="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.MaterialComponents.Light"
            app:tabMode="fixed"
            app:elevation="0dp" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:layout_below="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

它与 AppCompat 主题配合良好。我有 3 个选项卡，并且 3 个选项卡标题在 TabLayout 中正确显示。

现在我有三个问题：

• TabLayout 的文本是黑色的，好像 android:theme 被忽略了
• 不再有选定的选项卡指示器（它是我的强调色的条）
• 我的 3 个标签中只显示了 2 个
  • 在启动时，它们是正确对齐的
  • 如果我滚动视图分页器以显示中间页面，我仍然只在 TabLayout 中显示 2 个选项卡，但现在一个左对齐，另一个右对齐
  • 如果我再次滚动以显示第三个选项卡，仍然只有 2 个选项卡标题是 TabLayout，现在两者都左对齐

这里发生了什么？

编辑：我更好地理解了这个问题：似乎它“只是”一个颜色问题。选择的标签标题颜色与背景相同，因此我看不到它。

标签： androidandroid-tablayoutmaterial-components

Answer 1

好的，我找到了答案：主要问题是我使用 android:theme 而不是 style 来应用 TabLayout 样式。

现在我正在这样做：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/AppTheme.TabLayout"/>

这是 AppTheme.TabLayout：

<style name="AppTheme.TabLayout" parent="Widget.MaterialComponents.TabLayout.Colored">
    <item name="tabIndicatorColor">@color/colorOnPrimary</item>
</style>

正如这里所指定的，我不应该创建自己的样式来覆盖 tabIndicatorColor，因为它应该已经采用了我在 colors.xml 中定义的 colorOnPrimary。好像有bug