BottomNavigationView+ViewPager+Fragment的使用（角标的使用）

Materail Design的BottomNavigationView使用方法

BottomNavigationView介绍

依赖：

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

XML代码：

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFF"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_menu" />

可以看得到 app:menu="@menu/bottom_menu" 这行代码就是我们底部导航栏中的按钮，所以我们需要先在res下面创建一个名为menu的文件夹，然后再在menu文件夹里面创建一个xml来放我们的按钮

代码：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/page_1"
        android:enabled="true"
        android:icon="@mipmap/star"
        android:title="首页"/>
    <item
        android:id="@+id/page_2"
        android:enabled="true"
        android:icon="@mipmap/star"
        android:title="资讯"/>
    <item
        android:id="@+id/page_3"
        android:enabled="true"
        android:icon="@mipmap/star"
        android:title="动态"
        />
</menu>

此时我们已经可以看到BottomNavigationView的效果了，materail design官方文档声明BottomNavigationView不支持超过五个菜单项目，但是发现 3 个以上菜单时会出现文本显示异常现象，动画效果也变了。要想解决这个问题，在最新版的 API 中，已经为大家提供了解决方案，只需要一行代码就可以完美解决。

//java代码
bottomNavigationView.setLabelVisibilityMode(LABEL_VISIBILITY_LABELED);
//或者在xml文件中使用属性
app:labelVisibilityMode="labeled"

BottomNavigationView+ViewPager+Fragment的使用

在以往我使用的比较多的是Tablayout+ViewPager+Fragment，后来发现BottomNavigationView与它俩更搭，而且还有一些是前者所不能实现的效果

代码：

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/ViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#FFF"
        app:menu="@menu/bottom_menu" />

与tablayout的写法相似，然后我们分别创建几个Fragment，然后再activity里将这三者关联
代码：

        List<Fragment> list = new ArrayList<>();//创建Fragment集合
       //实例化每个fragment页面
        HomePageFragment homePageFragment = new HomePageFragment();
        InfomationPageFragment infomationPageFragment = new InfomationPageFragment();
        DynamicPageFragment dynamicPageFragment = new DynamicPageFragment();
        //添加进去fragment集合
        list.add(homePageFragment);
        list.add(infomationPageFragment);
        list.add(dynamicPageFragment);
        //底部标题栏切换
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.page_1://第一个页面(因为返回值是布尔类型的，所以不用break;)
                        viewPager.setCurrentItem(0, false);
                        return true;
                    case R.id.page_2://第二个页面
                        viewPager.setCurrentItem(1, false);
                        return true;
                    case R.id.page_3://第三个页面
                        viewPager.setCurrentItem(2, false);
                        return true;
                }
                return false;
            }
        });
        //默认选中
        bottomNavigationView.getMenu().getItem(0).setChecked(true);
        //ViewPager
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //选中对应下标的页面
                bottomNavigationView.getMenu().getItem(position).setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        //ViewPager绑定Fragment
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @NonNull
            @Override
            public Fragment getItem(int position) {
                return list.get(position);
            }

            @Override
            public int getCount() {
                return list.size();
            }
        });

在这里面ViewPager相当于一个中介，一边绑定着BottomNavigationView，一边又跟Fragment关联，这个时候我们就已经可以实现页面切换了

BadgeView 介绍

这个其实就是腾讯qq下的那个消息提醒的角标

依赖：

implementation 'q.rorbin:badgeview:1.1.3'

代码：

Badge 是一个接口，创建实现类 QBadgeView 对象，然后设置相关属性。

		//Badge的初始化
        QBadgeView qBadgeView = new QBadgeView(MainActivity.this);

        BottomNavigationMenuView itemView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
        //获取导航栏Tab数量
        int childCount = itemView.getChildCount();
        
        qBadgeView.bindTarget(itemView.getChildAt(0))
                .setBadgeNumber(100)//数量
                .setBadgeTextColor(Color.WHITE)//字体颜色
                .setBadgeGravity(Gravity.TOP | Gravity.END)//角标位置(右上)
                .setExactMode(false)//显示具体数字还是99+
                .setGravityOffset(30, 0, true)//角标的位置
                .setShowShadow(true)//是否有阴影效果
                .setOnDragStateChangedListener(new Badge.OnDragStateChangedListener() {//设置可拖拽
                    @Override
                    public void onDragStateChanged(int dragState, Badge badge, View targetView) {

                    }
                });

查看源码可以看到 BottomNavigationMenuView 是 BottomNavigationView 内部添加的一个子 View，也就是说他是导航栏中添加的所有 Menu 的一个父 View,所以BottomNavigationMenuView 是 BottomNavigationMenuView itemView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);这样获取的，小伙伴可不要因为强转而搞错哦

注意事项：请不要在 xml 中创建 Badge(原创，转载请标明出处)