Android BottomNavigationView 底部导航栏使用详解

已于 2025-03-18 17:37:17 修改
阅读量3.9k 收藏 21
点赞数 10
文章标签： android
于 2024-11-25 14:34:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Billy_Zuo/article/details/143973168
版权

在这里插入图片描述

一、BottomNavigationView简介

BottomNavigationView是官方提供可以实现底部导航的组件，最多支持5个item，主要用于功能模块间的切换，默认会包含动画效果。
官方介绍地址：BottomNavigationView
在这里插入图片描述

二、使用BottomNavigationView

activity_main.xml布局如下：

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

    <FrameLayout
        android:id="@+id/navFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navBottomView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/main_nav_bottom_menu" />

</LinearLayout>

res中创建menu文件夹，并新建main_nav_bottom_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/item_home"
        android:icon="@drawable/main_home"
        android:title="首页" />

    <item
        android:id="@+id/item_sport"
        android:icon="@drawable/main_sport"
        android:title="运动" />

    <item
        android:id="@+id/item_device"
        android:icon="@drawable/main_device"
        android:title="设备" />

    <item
        android:id="@+id/item_my"
        android:icon="@drawable/main_my"
        android:title="我的" />

</menu>

对应的图片文件，main_home.xml如下：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="@color/color_D3D3D3"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="@android:color/white"
        android:pathData="M10,20v-6h4v6h5v-8h3L12,3 2,12h3v8z" />

</vector>

main_sport.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:autoMirrored="true"
    android:tint="@color/color_D3D3D3"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="@android:color/white"
        android:pathData="M13.49,5.48c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM9.89,19.38l1,-4.4 2.1,2v6h2v-7.5l-2.1,-2 0.6,-3c1.3,1.5 3.3,2.5 5.5,2.5v-2c-1.9,0 -3.5,-1 -4.3,-2.4l-1,-1.6c-0.4,-0.6 -1,-1 -1.7,-1 -0.3,0 -0.5,0.1 -0.8,0.1l-5.2,2.2v4.7h2v-3.4l1.8,-0.7 -1.6,8.1 -4.9,-1 -0.4,2 7,1.4z" />

</vector>

main_device.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="@color/color_D3D3D3"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="@android:color/white"
        android:pathData="M17,1H7C5.9,1 5,1.9 5,3v18c0,1.1 0.9,2 2,2h10c1.1,0 2,-0.9 2,-2V3C19,1.9 18.1,1 17,1zM17,18H7V6h10V18zM16,10.05l-1.41,-1.41l-3.54,3.54l-1.41,-1.41l-1.41,1.41L11.05,15L16,10.05z" />

</vector>

main_my.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="@color/color_D3D3D3"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="@android:color/white"
        android:pathData="M12,12c2.21,0 4,-1.79 4,-4s-1.79,-4 -4,-4 -4,1.79 -4,4 1.79,4 4,4zM12,14c-2.67,0 -8,1.34 -8,4v2h16v-2c0,-2.66 -5.33,-4 -8,-4z" />

</vector>

三、BottomNavigationView属性设置

1、labelVisibilityMode：文字显示模式

auto（默认）、selected（点击item选中时显示文字）、Labeled（默认显示所有item文字）、unlabeled（无标签文字）

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navBottomView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:labelVisibilityMode="auto"
        app:menu="@menu/main_nav_bottom_menu" />

在这里插入图片描述

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navBottomView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:labelVisibilityMode="selected"
        app:menu="@menu/main_nav_bottom_menu" />

在这里插入图片描述

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navBottomView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/main_nav_bottom_menu" />

在这里插入图片描述

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navBottomView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:labelVisibilityMode="unlabeled"
        app:menu="@menu/main_nav_bottom_menu" />

在这里插入图片描述

2、itemTextColor：修改文字选中和未选中的颜色

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navBottomView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:labelVisibilityMode="labeled"
        app:itemTextColor="@color/main_item_text_selector"
        app:menu="@menu/main_nav_bottom_menu" />

在这里插入图片描述
main_item_text_selector.xml

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

3、itemIconTint：修改图标选中和未选中的颜色

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navBottomView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:labelVisibilityMode="labeled"
        app:itemTextColor="@color/main_item_text_selector"
        app:itemIconTint="@color/main_item_text_selector"
        app:menu="@menu/main_nav_bottom_menu" />

在这里插入图片描述

4、itemRippleColor：点击后的水波纹颜色

如果不想要水波纹效果，设置app:itemRippleColor=“@null”

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navBottomView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:labelVisibilityMode="labeled"
        app:itemTextColor="@color/main_item_text_selector"
        app:itemIconTint="@color/main_item_text_selector"
        app:itemRippleColor="@color/color_ED6C40"
        app:menu="@menu/main_nav_bottom_menu" />

在这里插入图片描述

5、itemTextAppearanceActive：设置文本选中的style风格

itemTextAppearanceInactive:设置文本未选中的style风格

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navBottomView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:labelVisibilityMode="labeled"
        app:itemTextColor="@color/main_item_text_selector"
        app:itemIconTint="@color/main_item_text_selector"
        app:itemTextAppearanceActive="@style/MainItemTextSelectStyle"
        app:itemTextAppearanceInactive="@style/MainItemTextUnSelectStyle"
        app:menu="@menu/main_nav_bottom_menu" />

在这里插入图片描述
styles.xml如下：

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="MainItemTextSelectStyle" >
        <item name="android:textSize">15sp</item>
    </style>
    <style name="MainItemTextUnSelectStyle" >
        <item name="android:textSize">15sp</item>
    </style>
</resources>

6、itemHorizontalTranslationEnabled

在labelVisibilityMode为labeled时，item是否水平平移

7、elevation：控制控件顶部的阴影

8、itemIconSize：图标大小，默认24dp

9、itemBackground：设置item条目背景

四、取消BottomNavigationView长按吐司Toast

在这里插入图片描述

        //取消长按吐司，返回true表示消费了事件，不会显示Toast
        (mViewBinding.navBottomView.getChildAt(0) as ViewGroup).children.forEach {
            it.setOnLongClickListener { true }
        }

五、添加角标

     //添加角标
        val itemMyBadge = mViewBinding.navBottomView.getOrCreateBadge(R.id.item_my)
        itemMyBadge.number = 5

在这里插入图片描述
更新角标数字：

  itemMyBadge.number = 3

移除角标：

mViewBinding.navBottomView.removeBadge(R.id.item_my)

修改角标BadgeDrawable的背景颜色

  itemMyBadge.backgroundColor = resources.getColor(R.color.purple_500, null)

或者

itemMyBadge.backgroundColor = ContextCompat.getColor(mContext,R.color.purple_500)

六、item条目的点击事件

     mViewBinding.navBottomView.setOnItemSelectedListener {
            when (it.itemId) {
                R.id.item_home -> {
                    ToastUtils.showShort("点击首页")
                }

                R.id.item_sport -> {
                    ToastUtils.showShort("点击运动")
                }

                R.id.item_device -> {
                    ToastUtils.showShort("点击设备")
                }

                R.id.item_my -> {
                    ToastUtils.showShort("点击我的")
                }
            }
            true
        }

参考文档：
Android BottomNavigationView 全部配置

Billy_Zuo
关注
Android Studio —— BottomNavigationView（模拟支付宝底部导航）
01-24 3391
效果   源码     代码过程 步骤1: 主界面垂直线性布局,加入ViewPager、BottomNavigationView两个控件。 加入5张图片作为底部切换的图标,创建menu文件及xml文件,将5张图片加入到xml内item。 在BottomNavigationView中加入menu选项,将上面的xml加入。 (此时可以查看到界面底部的5个按钮,并可点击。)
BottomNavigationView使用
咸老师的博客
03-30 368
如果是四个按钮. 主要是3个文件.和四个按相对应的java与xml配对的8个文件, 共计11个文件 implementation 'com.android.support:design:28.0.0' 主要是3个: MainActivity.java ; activity_main.xml 和菜单按钮navigation.xml(放在menu目录下.不要放在layout下面); 8个...
底部导航栏控件BottomNavigationView的使用和修改样式
11-14
底部导航栏控件BottomNavigationView的使用和修改样式 效果：http://blog.csdn.net/qq_37902949/article/details/78528787
Android 使用BottomNavigationView实现底部导航栏
02-02
Android 使用BottomNavigationView实现底部导航栏，在Android Support Library 25 中增加了 BottomNavigationView 控件，官方为我们提供了这样这一个控件。
Androidstudio使用BottomNavigationView 实现底部导航栏
最新发布
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
03-04 1641
在 Android 开发中，BottomNavigationView 是一个常用的组件，用于实现底部导航栏。它通常与Fragment结合使用，以便在用户点击不同的导航项时切换不同的界面。
掌握Android底部导航的实现技巧：BottomNavigationView与Fragment的结合
weixin_42263617的博客
08-30 2626
本文还有配套的精品资源，点击获取 简介： BottomNavigationView 是Android开发中用于实现底部导航的核心组件，它允许用户在应用的主要功能模块间切换。本文将详细介绍如何利用此组件创建具有动画效果的tab切换，并结合Fragment使用，同时实现点击时的水波纹效果。我们将探讨如何在布局文件中添加 BottomNavigationVi...
Android---简易的底部导航栏
qq_44950283的博客
12-28 4308
在bottomnavigationitem.xml 里添加一个 item 就是在 底部导航栏里添加了一个可点击的 tab 按钮。注意，item 里面的 icon 属性你可以自己找一下好看的icon，这里简单用 mipmap 里的 ic_launcher.webp 来作为 icon。对于底部导航栏 item 的监听应该是 OnNavigationItemSelectedListener，但是该方法已经被 google 官方给废弃了，所以这里用 OnItemSelectedListener 来代替。
Android底部导航栏
weixin_33690963的博客
11-18 248
Android底部导航栏 今天简单写了一个底部导航栏，封装了一个库，用法比较简单 效果图 Github地址：https://github.com/kongqw/KqwBottomNavigation 导入库 XML布局 <?xml version="1.0" encoding="utf-8"?> <Relat...
Android关于BottomNavigationView使用指南
QG
08-30 5498
BottomNavigationView
关于BottomNavigationView的使用姿势都在这里了
G的博客
04-02 1万+
一，基本用法 1，首先需要添加依赖： implementation 'com.google.android.material:material:1.1.0' 2，布局文件中引入： <com.google.android.material.bottomnavigation...
安卓底部导航栏BottomNavigationView
m0_57150356的博客
11-28 1854
实现安卓底部导航栏，google为我们提供了。第三方大佬提供了简易版BottomTabBar类。
Kotlin中使用BottomNavigationView实现底部导航
05-14
Kotlin中使用BottomNavigationView实现底部导航+小红点消息提示
Android 底部导航栏实现：BottomNavigationView详解
"Android 底部导航栏的实现方法通常有多种，本篇文章将介绍三种风格，主要聚焦于Google提供的`BottomNavigationView`组件的使用。首先通过效果图展示了一个功能完备的底部导航栏，接着详细解析了`BottomNavigation...
Android Material Design 系列之 BottomNavigationView + ViewPager + Fragment + BadgeView 开发详解
一名互联网时代苟且偷生的 Android码农
07-13 2730
前言 BottomNavigationView 是 Material Design 提供的一个标准底部导航栏的实现，可以轻松的实现导航栏菜单之间的切换与浏览。底部导航使用户更方便的查看和切换最高层级的导航界面，适用于有三到五个 Tab 的情况。 APP 底部导航栏目中，有新消息提示用户，并在导航栏底部显示具体消息数，这种效果主流 APP 都有应用。本文就介绍 BottomNavigationView + ViewPager + Fragment + BadgeView 可以达到微信消息角标效果和 QQ 消息
Android Material 常用组件详解（七）—— BottomNavigationView 使用详解
weixin_42046829的博客
11-30 5755
一、前言 在开发中，底部导航栏十分常见。一般来说，我们可以自己组合控件实现，比如LinearLayout + TextView(使用android:drawableTop属性+selector状态切换)、RadioGroup + RadioButton等等组合控件的方法自定义实现复杂效果。而BottomNavigationView控件也是一种不错的选择。 二、基本使用 <LinearLayout xmlns:android="http://schemas.android.com/apk/re
Android Material design 之 BottomNavigationView（底部导航栏的实现）
热门推荐
易庞宙的博客
05-14 1万+
    新建project然后导入以下support:design library，BottomNavigationView就在这个design库中。顺带导入这个V4包，因为待会要使用到ViewPager进行联动， 项目地址为(https://github.com/KilleTom/MyMaterialDesignDemo)这个项目我后面会陆续更新更多的MaterialDesignDemo ...
Android中Fragment底部导航栏实现详解
要实现一个底部导航栏，通常会使用Android Support Library中提供的BottomNavigationView控件。通过将BottomNavigationView与Fragment结合，我们能够为用户提供一个直观且交互性强的界面。下面是关于如何实现一个...
bottomnavigationview 去动画_Android Notes｜BottomNavigationView 爱上 Lottie
weixin_39817215的博客
11-21 245
鸡老大说：大丈夫岂能久居人下。首发掘金：掘金 个人页​juejin.im前言好容易解决个问题，感觉记录一波。当日事当日毕，践行鸡老大，点滴积累，万一某天优秀了呢？以前大部分项目底部导航栏关于图片部分的实现，要么两套图 selector 切换，要么通过着色器 tint 进行渲染，总之最后呈现的效果便是在点击时两张图静态切换，说 Low 吧，也还凑合，但是总是没那么高大上。项目重构时，韩总说了，之前的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值