png中的图标用于底部导航栏android

Posted 2023-02-22

【中文标题】png中的图标用于底部导航栏android

【英文标题】：Icon in png for bottom navigation bar android

【发布时间】：2020-06-14 15:31:24

【问题描述】：

在我的底部导航栏中，我在菜单 XML 中使用了一个图标，图标颜色在选择时随主题颜色而变化。

在选项卡单击图标完全改变后，我完全不知道为什么 png 图像会发生这种情况。

底部导航

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_
        android:layout_
        android:layout_gravity="bottom"
        android:background="@color/white"
        app:labelVisibilityMode="labeled"
        app:itemBackground="@color/transparent"
        app:itemTextColor="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_navigation_main" />

选择器

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_compas"
        android:state_checked="false"/>
    <item android:drawable="@drawable/discover_green"
        android:state_enabled="true"/>
</selector>

Bottom_nav_menu

 <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
        <item
            android:id="@+id/chatMenuFragment"
            android:enabled="true"enter code here
            android:icon="@drawable/chat_selector"
            android:title="Chat"
            app:showAsAction="always" />
        <item
            android:id="@+id/contactsFragment"
            android:enabled="true"
            android:icon="@drawable/people_selector"
            android:title="People"
            app:showAsAction="always" />
        <item
            android:id="@+id/discoverFragment"
            android:enabled="true"
            android:icon="@drawable/discover_selector"
            android:title="Discovery"
            android:backgroundTint="@color/white"
            app:showAsAction="always|withText" />
        <item
            android:id="@+id/myProfileFragment"
            android:enabled="true"
            android:icon="@drawable/user_selector"
            android:title="My"
            app:showAsAction="always|withText" />
    </menu>

截图

选择前：

选择后：

【问题讨论】：

你的discover_greendrawable 是什么？

我看不到你的截图，和链接一样。你能重新上传一下吗？

选择前i.stack.imgur.com/cbmEU.png i.stack.imgur.com/m3gLo.png后

请显示您禁用和启用的指南针图标。我几乎可以肯定指南针内的空白是白色的，但不是透明的。

ic_compass ibb.co/SnjFvWsdiscover_green ibb.co/ns8N58H

【参考方案1】：

我遇到了类似的问题，问题是默认情况下，底部导航视图会为可绘制对象添加色调并填充不透明的所有内容（例如您的资产的情况）。

尝试添加这一行 bottomNavigationView.itemIconTintList = null

【参考方案2】：

您必须同时创建彩色图标和简单图标，并且在选择时您必须将图标形式从纯色更改为彩色，而在未选择时您必须将彩色图标更改为纯色图标，这是最简单的方法。

【参考方案3】：

您的问题源于discover_green.png 文件没有透明区域。 So when the menu item is selected the green tint is applied to the whole image hence you see a green circle.

但是在ic_compas.png 中，除了罗盘之外的所有内容都是透明的，这意味着如果您将其用作icon，则图像中的罗盘将在选中时变为绿色。为此，您必须将Discovery menu item 修改为

       <item
        android:id="@+id/discoverFragment"
        android:enabled="true"
        android:icon="@drawable/ic_compas"
        android:title="Discovery"
        app:showAsAction="always|withText" />

如果未选择项目，这将给您一个灰色的指南针，当您选择项目时，这将给您一个绿色的指南针。

【参考方案4】：

问题是选中状态对图标的整个不透明部分应用颜色过滤器。要修复您选择的图标，您必须使绿色圆圈上的箭头透明而不是白色。请设计师修改或自行在某个编辑器中修改。

【参考方案5】：

“@drawable/discover_green”检查这个drawble，是不是你按下指南针后得到的？

您正在使用可绘制的状态列表，因此当您按下指南针时，图标会变为discover_green，它与您定义的相同。 解决方案是完全删除状态列表drawble并仅使用图标或将绿点图标更改为您想要使用的东西。

【讨论】：

选中前i.stack.imgur.com/cbmEU.png后i.stack.imgur.com/m3gLo.png谢谢回复。这些屏幕截图可以帮助你找到我的问题

是的，他们做到了，以易于理解的方式提问是一个好习惯，如果我的回答对您有帮助，请点赞

有没有办法让底部导航的图标设计不会改变。它在我的图标中使用了自己的主题颜色，这就是图标完全改变的原因

按下后它改变的图标是你在xml资源中定义的，它不是自己做的，你可以简单地不使用状态列表drawble来摆脱它。