Android BottomNavigation底部导航栏使用-Stars-One的杂货小窝

显示模式更改

BottomNavigation默认是菜单超过3个后,就只会显示已选择的item的底部文字,我们可以通过 BottomNavigation 进行更改

可选项有以下4个:


    auto

默认的逻辑(菜单超过3个后,就只会显示已选择的item的底部文字,否则就是全部item的文本都显示)


    labeled

全部item的文本都显示


    selected

只有选中item底部文字才显示


    unlabeled

所有item底部不显示文字

修改菜单文字的颜色

有时候美工的菜单文字未选中和选中的颜色不一样,需要我们设置

可以通过 itemTextColor 属性设置,如下:

 <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_width="match_parent"
        android:background="#131523"
        android:layout_height="wrap_content"
+        app:itemTextColor="@color/selector_bottom_nav_textcolor"
        app:menu="@menu/home_menu_nav"/>
selector_bottom_nav_textcolor在color文件夹里新建即可,内容如下
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#71737b" android:state_checked="false"/>
    <item android:color="@color/white" android:state_checked="true"/>
</selector>
state_checked为false则是未选中状态
修改图标颜色
需要你使用的是drawable类型的图片,才使用这种方法(一般去找个svg生成就好,如果你是有两种不同的图片,可以看下一节的方法)
在color文件夹创建selector文件来实现
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_checked="true" />
    <item android:color="@color/grayDeep" android:state_checked="false" />
</selector>
之后给bottomnav设置即可
app:itemIconTint="@color/selector_nav_icon_color"
修改选中和未选中图标
和上面的颜色步骤差不多,不过selector文件所在的文件夹不同
先直接上效果

准备两张不同状态显示的图标
在drawable文件夹中创建selector_icon_home.xml文件
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/founction" android:state_checked="false"/>
    <item android:drawable="@mipmap/founction2" android:state_checked="true"/>
</selector>
state_checked为false就是正常状态显示的图标,true则是选中状态
菜单文件中,使用上面的图标文件
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu_home" android:title="home" android:icon="@drawable/selector_icon_home"/>
    <item android:id="@+id/menu_message" android:title="message" android:icon="@drawable/selector_icon_home"/>
</menu>
为了测试方便,两个选项都是使用的上面的那个图片资源
由于BottomNavigationView默认会对图标进行着色处理,我们导致我们设置的图片不同状态效果不生效,所以要设置一下
val bottomNavigationView = findViewById<BottomNavigationView>(R.id.nav)
//取消给图标的自动着色
bottomNavigationView.itemIconTintList = null
之后就是上面的那个效果图了
使用Material You主题
上面的是之前Material Design 2的设计风格,之后Material Design 3页退出了(也就是Material You)主题,我们想使用这个主题,怎么使用呢?
其实只需要改变下BottomNavigationView的主题就可
 <com.google.android.material.bottomnavigation.BottomNavigationView
        style="@style/Widget.Material3.BottomNavigationView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/menu_nav"/>
效果如下:

注意:应该是material库的1.5.0版本之后才有的Material3的主题
implementation 'com.google.android.material:material:1.5.0-alpha04'
不过material版本更新,对gradle版本,androidx版本等都会有要求,所以升级版本可以githhub的Releases · material-components/material-components-android页面查看版本要求,不然就是容易出现版本冲突异常导致项目编译失败