Android日常开发（40）BottomNavigationView 实现底部导航

最新推荐文章于 2025-04-23 00:15:00 发布

像一只小蜗牛

最新推荐文章于 2025-04-23 00:15:00 发布

阅读量597

点赞数

分类专栏： Android日常开发（偏业务方向）文章标签： BNavigationView Bottom NavigationView

本文链接：https://blog.csdn.net/ZPCrobot/article/details/107200443

版权

Android日常开发（偏业务方向）专栏收录该内容

53 篇文章

订阅专栏

本文介绍了如何使用Google的BottomNavigationView在Android应用中创建底部导航。首先引入依赖，然后在布局中添加组件，并配置相关属性，如文字颜色、图标着色、水平位移效果等。最后展示了去除水波纹效果和设置数字角标的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

一般我们实现底部导航都是采用，自定义View的方式来实现的，今天我们使用Google为我们提供的BottomNavigationView来实现这个功能。

首先引入依赖

api 'com.android.support:design:28.0.0'

在布局中写入我们的BottomNavigationView UI组件


 <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            app:menu="@menu/nav_menu"
            app:labelVisibilityMode="labeled"
            app:itemTextColor="@color/navigation_text_color"
            app:itemHorizontalTranslationEnabled="false"
            app:itemBackground="@null"
            android:layout_alignParentBottom="true"
            android:layout_height="60dp">
        </android.support.design.widget.BottomNavigationView>

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_add"
        android:icon="@drawable/tab_main_selector"
        android:title="@string/main_shequ"/>
    <item
        android:id="@+id/menu_add1"
        android:icon="@drawable/tab_kind_selector"
        android:title="@string/main_jiaoyou"/>
    <item
        android:id="@+id/menu_add2"
        android:icon="@drawable/tab_cart_selector"
        android:title="@string/main_xiaoxi"/>
    <item
        android:id="@+id/menu_add3"
        android:icon="@drawable/tab_mine_selector"
        android:title="@string/main_wo"/>
</menu>

认识几个属性

 app:menu="@menu/nav_menu"

配置我们底部导航所要陈列的信息

 app:labelVisibilityMode="labeled"

显示我们的底部文案信息

 app:itemTextColor="@color/navigation_text_color"

为底部文字配置显示的字体颜色

app:itemIconTint="@color/navigation_text_color"

为导航的icon着色，如果不设置，则默认使用主题色着色

app:itemHorizontalTranslationEnabled="false"

true 开启水平位移效果，false 禁用水平位移效果，默认为true

app:itemBackground="@null"

去除水波纹效果办法，普通app都没有使用android的这个水波纹效果

BottomNavigationView { bottomNavigationView.setItemIconTintList(null);}

去除底部icon默认着色效果

<dimen tools:override="true" name="design_bottom_navigation_text_size">12sp</dimen>
<!-- text大小 -->
<dimen tools:override="true" name="design_bottom_navigation_active_text_size">12sp</dimen>

字体向上缩放效果移除，通过设置选中和未选中时的字体大小，（无需反射！！！）

<dimen tools:override="true" name="design_bottom_navigation_margin">10dp</dimen>
<!-- 导航栏高度 -->
<dimen tools:override="true" name="design_bottom_navigation_height">84dp</dimen>
设置导航栏高度和间距

api 'q.rorbin:badgeview:1.1.3'

itemhome= navigation.findViewById(R.id.menu_add);

badge1=new QBadgeView(this).bindTarget(itemhome)

.setShowShadow(true)

.setBadgeGravity(Gravity.END|Gravity.TOP)

.setOnDragStateChangedListener(newBadge.OnDragStateChangedListener() {

@Override

public voidonDragStateChanged(intdragState, Badge badge, View targetView) {

}

})

.setBadgeNumber(1);