【问题标题】:How do I change the color of the hamburger menu icon?如何更改汉堡菜单图标的颜色?
【发布时间】:2019-03-14 17:26:44
【问题描述】:

首先,我想澄清一下,我愿意更改汉堡导航菜单图标本身的颜色,而不是导航菜单中的图标。

我遵循了这个教程:https://developer.android.com/training/implementing-navigation/nav-drawer#DrawerButton

因此,我在应用栏中有一个 NavMenu 图标(汉堡)。问题:图标为黑色(Vector drawable 的默认颜色)。

我创造了一种新风格:

<!-- Hamburger menu -->
<style name="MyDrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@color/colorTextTitle</item>
</style>

然后我将此样式添加到我的主题中:

<style name="customTheme" parent="Theme.AppCompat.NoActionBar">
    <!-- Hamburger menu -->
    <item name="drawerArrowStyle">@style/MyDrawerArrowToggle</item>
</style>

确保此样式是我的应用在清单中使用的样式:

<application>
    android:theme="@style/customTheme"
</application>

并且还将这个主题应用于工具栏(以防万一……)

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorToolbarBackground"
            app:theme="@style/customTheme"
            app:popupTheme="@style/customTheme"
            app:title="@string/app_name"
            app:titleTextColor="@color/colorTextBody">

        </android.support.v7.widget.Toolbar>
    </FrameLayout>

操作结果:这些都没有任何效果。汉堡包图标仍然非常黑。

谁能向我解释我犯了什么错误以及如何改变这种颜色?

【问题讨论】:

    标签: android hamburger-menu


    【解决方案1】:

    我建议你看看 Google/Android Studio 提供的示例。

    1. 创建一个名为 test-hamburger 的新项目(名称可选;-))
    2. 显然选择“抽屉”模板。我没有选中“使用 AndroidX”,但应该可以。
    3. 我选择了 MinAPI 23/Target 28。

    拥有示例应用程序后,运行它并观察工具栏为绿色,文本/色调为白色。

    打开values/styles.xml(不是v21版本,f**c那些):)

    这是现有主题的外观:

        <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
        </style>
    

    您需要在其中添加这一行: &lt;item name="drawerArrowStyle"&gt;@style/DrawerArrowStyle&lt;/item&gt;

    当然,定义样式:

        <style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
            <item name="spinBars">true</item>
            <item name="color">@android:color/holo_red_dark</item>
        </style>
    

    总而言之,你的风格现在应该是这样的:

        <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
            <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
        </style>
    
        <style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
            <item name="spinBars">true</item>
            <item name="color">@android:color/holo_red_dark</item>
        </style>
    

    运行时的样子:

    【讨论】:

    • 感谢您的详细解答。我刚做了这个,它有效。然后我继续使用 API lvl 21(我在我的项目中使用的那个)再次这样做,它仍然有效(所以至少我知道这不是问题)。我会继续搞砸这个汉堡包项目,并尝试找到实现我的主题的正确方法。
    • 确保在样式中使用正确的父级,这一点非常重要:parent="@style/Widget.AppCompat.DrawerArrowToggle" 与 parent="Widget.AppCompat.DrawerArrowToggle" 不同
    【解决方案2】:

    将其用作工具栏的样式

    <style name="Toolbar">
        <item name="android:textColorPrimary">@color/colorAccent</item>
        <item name="android:textColor">@color/colorAccent</item>
        <item name="android:textColorSecondaryInverse">@color/colorAccent</item>
        <item name="android:textColorSecondary">@color/colorAccent</item>
    </style>
    

    希望对你有帮助

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-03-17
      • 1970-01-01
      • 2017-07-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多