Android底部导航栏之BottomNavigationView

一，基本用法

1，首先需要添加依赖：

implementation 'com.google.android.material:material:1.1.0'

2，布局文件中引入：

<com.google.android.material.bottomnavigation.BottomNavigationViewandroid:id="@+id/nav_view"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginStart="0dp"android:layout_marginEnd="0dp"android:background="?android:attr/windowBackground"app:menu="@menu/bottom_nav_menu" />

3，常用属性：

• 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文件（文字和图片都写在这个里面）

4，menu文件：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:id="@+id/navigation_rypc"android:icon="@drawable/main_bottom_rypc_selector"android:title="@string/bottom_rypc" /><itemandroid:id="@+id/navigation_ryzy"android:icon="@drawable/main_bottom_ryzy_selector"android:title="@string/bottom_ryzy" /><itemandroid:id="@+id/navigation_ryct"android:icon="@drawable/main_bottom_ryct_selector"android:title="@string/bottom_ryct" /><itemandroid:id="@+id/navigation_mine"android:icon="@drawable/main_bottom_mine_selector"android:title="@string/bottom_mine" />
</menu>

在每个item中设置对应的icon和title即可。这里的icon可以是一个drawable，也可以是包含不同状态对应不同图片的selector。设置了menu后一个基本的底部菜单栏就有了。

二，配合Fragment使用

1.设置对应的navigation文件，指定fragment页面

<?xml version="1.0" encoding="utf-8"?>
<navigation 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"app:startDestination="@id/navigation_rypc"android:id="@+id/main_navigation"><fragmentandroid:id="@+id/navigation_rypc"android:name="com.heziz.yjct.fragment.RypcFragment"tools:layout="@layout/fragment_rypc"/><fragmentandroid:id="@+id/navigation_ryzy"android:name="com.heziz.yjct.fragment.RyzyFragment"tools:layout="@layout/fragment_ryzy"/><fragmentandroid:id="@+id/navigation_ryct"android:name="com.heziz.yjct.fragment.RyctFragment"tools:layout="@layout/fragment_ryct"/><fragmentandroid:id="@+id/navigation_mine"android:name="com.heziz.yjct.fragment.MineFragment"tools:layout="@layout/fragment_mine"/></navigation>

2.activity中的布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:background="#f8f8f8"android:layout_width="match_parent"android:layout_height="match_parent"><fragmentandroid:id="@+id/nav_host_fragment"android:name="androidx.navigation.fragment.NavHostFragment"android:layout_width="match_parent"android:layout_height="match_parent"app:defaultNavHost="true"app:layout_constraintBottom_toTopOf="@id/bottom_navigation"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"app:navGraph="@navigation/main_navigation" /><com.google.android.material.bottomnavigation.BottomNavigationViewandroid:id="@+id/bottom_navigation"android:layout_width="match_parent"android:layout_height="?actionBarSize"android:layout_gravity="bottom"android:background="@color/white"app:labelVisibilityMode="labeled"app:menu="@menu/main_bottom_icons" /></androidx.coordinatorlayout.widget.CoordinatorLayout>

3.Activity中使用

public class MainActivity extends BaseAppCompatActivity {BottomNavigationView bottomNavigationView;@Overrideprotected boolean isRegisterEventBus() {return false;}@Overrideprotected int setLayout() {return R.layout.activity_main;}@Overrideprotected void setView() {initNavigation();}@Overrideprotected void setData() {}private void initNavigation() {NavController controller = Navigation.findNavController(this, R.id.nav_host_fragment);bottomNavigationView = findViewById(R.id.bottom_navigation);NavigationUI.setupWithNavController(bottomNavigationView,controller);// 动态删除底部导航控件
//        bottomNavigationView.getMenu().removeItem(R.id.navigation_ryzy);}

三，注意事项

• menu文件中item的id要和navigation文件中fragment的id保持一致，否则无法正常显示

• 要想取消点击选中后放大效果，只需在dimens文件中新增一下配置，设置字体大小一致

//防止字体出现变大效果<dimen name="design_bottom_navigation_active_text_size">12dp</dimen><dimen name="design_bottom_navigation_text_size">12dp</dimen>

四，显示badge(角标/悬浮徽章)

还在github上查找怎么往BottomNavigationView上添加badge吗？BottomNavigationView默认提供了badge。

1，基本使用

在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)

效果：

设置数量

badge.number = 20

设置数量后效果：

2，常用属性

getBadge和getOrCreateBadge方法返回的都是BadgeDrawable，BadgeDrawable常用的属性/方法如下：

• backgroundColor 设置背景色

• badgeGravity 设置Badge的显示位置，有四种可先：TOP_START，TOP_END，BOTTOM_START，BOTTOM_END，分别对应左上角，右上角，左下角和右下角。

• badgeTextColor 设置文字颜色

• maxCharacterCount 最多显示几位数字，比如该项设置了3，number设置为108，则显示99+