【Android】BottomNavigationView的使用笔记

最新推荐文章于 2024-06-05 10:47:01 发布

代码不难写

最新推荐文章于 2024-06-05 10:47:01 发布

阅读量2k

点赞数 1

文章标签： android 笔记 java

本文链接：https://blog.csdn.net/weixin_43440181/article/details/130205369

版权

一、控件基础简介

常用属性

app:itemTextColor 文字的颜色，可以通过selector来控制选中和未选中的颜色
app:itemIconTint 图标的颜色，可以通过selector来控制选中和未选中的颜色
app:itemIconSize 图标大小，默认24dp
app:iteamBackground 背景颜色，默认是主题的颜色
app:itemRippleColor 点击后的水波纹颜色
app:itemTextAppearanceActive 设置选中时文字样式
app:itemTextAppearanceInactive 设置默认的文字样式
app:itemHorizontalTranslationEnabled 在label visibility 模式为selected时item水平方向移动
app:elevation 控制控件顶部的阴影
app:labelVisibilityMode 文字的显示模式
app:menu 指定菜单xml文件（文字和图片都写在这个里面）

常用事件
主要用两个事件OnNavigationItemSelectedListener和OnNavigationItemReselectedListener

nav_view.setOnNavigationItemSelectedListener(
    BottomNavigationView.OnNavigationItemSelectedListener {
    when (it.itemId) {
        R.id.navigation_item1 -> {
            Log.e("bottomMenuView:", "home")
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_item2 -> {
            Log.e("bottomMenuView:", "dashboard")
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_item3 -> {
            Log.e("bottomMenuView:", "notification")
            return@OnNavigationItemSelectedListener true
        }
    }
    false
})

nav_view.setOnNavigationItemReselectedListener(
    BottomNavigationView.OnNavigationItemReselectedListener {
    Log.e("bottomMenuView:", it.itemId.toString())
})

两个事件的用法是一样的，区别在于：OnNavigationItemSelectedListener在item由未选中到选中状态时触发，而OnNavigationItemReselectedListener在item处于选中状态再次点击时触发。

最大Item数量
BottomNavigationView对显示的item数量做了显示，最多5个，超过就会抛出异常，源码如下：

public final class BottomNavigationMenu extends MenuBuilder {
    public static final int MAX_ITEM_COUNT = 5;
    // ...
    @Override
    protected MenuItem addInternal(int group, int id, int categoryOrder, CharSequence title) {
    if (size() + 1 > MAX_ITEM_COUNT) {
      throw new IllegalArgumentException(
          "Maximum number of items supported by BottomNavigationView is "
              + MAX_ITEM_COUNT
              + ". Limit can be checked with BottomNavigationView#getMaxItemCount()");
    }
    // ...
    return item;
  }
}

Google这么做的原因大概是一般不会有超过5个的需求，而且超过5个以后就会显得很拥挤，UI效果比较差。

二、BottomNavigationView遮挡其它控件问题

1.原因分析
我们在使用控件的时候，总是有两个必须填写的值，一个是width，一个是height，而它们分别对应我们印象中的物体的长度和宽度。当控件被遮盖住，这时候我们就需要指定控件的Z轴高度了。
何为Z轴高度？比如我们在三维空间中定义一个物体的具体位置，需要知道它的空间属性值，通过XYZ轴来精确定。这里的Z轴高度，其实就是指真正的“高度”，而不是宽度！
总结：让添加的ImageView在Z轴上的高度大于等于BottomNavigationView的。

2.解决方式
在使用BottomNavigationView的过程中，如果我们需要放置其它控件在其之上，需要通过以下几种方式来实现，否则控件将被其遮挡而无法正常显示：

布局中使用BottomNavigationView标签将需要在导航栏之上显示的其他控件包起来，也就是其他控件在它的层级之下；
设置控件的Z轴高度，在我的测试中发现BottomNavigationView的默认Z轴高度为8dp，所以你设置控件的Z轴高度大于或等于8dp就可以显示在BottomNavigationView上了。
在Activity中指定BottomNavigationView的Z轴高度。代码种设置其Z轴高度：```
mNavigationView.elevation = 0f
直接在BottomNavigationView布局中使用```
app：elevation=“0dp”

跟其他控件同样的Z轴高度，因为默认的是：android：elevation="0dp"，需要改为app。

三、修改文字大小

在styles.xml中新建样式：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--选中的样式-->
    <style name="bottom_tab_title_active">
        <item name="android:textSize">16sp</item>
    </style>

    <!--没有选中的样式，导航默认的字体大小就是14sp-->
    <style name="bottom_tab_title_inactive">
        <item name="android:textSize">14sp</item>
    </style>
</resources>

在布局文件中，为BottomNavigationView导入对应的样式设置：

    <com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        app:itemTextAppearanceActive="@style/bottom_tab_title_active"
        app:itemTextAppearanceInactive="@style/bottom_tab_title_inactive" />

四、修改图标选中色、文字选中色

在res/drawable下新建selector_bottom_tab.xml文件：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/选中色" android:state_checked="true" />
    <item android:color="@color/为选中色，默认效果" android:state_checked="false" />
</selector>

然后在布局BottomNavigationView标签中添加如下代码：

    <com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        app:itemIconTint="@drawable/selector_bottom_tab"
        app:itemTextColor="@drawable/selector_bottom_tab"/>

五、设置图标与文字之间的间距

六、显示badge(角标/悬浮徽章)

在BottomNavigationView上添加badge很简单，它提供了如下操作badge的方法：

getBadge(int menuItemId) 获取badge
getOrCreateBadge(int menuItemId) 获取或创建badge
removeBadge(int menuItemId) 移除badge
因此添加一个badge只需要如下代码：

val navView: BottomNavigationView = findViewById(R.id.nav_view)
val badge = navView.getOrCreateBadge(R.id.navigation_dashboard)

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。
在这里插入图片描述
相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。

全套视频资料：

一、面试合集

在这里插入图片描述
二、源码解析合集

三、开源框架合集
在这里插入图片描述
欢迎大家一键三连支持，若需要文中资料，直接扫描文末CSDN官方认证微信卡片免费领取↓↓↓

代码不难写

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
【Android】BottomNavigationView的使用笔记

我们在使用控件的时候，总是有两个必须填写的值，一个是`width`，一个是`height`，而它们分别对应我们印象中的物体的长度和宽度。当控件被遮盖住，这时候我们就需要指定控件的`Z`轴高度了。何为`Z`轴高度？比如我们在三维空间中定义一个物体的具体位置，需要知道它的空间属性值，通过`XYZ`轴来精确定。这里的`Z`轴高度，其实就是指真正的“高度”，而不是宽度！总结：让添加的`ImageView`在`Z`轴上的高度大于等于`BottomNavigationView`的。
复制链接

扫一扫