Android BottomNavigationView 底部导航栏使用详解

在这里插入图片描述

一、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.mzph.cn/pingmian/62026.shtml

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