Android BottomNavigationView 底部导航栏使用详解

embedded/2024/11/27 14:07:41/

在这里插入图片描述

一、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"><FrameLayoutandroid:id="@+id/navFragment"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><com.google.android.material.bottomnavigation.BottomNavigationViewandroid: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"><itemandroid:id="@+id/item_home"android:icon="@drawable/main_home"android:title="首页" /><itemandroid:id="@+id/item_sport"android:icon="@drawable/main_sport"android:title="运动" /><itemandroid:id="@+id/item_device"android:icon="@drawable/main_device"android:title="设备" /><itemandroid: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"><pathandroid: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"><pathandroid: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"><pathandroid: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"><pathandroid: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.BottomNavigationViewandroid: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.BottomNavigationViewandroid: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.BottomNavigationViewandroid: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.BottomNavigationViewandroid: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.BottomNavigationViewandroid: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.BottomNavigationViewandroid: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.BottomNavigationViewandroid: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.BottomNavigationViewandroid: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}

http://www.ppmy.cn/embedded/140912.html

相关文章

SpringBoot(四十)SpringBoot集成RabbitMQ使用过期时间+死信队列实现延迟队列

前边我们使用RabbitMQ实现了高并发下对流量的削峰填谷。正常在实际应用中大概也就够用了。 有的时候呢&#xff0c;我们需要使用到延迟队列&#xff0c;RabbitMQ不像RocketMQ一样默认就支持延迟队列&#xff0c;RabbitMQ是不支持延迟队列的&#xff0c;但是呢&#xff1f;我们可…

OCR-free Document Understanding Transformer

摘要:理解文档图像(如发票)是一个核心且具有挑战性的任务,因为它需要执行复杂的功能,如读取文本和对文档的整体理解。目前的视觉文档理解(VDU)方法将读取文本的任务外包给现成的光学字符识别(OCR)引擎,并专注于使用OCR输出进行理解任务。尽管基于OCR的方法显示出令人…

c++编程玩转物联网:使用芯片控制8个LED实现流水灯技术分享

在嵌入式系统中&#xff0c;有限的GPIO引脚往往限制了硬件扩展能力。74HC595N芯片是一种常用的移位寄存器&#xff0c;通过串行输入和并行输出扩展GPIO数量。本项目利用树莓派Pico开发板与74HC595N芯片&#xff0c;驱动8个LED实现流水灯效果。本文详细解析项目硬件连接、代码实…

极狐GitLab 17.6 正式发布几十项与 DevSecOps 相关的功能【二】

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料&#xff1a; 极狐GitLab 官网极狐…

零基础3分钟快速掌握 ——Linux【终端操作】及【常用指令】Ubuntu

1.为啥使用Linux做嵌入式开发 能广泛支持硬件 内核比较高效稳定 原码开放、软件丰富 能够完善网络通信与文件管理机制 优秀的开发工具 2.什么是Ubuntu 是一个以桌面应用为主的Linux的操作系统&#xff0c; 内核是Linux操作系统&#xff0c; 具有Ubuntu特色的可视…

接上一主题,C++14中如何设计类似于std::any,使集合在C++中与Python一样支持任意数据?

这篇文章的重点是C多态的应用&#xff0c;但是如果你是C新手&#xff0c; 你需要了解以下C知识&#xff1a; 类 构造函数 拷贝构造函数 虚拟函数 纯虚拟函数 析构函数 类的继承 运算符重写 模板类 模板参数 数组 数组的传递 指针与动态内存分配 Python&#xff1a; s …

前端开发工程师需要学什么?

‌前端开发工程师需要学习的主要内容包括HTML、CSS、JavaScript、前端框架、响应式设计、性能优化、版本控制等。‌ HTML/CSS/JavaScript ‌HTML‌&#xff1a;是网页的骨架&#xff0c;负责网页的结构和内容。‌CSS‌&#xff1a;用于美化网页&#xff0c;设计样式和布局。‌…

延迟队列调研

调研延迟队列的实现方案&#xff1a; 使用 RocketMQ 设置延迟时间级别延时投递的延时队列 使用 Redisson 提供的 DelayedQueue 使用 Redis 的过期监听 -- key过期事件的时效性问题(惰性清除、定时随机删除) 使用 RabbitMQ 的死信队列 -- 死信队列的设计目的是为了存储没有…