java - 使用底部导航栏选项卡的不同背景颜色

Question

我正在向项目添加 BottomNavigationView，并且我希望每个底部选项卡具有不同的背景颜色。在颜色中使用 android:state_selected="true" 的不同颜色选择器资源文件似乎不起作用。我还尝试输入更多内容，例如 android:state_focused="true"或 android:state_enabled="true"，不幸的是没有效果。

(底部导航 View )

 <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:itemIconTint="@color/menu_txt_color"
        app:itemTextColor="@color/menu_txt_color"
        android:background="@drawable/bnv_tab_item_foreground"
        app:layout_constraintBottom_toTopOf="@+id/guideline14"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/navigation" />

(颜色选择器)

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/add_child" android:state_checked="true" android:state_pressed="true"/>
    <item android:drawable="@color/light_blue" android:state_checked="false"/>

</selector>

(我的菜单资源)

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <item
        android:id="@+id/tab1"
        android:layout_height="wrap_content"
        android:icon="@drawable/baby3"
        android:checked="true"
        android:title="hello"
        app:showAsAction="always|withText" />

    <item
        android:id="@+id/tab2"
        android:icon="@drawable/baby2"
        android:title="heelo2"
        app:showAsAction="always|withText|collapseActionView" />


    <item
        android:id="@+id/tab3"
        android:checkable="false"
        android:icon="@drawable/baby2"
        android:title="hello 3"
        app:showAsAction="always|withText" />

    <item
        android:id="@+id/tab4"
        android:checkable="false"
        android:icon="@drawable/baby3"
        android:title="heelo 4"
        app:showAsAction="always|withText" />

</menu>

当我选择时，选项卡会突出显示，我想要像 Instagram 一样的 BottomNavigationBar 选项卡，我也尝试过(How to create bottom navigation bar similar to instagram)，但没有帮助..

有人遇到过这种情况吗？

谢谢

Answer 1

试试这个方法

使用自定义操作布局作为菜单

<item
    android:id="@+id/nav_1"
    android:title=""
    app:actionLayout="@layout/custom_layout"/>

<item
    android:id="@+id/nav_2"
    android:title=""
    app:actionLayout="@layout/custom_layout"/>

<item
    android:id="@+id/nav_3"
    android:title=""
    app:actionLayout="@layout/custom_layout"/>

<item
    android:id="@+id/nav_4"
    android:title=""
    app:actionLayout="@layout/custom_layout"/>

<item
    android:id="@+id/nav_5"
    android:title=""
    app:actionLayout="@layout/custom_layout"/>

custom_layout 在 layout 文件夹中将像这样

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_gravity="center_vertical"
        android:background="@drawable/selector"
        android:layout_weight="1"
        android:gravity="center_vertical"/>

</LinearLayout>

在使用 BottomNavigationView 的 Activity 中，您可以这样做

try{
    View view = navigationView.getMenu().findItem(R.id.nav_1).getActionView();
            Button button = (Button) view.findViewById(R.id.button);
             //button.setOnClickListener(this);
             // similarly for others menu in BottomNavigationView
        } catch (Exception e) {
            AppLogger.getInstance().writeException(e);
        }

更新

selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@color/Primary" />
    <item android:state_focused="false" android:color="@color/IconsColor" />
    <item android:state_selected="false" android:color="@color/IconsColor" />
    <item android:state_focused="true" android:color="@color/Primary" />
    <item android:state_pressed="true" android:color="@color/white" />
    <item android:color="@color/tabsScrollColor" />
</selector>