Android:底部导航视图 - 更改所选项目的图标

Question

我BottomNavigationView在我的应用程序中添加了像.

main.xml中

<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:itemBackground="@color/colorPrimary"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/bottom_navigation_main" />

bottom_navigation_main.xml

<?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/action_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="@string/text_favorites"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_schedules"
        android:enabled="true"
        android:icon="@drawable/ic_access_time_white_24dp"
        android:title="@string/text_schedules"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/ic_audiotrack_white_24dp"
        android:title="@string/text_music"
        app:showAsAction="ifRoom" />
</menu>

MainActivity点击

bottomNavigationView.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_favorites:
                        //need change icon of favotites here.
                    case R.id.action_schedules:

                    case R.id.action_music:

                }
                return true;
            }
        });

我想更改所选位置底部导航的图标.当用户点击一个项目时,我们如何实现此功能？

(如果用户点击了一个项目,那么图标会变为另一个项目)

Answer 1

您可以在drawable文件夹中创建可绘制选择器,并且可以根据视图中使用的窗口小部件的状态更改图像

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

Answer 2

如果以上解决方案无法让您更改所选项目图标,请在代码中添加以下行:

bottomNavigationView.setItemIconTintList(null);

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

我有同样的问题.我已经添加了选择器drawable,用于在选中/选中时更改BottomNavigationView项目的图标.

Answer 3

您需要重置图标onclick,然后在开关情况下,您只需要设置您需要更改的图标,因此只有在选择图标更改时.

Menu menu = bottomNavigationView.getMenu();
menu.findItem(R.id.action_favorites).setIcon(favDrawable);

switch (item.getItemId()) {
                case R.id.action_favorites:
                     item.setIcon(favDrawableSelected);
                case R.id.action_schedules:
                case R.id.action_music:
            }

Answer 4

我发现这是使用选择器drawable更好的方法: -

可绘制的名称是drawable文件夹中的child_selector.xml.

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

只需将其添加到bottom_navigation_main.xml中: -

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item
    android:id="@+id/navigation_child"
    android:icon="@drawable/child_selector"
    android:title="@string/title_child" />

</menu>

祝好运.

Answer 5

好吧,我想了解如何让每个项目都有自己的图像,并且在评论应该去的地方有些混乱,我想要输入这个答案.

首先创建菜单及其项目.您的选择器将进入ICON值中的那些项目.这里我们有2个选择器,每个选择器都是为其菜单项而制作的.

item
    android:id="@+id/navigation_home"
    android:icon="@drawable/navigation_home_selector"
    android:title="@string/title_home" />
item
    android:id="@+id/navigation_profile"
    android:icon="@drawable/navigation_profile_selector"
    android:title="@string/title_profile" />

现在这里是你的选择器文件,它将放在你的drawable文件夹中.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/menu_selected" android:state_checked="true"/>
    <item android:drawable="@drawable/menu" android:state_checked="false"/>
</selector>

最后一步由@ KishanSolanki124提供

将此行代码添加到BottomNavigationView.

BottomNavigationView.setItemIconTintList(null);

你有它.一切都像魅力.

Answer 6

ajay singh /sf/answers/4007427301/的上述答案帮助了我，并采用了上面的答案。

res->drawable 文件夹中的以下代码（selector_stock_bottom_nav_view.xml）

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/button_and_tab_color" android:state_checked="true" />
    <item android:color="@android:color/darker_gray" android:state_checked="false" />
</selector>

这些是我底部导航视图中的属性

<com.google.android.material.bottomnavigation.BottomNavigationView

        app:itemIconTint="@drawable/selector_stock_bottom_nav_view" //To change icon color
        app:itemTextColor="@drawable/selector_stock_bottom_nav_view" //To change text color
        app:itemTextAppearanceActive="@style/stockBottomNavigationView.Active" //To change size of text during active state
        app:itemTextAppearanceInactive="@style/stockBottomNavigationView.InActive"
        app:menu="@menu/bottom_navigation_menu"
        app:labelVisibilityMode="labeled"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        app:selectedBackgroundVisible="false"
        android:id="@+id/stock_bottom_navigation"/>

我没有在代码中的任何地方使用“BottomNavigationView.setItemIconTintList(null)”。

现在是最重要的一段代码，确保在底部导航视图的侦听器中返回“TRUE”，即，

private BottomNavigationView.OnNavigationItemSelectedListener stockBottomNavListener = new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {

            return true;

        }
    };

奖励：更改文本活动/非活动状态的大小 将以下代码放入styles.xml 文件中

    <style name="stockBottomNavigationView.InActive" parent="@style/TextAppearance.AppCompat.Caption">
        <item name="android:textSize">7sp</item>
    </style>

    <style name="stockBottomNavigationView.Active" parent="@style/TextAppearance.AppCompat.Caption">
        <item name="android:textSize">8sp</item>
    </style>

上面的答案是 stackoverflow 中与底部导航视图、图标和文本颜色/大小更改相关的各种答案的汇总。