Android BottomNavigationView 底部导航栏使用详解

news2024/11/27 12:26:17

在这里插入图片描述

一、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
        }

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2248406.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

IIT开发自适应协作界面，通过Xsens动作捕捉系统实现安全人机交互

IIT开发自适应协作界面，通过Xsens动作捕捉系统实现安全人机交互

意大利理工学院(IIT)的研究人员正在利用自适应界面转变人机协作&#xff0c;实现实时机器人调整和安全、无缝的交互。 本文要点: l 协作的实时适应&#xff1a;IIT的研究员西林图纳和厄兹达马尔开发了一种自适应协作界面(ACI)&#xff0c;允许机器人根据人类的运动意图实时调…
阅读更多...
一学就废|Python基础碎片，格式化F-string

一学就废|Python基础碎片，格式化F-string

Python 3.6 中引入了 f-string语法&#xff0c;提供了一种简洁直观的方法来将表达式和变量直接嵌入到字符串中进行字符串格式化&#xff0c;f -string背后的想法是使字符串插值更简单。 要创建 f -string&#xff0c;在字符串前加上字母 “f”即可&#xff0c;与字符串本身的格…
阅读更多...
SVG无功补偿装置MATLAB仿真模型

SVG无功补偿装置MATLAB仿真模型

“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 模型简介 SVG&#xff08;又称ASVG 或STATCOM&#xff09;是Static Var Generator 的缩写&#xff0c;叫做静止无功发生器。也是做无功补偿的&#xff0c;比SVC 更加先进。其基本原理是将自换相桥式电路通过电抗器或…
阅读更多...
MVC、EL、JSTL

MVC、EL、JSTL

1.MVC设计模式 三层&#xff1a; MVC&#xff1a; M&#xff08;Model&#xff09;模型&#xff1a;负责业务逻辑处理&#xff0c;数据库访问。 V&#xff08;View&#xff09;视图&#xff1a;负责与用户交互。 C&#xff08;Controller&#xff09;控制器&#xff1a;负责流程…
阅读更多...
Web开发技术栈选择指南

Web开发技术栈选择指南

互联网时代的蓬勃发展&#xff0c;让越来越多人投身软件开发领域。面对前端和后端的选择&#xff0c;很多初学者往往陷入迷茫。让我们一起深入了解这两个领域的特点&#xff0c;帮助你做出最适合自己的选择。 在互联网发展的早期&#xff0c;前端开发主要负责页面布局和简单的…
阅读更多...
太通透了，Android 流程分析 蓝牙enable流程(应用层/Framework/Service层)

太通透了，Android 流程分析 蓝牙enable流程(应用层/Framework/Service层)

零. 前言 由于Bluedroid的介绍文档有限&#xff0c;以及对Android的一些基本的知识需要了(Android 四大组件/AIDL/Framework/Binder机制/JNI/HIDL等)&#xff0c;加上需要掌握的语言包括Java/C/C等&#xff0c;加上网络上其实没有一个完整的介绍Bluedroid系列的文档&#xff0…
阅读更多...
R语言绘图过程中遇到图例的图块中出现字符“a“的解决方法

R语言绘图过程中遇到图例的图块中出现字符“a“的解决方法

R语言绘图过程中遇到图例的图块中出现字符的解决方法 因为我遇到这个问题的时候没在网上找到合适的方法&#xff0c;找到个需要付费的&#xff0c;算了。也许是因为问的方式不同&#xff0c;问了半天AI也回答出来&#xff0c;莫名有些烦躁&#xff0c;打算对代码做个分析&…
阅读更多...
【C语言】字符串左旋的三种解题方法详细分析

【C语言】字符串左旋的三种解题方法详细分析

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C语言 文章目录 &#x1f4af;前言&#x1f4af;题目描述&#x1f4af;方法一&#xff1a;逐字符移动法&#x1f4af;方法二&#xff1a;使用辅助空间法&#x1f4af;方法三&#xff1a;三次反转法&#x1f4af;方法对…
阅读更多...
【346】Postgres内核 Startup Process 通过 signal 与 postmaster 交互实现 （5）

【346】Postgres内核 Startup Process 通过 signal 与 postmaster 交互实现 （5）

1. Startup Process 进程 postmaster 初始化过程中， 在进入 ServerLoop() 函数之前，会先通过调用 StartChildProcess() 函数来开启辅助进程，这些进程的目的主要用来完成数据库的 XLOG 相关处理。 如： 核实 pg_wal 和 pg_wal/archive_status 文件是否存在Postgres先前是否发…
阅读更多...
大数据面试SQL题-笔记02【查询、连接、聚合函数】

大数据面试SQL题-笔记02【查询、连接、聚合函数】

大数据面试SQL题复习思路一网打尽&#xff01;(文档见评论区)_哔哩哔哩_bilibiliHive SQL 大厂必考常用窗口函数及相关面试题 大数据面试SQL题-笔记01【运算符、条件查询、语法顺序、表连接】大数据面试SQL题-笔记02【查询、连接、聚合函数】​​​​​​​ 目录 01、查询 01…
阅读更多...
【Python中while循环】

【Python中while循环】

一、深拷贝、浅拷贝 1、需求 1&#xff09;拷贝原列表产生一个新列表 2&#xff09;想让两个列表完全独立开&#xff08;针对改操作&#xff0c;读的操作不改变&#xff09; 要满足上述的条件&#xff0c;只能使用深拷贝 2、如何拷贝列表 1&#xff09;直接赋值 # 定义一个…
阅读更多...
51单片机从入门到精通：理论与实践指南入门篇（二）

51单片机从入门到精通：理论与实践指南入门篇（二）

续51单片机从入门到精通&#xff1a;理论与实践指南&#xff08;一&#xff09;https://blog.csdn.net/speaking_me/article/details/144067372 第一篇总体给大家在&#xff08;全局&#xff09;总体上讲解了一下51单片机&#xff0c;那么接下来几天结束详细讲解&#xff0c;从…
阅读更多...
【pyspark学习从入门到精通20】机器学习库_3

【pyspark学习从入门到精通20】机器学习库_3

目录 使用 ML 预测婴儿生存几率 加载数据 创建转换器 创建估计器 创建管道 拟合模型 使用 ML 预测婴儿生存几率 在这一部分&#xff0c;我们将使用前一章中的数据集的一部分来介绍 PySpark ML 的概念。 在这一部分&#xff0c;我们将再次尝试预测婴儿的生存几率。 加载…
阅读更多...
【计算机网络】核心部分复习

【计算机网络】核心部分复习

目录 交换机 v.s. 路由器OSI七层更实用的TCP/IP四层TCPUDP 交换机 v.s. 路由器 交换机-MAC地址 链接设备和设备 路由器- IP地址 链接局域网和局域网 OSI七层 物理层&#xff1a;传输设备。原始电信号比特流。数据链路层&#xff1a;代表是交换机。物理地址寻址&#xff0c;交…
阅读更多...
LLamafactory 批量推理与异步 API 调用效率对比实测

LLamafactory 批量推理与异步 API 调用效率对比实测

背景 在阅读 LLamafactory 的文档时候&#xff0c;发现它支持批量推理: 推理.https://llamafactory.readthedocs.io/zh-cn/latest/getting_started/inference.html 。 于是便想测试一下&#xff0c;它的批量推理速度有多快。本文实现了 下述两种的大模型推理&#xff0c;并对…
阅读更多...
【自动化Selenium】Python 网页自动化测试脚本(上)

【自动化Selenium】Python 网页自动化测试脚本(上)

目录 1、Selenium介绍 2、Selenium环境安装 3、创建浏览器、设置、打开 4、打开网页、关闭网页、浏览器 5、浏览器最大化、最小化 6、浏览器的打开位置、尺寸 7、浏览器截图、网页刷新 8、元素定位 9、元素交互操作 10、元素定位 &#xff08;1&#xff09;ID定位 &…
阅读更多...
Table 滚动条始终停靠在可视区域的底部

Table 滚动条始终停靠在可视区域的底部

1. 话题引入 存在这样一个场景&#xff1a;当页面尺寸发生变化时&#xff0c;希望滚动条能够随之动态调整&#xff0c;始终展示在 table 的可视区域的最下方&#xff0c;而不是整个 table 本身的最底部。 这种行为可以提升用户的使用体验&#xff0c;尤其是在处理大数据表格时…
阅读更多...
【漏洞复现】CVE-2020-13925

【漏洞复现】CVE-2020-13925

漏洞信息 NVD - CVE-2020-13925 Similar to CVE-2020-1956, Kylin has one more restful API which concatenates the API inputs into OS commands and then executes them on the server; while the reported API misses necessary input validation, which causes the hac…
阅读更多...
基于Springboot的心灵治愈交流平台系统的设计与实现

基于Springboot的心灵治愈交流平台系统的设计与实现

基于Springboot的心灵治愈交流平台系统 介绍 基于Springboot的心灵治愈交流平台系统&#xff0c;后端框架使用Springboot和mybatis&#xff0c;前端框架使用Vuehrml&#xff0c;数据库使用mysql&#xff0c;使用B/S架构实现前台用户系统和后台管理员系统&#xff0c;和不同级别…
阅读更多...
快速理解微服务中Gateway的概念

快速理解微服务中Gateway的概念

一.基本概念 定义&#xff1a; 在微服务架构中&#xff0c;Spring Cloud Gateway 是一个用于API网关的框架&#xff0c;它是一个基于 Spring Framework 的高效、可扩展的路由器和反向代理&#xff0c;它能够将外部请求转发到适当的微服务&#xff0c;并提供一些与请求处理相关…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023