web-dev-qa-db-ja.com

Android：下部ナビゲーションビュー-選択したアイテムのアイコンを変更

アプリケーションに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;
            }
        });

選択した位置の下部ナビゲーションのアイコンを変更したい。ユーザーが1つのアイテムをクリックしたときに、この機能をどのように実現できますか？

（ユーザーが1つのアイテムをクリックすると、アイコンが別のアイテムに変わります）

androidandroid-layoutandroid-support-librarybottomnavigationview
35
Adarsh

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:
            }
21
Henrique César Madeira

描画可能フォルダに描画可能セレクタを作成するだけで、ビューで使用されるウィジェットの状態に応じて画像を変更できます

<?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>
59
kuljeet singh

上記の解決策が機能せず、選択したアイテムアイコンを変更できない場合は、コードに次の行を追加します。

bottomNavigationView.setItemIconTintList(null);

これにより、選択したアイテムアイコンの色合い効果が無効になります。

同じ問題がありました。 BottomNavigationView項目のチェック/選択時にアイコンを変更するためのセレクタードロウアブルを追加しました。

38
KishanSolanki124

さて、各アイテムに独自のイメージを持たせる方法を理解したかったのですが、コメントをどこに置くべきかについての混乱があり、この回答を入力したかったのです。

まず、メニューとそのアイテムを作成します。セレクターは、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" />

これが、描画可能フォルダに格納されるセレクタファイルです。

<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);

そこにあります。すべてが魅力のように機能します。

19
A. Petrizza

私はこれがセレクタードロアブルを使用するより良いアプローチであることを発見しました：-

最初に、描画可能フォルダーにxmlファイルを作成します。たとえば、xmlファイル名は、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のメニュー項目にchild_selectorを追加するだけです–

いいね：Android：icon = "@ drawable/child_selector"

例：

<?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>

アクティビティに次の行を追加する必要があります-

bottomNavigationView.setItemIconTintList(null);

幸運を。

17
Saiful Islam Sajib

セレクターを作成し、各状態のドロアブルを指定します（例：チェック状態と非チェック状態）

<?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>
3
Pehlaj

selectorメソッドをありがとう、それは私のために働く（api v26）

Originに戻す方法を疑問に思う方のために選択されていないアイコンプログラムで、これをswitch(Java)またはwhen(Kotlin)の前のOnNavigationItemSelectedListenerに追加することを検討してください：

private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
    navigation.menu.getItem(0).setIcon(R.drawable.ic_tab_home)
    navigation.menu.getItem(1).setIcon(R.drawable.ic_tab_account)
    navigation.menu.getItem(2).setIcon(R.drawable.ic_tab_trading)
    navigation.menu.getItem(3).setIcon(R.drawable.ic_tab_wallet)
    when (item.itemId) {
        R.id.navigation_home -> {
            message.setText(R.string.title_home)
            item.setIcon(R.drawable.ic_tab_home_active)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_account -> {
            message.setText(R.string.title_account)
            item.setIcon(R.drawable.ic_tab_account_active)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_trading -> {
            message.setText(R.string.title_trading)
            item.setIcon(R.drawable.ic_tab_trading_active)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_wallet-> {
            message.setText(R.string.title_wallet)
            item.setIcon(R.drawable.ic_tab_wallet_active)
            return@OnNavigationItemSelectedListener true
        }
    }
    false
}
1
Wesely

答えを見つけました。私たちは使用できます

item.setIcon(R.drawable.icon_name)

アイコンを変更するには..答えを改善しようとします

 bottomNavigationView.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    switch (item.getItemId()) {
                        case R.id.action_favorites:
                            //change the icon
                         item.setIcon(R.drawable.icon_name);
                        case R.id.action_schedules:

                        case R.id.action_music:

                    }
                    return true;
                }
            });
1
Adarsh