【Android】BottomNavigationView实现底部导航栏

一、BottomNavigationView的介绍及常用属性

BottomNavigationView是官方提供的可以实现自定义底部导航栏的控件，推荐底部只有3-5个菜单选项时使用，因为超过5个选项会触发自动收缩，即只显示图标不显示文字。

常用属性

xml 复制代码

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

二、BottomNavigationView的使用步骤

1.在布局文件中加入BottomNavigationView控件，使用app:menu="@menu/main_nav_bottom_menu"指定目录文件，将底部导航栏的图标和文字加载到控件中

xml 复制代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:fitsSystemWindows="true"
    tools:context=".all.MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/main_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
        >

    </androidx.viewpager2.widget.ViewPager2>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:elevation="1dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/main_nav_bottom_menu"
        android:background="@drawable/bottom_nav_view"
        app:labelVisibilityMode="labeled"
        app:itemBackground="@drawable/bottom_nav_view"
        app:itemTextColor="@color/main_item_text_selector"
        app:itemActiveIndicatorStyle="@null"
        style="@style/CustomBottomNavigationView"
         app:itemRippleColor="@color/white"
        >
    </com.google.android.material.bottomnavigation.BottomNavigationView>
    <ImageView
        android:id="@+id/bottom_navigation_add"
        android:layout_width="48dp"
        android:layout_height="60dp"
        android:src="@drawable/add"
        android:elevation="200dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

2.创建目录文件

在res文件夹下创建自定义目录文件，在item项中设置底部导航栏的文字与图标

xml 复制代码

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/bottom_nav_mainpage"
        android:title="首页"/>
    <item
        android:id="@+id/bottom_nav_market"
        android:title="市集"/>
    <item
        android:title=""
        android:id="@+id/bottom_nav_add"
        />
    <item
        android:id="@+id/bottom_nav_message"
        android:title="消息"
        />
    <item
        android:id="@+id/bottom_nav_mine"
        android:title="我"/>

</menu>

3.设置BottomNavigationView的属性

（1）labelVisibilityMode:控制文本显示

复制代码

labeled：强制所有导航项始终显示文本标签
auto：默认值，智能显示
selected：仅选中项显示
unlabeled：全部隐藏

（2）app:itemTextColor：文本颜色状态选择器

复制代码

这个属性可修改文字选中和未选中的颜色

在res目录下新建color文件夹，新建一个文字颜色状态资源文件

在其中设置选中和未选中的颜色

xml 复制代码

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/black" android:state_checked="true" />
    <item android:color="#CDCDCD" />
</selector>

接着修改布局文件中的代码，添加itemTextColor属性，制定了一个文本颜色选择状态器

xml 复制代码

 app:itemTextColor="@color/main_item_text_selector"

（3）app:itemIconTint：图标颜色状态选择器

复制代码

这个属性可修改图标选中和未选中的颜色

为了和文本颜色保持一致，可以复用上面的文字颜色状态资源文件，在布局文件中添加itemIconTint属性

复制代码

app:itemIconTint="@color/main_item_text_selector"

（4）itemRippleColor:设置点击水波纹效果

可以设置水波纹点击的颜色

xml 复制代码

 app:itemRippleColor="@color/white"

如果想禁用水波纹效果，可以设置

复制代码

 app:itemRippleColor="@null"

（5）TextAppearance：设置文本样式

复制代码

temTextAppearanceActive：设置文本选中的style风格
itemTextAppearanceInactive:设置文本未选中的style风格

首先在res目录下的values文件夹下新建styles.xml文件

xml 复制代码

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="MainItemTextSelectStyle" >
        <item name="android:textSize">20sp</item>
    </style>
    <style name="MainItemTextUnSelectStyle" >
        <item name="android:textSize">15sp</item>
    </style>
</resources>

之后修改布局文件，添加

xml 复制代码

 app:itemTextAppearanceActive="@style/MainItemTextSelectStyle"
        app:itemTextAppearanceInactive="@style/MainItemTextUnSelectStyle"

（6）itemIconSize:设置图标大小

复制代码

这个属性可以自定义图标尺寸，默认为24dp
app:itemIconSize="30dp"

（7）app:itemActiveIndicatorStyle：设置当前选中菜单项的激活指示器的样式

复制代码

app:itemActiveIndicatorStyle="@null"：取消点击时的背景颜色

4.添加导航栏角标

java 复制代码

public class MainActivity extends AppCompatActivity {
    private ViewPager2 totalViewPager2;
    private BottomNavigationView bottomNavigationView;

    public void onCreate(Bundle savedInstanceState){
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       totalViewPager2=findViewById(R.id.main_viewpager);
       List<Integer> list=new ArrayList<>();
       list.add(1);
       totalViewPager2.setAdapter(new MainPageFragmentAdapter(this,list));
       ImageView add=(ImageView) findViewById(R.id.bottom_navigation_add);
       add.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               new BottomSheetFragment().show(getSupportFragmentManager(), "tag");

           }
       });
       bottomNavigationView=findViewById(R.id.bottom_navigation);
       addNovigationBadge();
   }
   private void addNovigationBadge(){
       BadgeDrawable myBadge = bottomNavigationView.getOrCreateBadge(R.id.bottom_nav_message);
       myBadge.setNumber(6); // 显示数字6
       myBadge.setBackgroundColor(ContextCompat.getColor(this, R.color.red)); // 设置红色背景
       myBadge.setBadgeTextColor(Color.WHITE); // 设置文字颜色为白色
       myBadge.setMaxCharacterCount(3); // 最多显示3个字符（显示99+）
       myBadge.setVerticalOffset(40); // 垂直向下偏移40dp
       myBadge.setHorizontalOffset(5); // 水平向左偏移5dp
       myBadge.setVisible(true);

   }

}

在MainActivity中，首先通过findViewById获取到BottomNavigationView的实例，通过

addBadgeToNavigationItem方法为"微信"选项添加角标，在addBadgeToNavigationItem方法中，通过BottomNavigationView方法中的getOrCreateBadge方法获取到"微信"选项的角标实例，接着使用BadgeDrawable中的一系列方法设置角标的各种参数，

5.设置导航栏按键的点击事件

在活动中获取BottomNavigationView的实例，通过实例设置setOnItemSelectedListener方法，在其中实现被点击的逻辑

java 复制代码

 bottomNavigationView.setOnItemSelectedListener(item ->  {
           int itemId = item.getItemId();
           if (itemId == R.id.bottom_nav_mainpage) {
               Toast.makeText(this, "首页被点击", Toast.LENGTH_SHORT).show();
           }
           return true;
       });