自定义图标 - 底部导航视图

Question

我有一个 BottomNavigationView 并希望为选中和未选中状态设置自定义图标。尝试使用选择器，但它不起作用。

知道如何放置自定义图标吗？

编辑 - 将 cmets 中的代码添加到问题中

<item 
    android:id="@+id/navigation_card" 
    android:icon="@drawable/iv_home_card" 
    app:itemBackground="@drawable/navigation_card" 
    app:showAsAction="ifRoom" tools:ignore="MenuTitle" 
/>

像这样我已经添加了图标。现在对于选定状态，它使用主题颜色对其进行描边，但我想用另一个图标替换该图标。

我尝试制作选择器但没有成功

<selector 
    xmlns:android="schemas.android.com/apk/res/android"> 

    <item android:state_checked="false" 
        android:drawable="@drawable/btn_star_off_normal" /> 

    <item android:state_checked="true" 
        android:drawable="@drawable/btn_star_on_normal" /> 
</selector>

BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener = new BottomNavigationView.OnNavigationItemSelectedListener() { 
    @Override 
    public boolean onNavigationItemSelected(@NonNull MenuItem item) { 
        switch (item.getItemId()) { } 
        return false; 
    } 
};

Answer 1

BottomNavigationView 将从菜单文件中获取其图标，因此您无法从选择器可绘制对象中设置它们。但是，如果您想更改选中状态和未选中状态的颜色，可以按如下方式进行。

创建您的选择器可绘制nav_item_color_state，如下所示

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

使用如下的可绘制选择器设置itemIconTint 和itemTextColor，它会在选择时改变图标和文本的颜色。

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemIconTint="@drawable/nav_item_color_state"
        app:itemTextColor="@drawable/nav_item_color_state"
app:menu="@menu/bottom_navigation_main" />

查看来自here的文档

Answer 2

您可以简单地在drawable文件夹中创建drawable选择器，并且可以根据视图中使用的小部件的状态更改图像

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

并在底部导航菜单文件中设置此选择器

<item
    android:id="@+id/navigation_home"
    android:icon="@drawable/nav_home_selector"
    android:title="@string/tab_home_title" />

确保将此行添加到您的 java 文件中。除非您添加此行，否则此解决方案不适用于选定的图标。

bottomNavigationView.setItemIconTintList(null);

这将禁用所选项目图标的色调效果。

Answer 3

由于某种原因，“state_enabled”在我的情况下不起作用，所以我使用了下面给出的选择器。 nav_color_selector.xml

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

与BottomNavigationView一起作为

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        app:itemIconTint="@drawable/nav_color_selector"
        app:itemTextColor="@drawable/nav_color_selector"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

此代码更改了我在 bottom_nav_menu.xml 中链接的矢量可绘制对象的填充颜色