使用底部导航栏选项卡的不同背景色 [英] using different Background Color of Bottom NavigationBar Tab

问题描述

我将BottomNavigationView添加到项目中，并且希望每个底部选项卡具有不同的背景颜色.将不同的颜色与 android:state_selected ="true" 一起使用选择器资源文件似乎无法正常工作.我还尝试输入了更多类似android:state_focused ="true"或android:state_enabled ="true"之类的东西，不幸的是没有任何效果.

I'm adding a BottomNavigationView to a project, and I would like to have a different background color for each bottom tab.Using a different color with android:state_selected="true" in a color selector resource file doesn't seem to work.I also tried to entered more things like android:state_focused="true" or android:state_enabled="true", no effect unfortunately.

(BottomnavigationView)

(BottomnavigationView)

 <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选项卡，我也尝试过(

Tabs are highlighted when i selected ,I want BottomNavigationBar tabs like Instagram, i also tried (How to create bottom navigation bar similar to instagram) but it no help..

有人遇到过这种情况吗?

Has anyone encountered this situation?

谢谢

推荐答案

尝试这种方式

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

use Custom Action layout as menu

<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 文件夹

custom_layout will be like this in layout folder

<?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 的活动"中，您可以这样做

at Activity where you using BottomNavigationView you can do like this

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>

这篇关于使用底部导航栏选项卡的不同背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！