BottomNavigationView中的背景颜色更改

时间:2017-01-02 04:59:57

标签: android bottomnavigationview

我已经实现了BottomNavigationView,可以从新的支持库25.0.0获得。这是我的代码

<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="@drawable/text"
    app:itemTextColor="@drawable/text"
    app:menu="@menu/bottom_navigation_main" />

text.xml drawable

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

使用此代码,我可以在单击菜单项时更改文本颜色,但当我将同一内容应用于app:itemBackground时,它显示错误<item> tag requires a 'drawable' attribute or child tag defining a drawable

这是我为app:itemBackground

尝试过的
app:itemBackground="@drawable/text"

所以我的问题是如何更改所选菜单项的背景颜色?

5 个答案:

答案 0 :(得分:33)

medium post

找到答案
  1. 我们需要使用android:state_checked代替android:state_enabled
  2. onNavigationItemSelected内,您需要使用return true代替return false
  3. 并设置背景,我们无法在android:color中使用<item>,我们需要使用android:drawable

    这就是为app:itemTextColorapp:itemIconTint

    设置xml文件时的外观
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/colorPrimaryDark" android:state_checked="true" />
        <item android:color="@android:color/white" android:state_checked="false" />
    </selector>
    

    并设置app:itemBackground选择器

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

    此处banner_whitebanner_green是png。

答案 1 :(得分:13)

我遇到了与OP类似的问题,但有点不同。如果你把@color/color_selector这样的东西放到BottomNavigationView&#39; app:itemBackground="___"中。它会导致视图隐藏在设计面板中,并且应用程序在启动时会被粉碎。虽然只是将它设置为@color/black等常量颜色,但它可以正常工作。

为了更深入的解释,我挖掘了android api参考。现在我想我找到了可以合理解决这个问题的答案。 (可能不准确。)

问题是,您提供的内容并不完全是他们要求的内容

app:itemIconTintapp:itemTextColor要求提供十六进制颜色,而app:itemBackground要求字面Drawable。我们在<color>中撰写的colors.xml元素为ColorDrawable。它来自 Drawable ,因此它可以提供所有三个属性。

但是,当您将其更改为使用选择器时,情况会有所不同。 hex color和drawable都有相应的选择器。选择器的作用类似于您输入的资源,但结果不是原始的。它更像是一个单一用途的包装纸。您无法将十六进制颜色提供给需要 Drawable 的属性。

颜色选择器实际上是ColorStateList,提供十六进制颜色,位于res/color。您只能在此文件中使用属性android:color。如果你写android:drawable,它会提示错误 drawable选择器为StateListDrawable,提供Drawable,位于res/drawable。您应该在此处写android:drawable,但如果您编写android:color则没有错误。

android:color仅提供无法识别为 Drawable 的十六进制颜色,而app:itemBackground需要 Drawable ,所以应用程序注定失败。 (直接原因)

属性(android:colorandroid:drawable)都接受 ColorDrawable ,此处它就像设置常量颜色一样。

解决方案(和实践)是:

  • android:drawable中使用(且仅限)res/drawable/drawable_selector.xml。示例:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@color/colorAccent" android:state_checked="true" />
        <item android:drawable="@color/colorAccentDark" />
    </selector>
    
  • 当需要十六进制颜色时使用res/color/color_selector.xml(以避免混淆)。例如:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@android:color/white" android:state_checked="true"/>
        <item android:color="@color/colorPrimary" />
    </selector>
    
  • app:itemBackground提供drawable。例如:

    <android.support.design.widget.BottomNavigationView
        ...
        app:itemBackground="@drawable/drawable_selector"
        app:itemIconTint="@color/color_selector"
        app:itemTextColor="@color/color_selector"
        ... />
    

(值得注意的是,如果您使用的是Android Studio,其自动完成功能会告诉您哪些属性合法且可用,并且它不会在{{1}下的选择器中建议您android:color }}!)

答案 2 :(得分:1)

试试这是导航项目选择监听器的示例代码。希望它可以帮助你。

 @Override
  public boolean onNavigationItemSelected(final MenuItem menuItem) {
    // update highlighted item in the navigation menu
    menuItem.setChecked(true);
    mNavItemId = menuItem.getItemId();

    // allow some time after closing the drawer before performing real navigation
    // so the user can see what is happening
    mDrawerLayout.closeDrawer(GravityCompat.START);
    mDrawerActionHandler.postDelayed(new Runnable() {
      @Override
      public void run() {
        navigate(menuItem.getItemId());
      }
    }, DRAWER_CLOSE_DELAY_MS);
    return true;
  }

替代解决方案:

制作一个可绘制的文件highlight_color.xml,其中包含以下内容:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
     <solid android:color="YOUR HIGHLIGHT COLOR"/>
</shape>

制作另一个可绘制文件nav_item_drawable.xml,其中包含以下内容:

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

最后在NavView中添加app:itemBackground标记:

<android.support.design.widget.NavigationView
android:id="@+id/activity_main_navigationview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:itemIconTint="@color/black"
app:itemTextColor="@color/primary_text"
app:itemBackground="@drawable/nav_item_drawable"
app:menu="@menu/menu_drawer">

这里的highlight_color.xml文件定义了背景的可绘制颜色。稍后,此颜色drawable将分配给nav_item_drawable.xml选择器。

试试这个。

答案 3 :(得分:1)

首先使用

创建xml bottom_navigation_items
`<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item>
        <selector>
            <item
                android:drawable="@color/primary_bottom_select"
                android:state_checked="true" />
            <item
                android:drawable="@color/bottom_navigation"
                android:state_checked="false" />
        </selector>
    </item>
</ripple>`

秒:添加app:itemBackground="@drawable/bottom_navigation_items"

答案 4 :(得分:0)

一种简单的方法对我有用:

<BottomNavigationView
...
android:theme="@style/CustomTheme"/>
<style name="CustomTheme">
   <item name="android:background">@color/colorPrimary</item>
</style>