带有 MaterialComponents 主题的 ActionBar 背景

Posted 2023-04-18

【中文标题】带有 MaterialComponents 主题的 ActionBar 背景

【英文标题】：ActionBar background with MaterialComponents theme

【发布时间】：2020-02-10 06:38:48

【问题描述】：

我想自定义我的 ActionBar。我的主题如下所示：

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <item name="actionBarStyle">@style/MyActionBar</item>
</style>

<style name="MyActionBar" parent="@style/ThemeOverlay.MaterialComponents.ActionBar">
    <item name="background">@drawable/actionBarBackground</item>
</style>

在值文件夹中：

<drawable name="actionBarBackground">#FFFFFFFF</drawable>

在 values-night 文件夹中：

<drawable name="actionBarBackground">#FF000000</drawable>

不知道为什么我的 ActionBar 背景颜色没有相应改变。我也尝试以不同的其他方式改变我的主题，但没有任何效果。这是我的其他尝试：

我用actionBarTheme代替了actionBarStyle。

<item name="actionBarTheme">@style/MyActionBar</item>

我也尝试过使用colorPrimary。

<item name="colorPrimary">@color/actionBarBackground</item>

我错过了什么吗？

【问题讨论】：

这可能是因为您已将颜色声明为可绘制，它们不是同一个概念。

我也试过颜色，但还是同样的问题。

您使用的是操作栏还是工具栏？

我的Activity的布局文件什么都没有。由于我的主题是 Theme.MaterialComponents.DayNight，它默认包含一个 ActionBar。

【参考方案1】：

由于您使用的是Theme.MaterialComponents.DayNight 应用主题，ActionBar 背景颜色默认由 colorPrimary 属性定义。

  <style name="AppThemeActionBar" parent="Theme.MaterialComponents.DayNight">
    <item name="colorPrimary">@color/mycolor</item>
  </style>

mycolor 在 res/values/colors.xml 中定义

<resources>
  <color name="mycolor">#xxxxxx</color>
  ...
</resources>

您还可以在应用主题中使用 actionBarStyle 属性自定义背景颜色。 比如：

  <style name="AppThemeActionBar" parent="Theme.MaterialComponents.DayNight">
      <item name="actionBarStyle">@style/Custom.ActionBar</item>
      ...
  </style>

地点：

  <style name="Custom.ActionBar" parent="Widget.MaterialComponents.Light.ActionBar.Solid">
    <item name="background">@color/mycolor</item>
  </style>

否则你可以使用 actionBarTheme 属性来覆盖背景颜色：

  <style name="AppThemeActionBar" parent="Theme.MaterialComponents.DayNight">
    <item name="actionBarTheme">@style/ThemeOverlay.ActionBar</item>
    ...
  </style>

  <style name="ThemeOverlay.ActionBar" parent="">
    <item name="colorPrimary">@color/mycolor</item>
  </style>

【讨论】：

这个不清楚，使用actionBarStyle和actionBarTheme有什么区别？

谢谢，您的第二个建议覆盖Widget.MaterialComponents.Light.ActionBar.Solid 对我有用。

@David：两者都是属性，但actionBarStyle 是一种样式，您可以在其中自定义一些属性，例如背景、标题文本样式.. 而actionBarTheme 是您可以覆盖的主题覆盖应用主题中定义的一些值，例如 colorPrimary，但仅适用于特定小部件，在本例中为 ActionBar。

显然，如果您的主题继承自 Material，actionBarStyle 将被完全忽略，唯一设置操作栏样式的方法是通过 actionBarTheme。又浪费了半天时间。

【参考方案2】：

对我来说，设置背景和 colorPrimary 都没有帮助。 显然this is the intended behavior，根据dark theme guidance 用于使用大部分屏幕的组件。他们应该使用 colorSurface 作为背景，而不是 colorPrimary 或 colorAccent。 AppBarLayouts、Toolbars 和 ActionBars 现在默认为其在深色主题中的 Surface 样式。

所以我必须为我的主题定义 colorSurface 属性才能让它工作。

<item name="colorSurface">@color/my_color_primary_dark</item>

【讨论】：

非常感谢，你太棒了，这个解决方案对我有用，因为浅原色被拾取，但对于深色，即使使用 actionbarStyle 或 actionBarTheme，也没有解决方案，跨度>

【参考方案3】：

我正在使用最新的 MDC 稳定版，这就是它在这里的工作方式。

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <item name="colorPrimary">@color/purple_500</item>
    <item name="actionBarStyle">@style/Widget.MaterialComponents.ActionBar.PrimarySurface</item>
</style>

如果您希望应用栏与您的颜色表面颜色相同，请将@style/Widget.MaterialComponents.ActionBar.PrimarySurface 更改为@style/Widget.MaterialComponents.ActionBar.Surface

【参考方案4】：

这很可能是因为这不是在应用中声明颜色的正确方式。

通常，颜色资源位于一个单一的文件中：colors.xml

此 XML 文件通常位于应用的资源文件夹中（通常为 res/values/colors.xml）

然后用 <resources> 元素声明它们作为 XML 文件的根和您的颜色资源（由 <color> 元素定义）：

<!-- Note: The XML header (aka <?xml version="1.0" ...?>) is optional -->
<resources>
    <color name="your_color_res">#FFFFFF</color>
    <!-- Your other colour resources go here -->
</resources>

然后，您可以使用以下文件格式在应用的资源中创建相同的colors.xml，为颜色资源指定限定符：

res/values-<qualifier>/colors.xml

然后可以在 XML 文件中使用 @color/ 前缀或在应用的 Java/Kotlin 代码中使用 R.color.* 来引用这些颜色。

希望这会有所帮助！