了解菜单图标颜色的来源

Question

我目前正在研究 Google IO 2019 源代码，有一件事我不知道它的来源：汉堡菜单图标的颜色。

这是 mobile\src\main\res\layout\fragment_codelabs.xml (source link) 的预览截图：

这是汉堡菜单图标的放大图，可以很容易地看出它至少不是黑色的：

图片来源为@drawable/ic_menu：

@drawable/ic_menu(mobile\src\main\res\drawable\ic_menu.xml)(source link)的源码是

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0"
    android:tint="?colorControlNormal">
    <path
        android:fillColor="#FF000000"
        android:pathData="M3,18h18v-2L3,16v2zM3,13h18v-2L3,11v2zM3,6v2h18L21,6L3,6z" />
</vector>

所以这里 fillColor 被指定为 #FF000000，它是 100% 黑色和不透明的 (alpha FF)。然而，汉堡包菜单图标并未显示为黑色。那么，汉堡菜单图标显示的颜色究竟来自哪里？

Answer 1

在下面的xml文件中，他们设置了appbar的样式

mobile\src\main\res\layout\fragment_codelabs.xml (source)

    style="@style/Widget.IOSched.AppBar"

如果打开 mobile/src/main/res/values/styles.xml source 您可以找到样式的定义，通常的做法是在整个应用程序中使用通用样式以实现统一而不是一次性 TextViewStyle/Size/Design.

Answer 2

我试图更深入地研究样式，很可能它来自 Activity 主题的父主题之一的默认参数。我将尝试展示我是如何找到它的。

在\mobile\src\main\AndroidManifest.xml文件中，所有Activity都继承自android:theme="@style/AppTheme"
<style name="AppTheme" parent="Base.AppTheme" />
<style name="Base.AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<style name="Theme.MaterialComponents.DayNight.NoActionBar" parent="Theme.MaterialComponents.Light.NoActionBar"/>
<style name="Theme.MaterialComponents.Light" parent="Base.Theme.MaterialComponents.Light"/>
<style name="Base.Theme.MaterialComponents.Light" parent="Base.V14.Theme.MaterialComponents.Light"/>
<style name="Base.V14.Theme.MaterialComponents.Light" parent="Base.V14.Theme.MaterialComponents.Light.Bridge">
<style name="Base.V14.Theme.MaterialComponents.Light.Bridge" parent="Platform.MaterialComponents.Light">
<style name="Platform.MaterialComponents.Light" parent="Theme.AppCompat.Light"/>
<style name="Theme.AppCompat.Light" parent="Base.Theme.AppCompat.Light"/>
<style name="Base.Theme.AppCompat.Light" parent="Base.V28.Theme.AppCompat.Light"/>
<style name="Base.V28.Theme.AppCompat.Light" parent="Base.V26.Theme.AppCompat.Light">
<style name="Base.V26.Theme.AppCompat.Light" parent="Base.V23.Theme.AppCompat.Light">
<style name="Base.V23.Theme.AppCompat.Light" parent="Base.V22.Theme.AppCompat.Light">
<style name="Base.V22.Theme.AppCompat.Light" parent="Base.V21.Theme.AppCompat.Light">
<style name="Base.V21.Theme.AppCompat.Light" parent="Base.V7.Theme.AppCompat.Light">
你可以看到我们很接近<item name="android:colorControlNormal">?attr/colorControlNormal</item>，我们需要更深入。
<style name="Base.V7.Theme.AppCompat.Light" parent="Platform.AppCompat.Light">
就是这样 <item name="colorControlNormal">?android:attr/textColorSecondary</item> :)
但是，我们可以更深入，直到我们到达 <style name="Theme.Material.Light" parent="Theme.Light">
有<item name="textColorSecondary">@color/text_color_secondary</item>
text_color_secondary.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="false" android:alpha="?attr/disabledAlpha" android:color="?attr/colorForeground"/> <item android:alpha="?attr/secondaryContentAlpha" android:color="?attr/colorForeground"/> </selector>
<item name="colorForeground">@color/foreground_material_light</item>
在colors_material.xml中是<color name="foreground_material_light">@color/black</color>
阿尔法是 <item name="secondary_content_alpha_material_light" format="float" type="dimen">0.54</item>

所以，简单来说：菜单图标的颜色是默认主题 black with alpha 0.54

了解菜单图标颜色的来源

Understanding origin of the color of a menu icon

android

material-design

android-appcompat

material-components