首页 > 解决方案 > BottomNavigationView 显示黑条

问题描述

我创建了一个应用程序,并在 android 模拟器中对其进行了多次测试。

我在我测试的多部手机中创建了一个BottomNavigationView如下所示的:

在此处输入图像描述

但是,当我在其他设备上运行它时,它看起来如下,上面和下面有这些黑线BottomNavigationView

在此处输入图像描述

我试用过的设备是三星和小米。我只想提一下,它在某些设备上运行良好,而在某些设备上则不行。似乎在大型手机上可以做到。

xml代码是:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:itemBackground="@color/colorWhite"
    app:itemIconTint="@drawable/btm_nav"
    app:itemTextColor="@drawable/btm_nav"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHeight_percent="0.08"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/menu_btm_nav" />

菜单:

<?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/nav_home"
        android:enabled="true"
        app:showAsAction="ifRoom"
        android:title="@string/MenuNav_Home"
        android:icon="@drawable/ic_general_home"/>

    <item
        android:id="@+id/nav_search"
        android:enabled="true"
        app:showAsAction="ifRoom"
        android:title="@string/MenuNav_Search"
        android:icon="@drawable/ic_search" />

    <item
        android:id="@+id/nav_profile"
        android:enabled="true"
        app:showAsAction="ifRoom"
        android:title="@string/MenuNav_Profile"
        android:icon="@drawable/ic_general_profile"/>
</menu>

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

任何想法为什么会出现这些黑线?

此外,当我增加填充时,它会增加模拟器中的黑线,但即使使用 0dp 也会显示该线。

谢谢

尝试使用以下编辑:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:itemBackground="@drawable/btm_nav_background"
    app:itemIconTint="@color/colorLightPurple"
    app:itemTextColor="@color/colorLightPurple"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHeight_percent="0.08"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/menu_btm_nav" />

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

然而,它是一样的。

解决方案:

添加android:background="@color/colorWhite"解决了问题...

标签: androidxmlbottomnavigationview

解决方案


android:color仅提供无法识别为 Drawable 的十六进制颜色,而app:itembackground需要 Drawable

更改app:itemBackground="@color/colorWhite"app:itemBackground="@drawable/btm_nav_background"

btm_nav_background.xml

<?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_black" android:state_checked="false"/>
</selector>

推荐阅读