分分钟实现底部导航栏：BottomNavigationBar快速集成-CSDN博客

分分钟实现底部导航栏：BottomNavigationBar快速集成

github地址（完整Demo下载）

github.com/Ashok-Varma…

一、简介

导航栏布局基本很多app都会用到，本篇文章主要帮助新手快速使用并集成底部导航栏。 BottomNavigationBar是Google官方自己推出的，个人感觉还凑合吧，虽然遇到了几个问题，也都自己解决了。

不啰嗦了下面是效果图和使用方法，按步骤集成分分钟搞定。

效果图：

二、快速集成

1、添加依赖

compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0'
复制代码

2、在布局文件中，添加布局

<?xml version="1.0" encoding="utf-8"?>
<layout 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">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@+id/webViewParent"
        >
        
        <com.ashokvarma.bottomnavigation.BottomNavigationBar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/navigationBar"
            android:layout_alignParentBottom="true">
        </com.ashokvarma.bottomnavigation.BottomNavigationBar>
        
        <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/frameLayout"
                android:layout_above="@id/navigationBar">
        </FrameLayout>
    
    </RelativeLayout>
</layout>
复制代码

3、代码部分：

设置全局变量：

private final String circle = "首页";
private final String message = "咨询";
private final String find = "学学";
private final String friend = "问答";
private final String my = "我的";
private FragmentManager manager;
private BottomNavigationBar navigationBar;
int curFragment = -1;
private List<Fragment> fragmentList = new ArrayList<>();
复制代码

初始化的方法：

@Override
protected void initView(Bundle savedInstanceState) {
manager = getSupportFragmentManager();
navigationBar = binding.navigationBar;
        navigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        navigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
        navigationBar.setBackgroundColor(getResources().getColor(R.color.white));
        //以上为设置导航栏背景颜色，其中Style(没有水波纹效果)和模式都要选择相应的。

        TextBadgeItem badgeItem = new TextBadgeItem().setBackgroundColor(getResources().getColor(R.color.red_point)).setTextColor(Color.WHITE).
                setText("1").setAnimationDuration(200).setHideOnSelect(false);
// 如果需要设置红色小圆点
//        ShapeBadgeItem shapeBadgeItem = new ShapeBadgeItem().setShape(0).setShapeColor(Color.RED);
        navigationBar.addItem(new BottomNavigationItem(R.drawable.icon_tabbar_circle_grey, circle)).setActiveColor(R.color.btn_green)
                .addItem(new BottomNavigationItem(R.drawable.icon_tabbar_new_grey, message).setBadgeItem(badgeItem)).setActiveColor(R.color.btn_green)
                .addItem(new BottomNavigationItem(R.drawable.icon_tabbar_find_grey, find)).setActiveColor(R.color.btn_green)
                .addItem(new BottomNavigationItem(R.drawable.icon_tabbar_friend_grey, friend)).setActiveColor(R.color.btn_green)
                .addItem(new BottomNavigationItem(R.drawable.icon_tabbar_my_grey, my)).setActiveColor(R.color.btn_green);
        navigationBar.setTabSelectedListener(this);
        navigationBar.setFirstSelectedPosition(0).initialise();
        //所有的设置需在调用该方法前完成
}

public void initFragment(){
    fragmentList.add(new CircleFragment());
    fragmentList.add(new MessageFragment());
    fragmentList.add(new FindFragment());
    fragmentList.add(new FriendFragment());
    fragmentList.add(new MyFragment());
}

复制代码

需要实现的监听器

implements BottomNavigationBar.OnTabSelectedListener

复制代码

需要在onTabSelected()方法回调中添加以下代码切换fragment

@Override
public void onTabSelected(int position) {
    switchTab(position);
}

private void switchTab(int position) {
    Fragment fragment = manager.findFragmentByTag("" + position);
    FragmentTransaction beginTransaction = manager.beginTransaction();
    if (fragment == null) {
        if (manager.findFragmentByTag("" + curFragment) != null) {
            beginTransaction.hide(fragmentList.get(curFragment));
        }
        beginTransaction.add(R.id.fragLayout, fragmentList.get(position), "" + position)
                .show(fragmentList.get(position))
                .commit();
    } else if (curFragment != position) {
        beginTransaction.hide(fragmentList.get(curFragment))
                .show(fragmentList.get(position))
                .commit();
    }
    curFragment = position;
}
复制代码

最终效果：

三、遇到的问题

1、在其他页面结束时，返回有navigationBar界面时，发送事件手动调用selectTab()，并没有切换fragment。

解决方法： 在onResume方法中设置一个标志位进行判断是否要切换fragment，发送事件改变标志位即可。

2、异常：

Binary XML file line #0: Error inflating class com.ashokvarma.bottomnavigation.BadgeTextView
复制代码

解决方法： 原因是在使用的26.1.0版本的support库时，studio会提示有混合的库，需要选择确定的版本，可能会存在运行冲突。都改成最新版本的27.0.2support库即可。

（我不知道为什么另一个项目都是一样的gridle配置，就没有报这个错误）

3、找不到类的异常： 添加glide依赖即可

Didn't find class "com.bumptech.glide.request.RequestOptions" on path: DexPathList[[zip file "/data/app/com.beyondin.aimaite-1/base.apk", zip file "/data/app/com.beyondin.aimaite-1/split_lib_dependencies_apk.apk", zip file "/data/app/com.beyondin.aimaite-1/split_lib_slice_0_apk.apk", zip file "/data/app/com.beyondin.aimaite-1/split_lib_slice_1_apk.apk", zip file "/data/app/com.beyondin.aimaite-1/split_lib_slice_2_apk.apk", zip file "/data/app/com.beyondin.aimaite-1/split_lib_slice_3_apk.apk", zip file "/dat
com.luck.picture.lib.adapter.PictureImageGridAdapter.onBindViewHolder(PictureImageGridAdapter.java:186)
复制代码

4、调整图标和文字的间距

在自己项目里value文件夹中的dimens.xml里面复写fixed_height_bottom_padding（默认是10dp，值越小，间距越大。适用的模式是BottomNavigationBar.MODE_FIXED）

如果模式是BottomNavigationBar.MODE_SHIFTING也是一样，复写和修改相关的参数

详情可看 github.com/Ashok-Varma…

5、文字显示不全

把padding设小

<dimen name="fixed_width_padding">2dp</dimen>
复制代码

四、代码解释

3、在代码中为BottomNavigationBar添加Item选项以及相关的属性设置

BottomNavigationBar navigationBar = binding.navigationBar;
navigationBar.setMode(BottomNavigationBar.MODE_FIXED);
navigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
navigationBar.setBackgroundColor(getResources().getColor(R.color.white));
//以上为设置导航栏背景颜色，其中Style(没有水波纹效果)和模式都要选择相应的。
navigationBar.addItem(new BottomNavigationItem(R.drawable.icon_table_home_gray,HOME_PAGE)).setActiveColor(R.color.green_4D)
        .addItem(new BottomNavigationItem(R.drawable.icon_table_xinxi_gray,CONSULT)).setActiveColor(R.color.green_4D)
        .addItem(new BottomNavigationItem(R.drawable.icon_table_xuetang_gray,LEARN)).setActiveColor(R.color.green_4D)
        .addItem(new BottomNavigationItem(R.drawable.icon_table_wenda_gray,QA)).setActiveColor(R.color.green_4D)
        .addItem(new BottomNavigationItem(R.drawable.icon_wode_gray,MY)).setActiveColor(R.color.green_4D);
navigationBar.setTabSelectedListener(this);
navigationBar.setFirstSelectedPosition(0).initialise(); //所有的设置需在调用该方法前完成

复制代码

4、添加选项卡切换事件监听

bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {//这里也可以使用SimpleOnTabSelectedListener
         @Override
         public void onTabSelected(int position) {//未选中 -> 选中
         }

         @Override
         public void onTabUnselected(int position) {//选中 -> 未选中
         }

         @Override
         public void onTabReselected(int position) {//选中 -> 选中
         }
     });

复制代码

三、属性说明

这里就简单介绍一下，具体了解的看github。

1、三种Mode:

==MODE_DEFAULT==

如果Item的个数<=3就会使用MODE_FIXED模式，否则使用MODE_SHIFTING模式

==MODE_FIXED （固定大小）==

==MODE_SHIFTING （不固定大小）==

2、包含三种Style:

==BACKGROUND_STYLE_DEFAULT==

如果设置的Mode为MODE_FIXED，将使用BACKGROUND_STYLE_STATIC 。

如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。

==BACKGROUND_STYLE_STATIC==

点击的时候没有水波纹效果

航条的背景色是白色，加上setBarBackgroundColor（）可以设置成你所需要的任何背景颜色

==BACKGROUND_STYLE_RIPPLE==

点击的时候有水波纹效果

导航条的背景色是你设置的处于选中状态的 Item的颜色（ActiveColor），也就是setActiveColorResource这个设置的颜色

注意：要想设置底部导航的背景颜色有效果，必须是如下的配置

bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
bottomNavigationBar.setBarBackgroundColor(R.color.black); //换成你的背景色即可
复制代码

3、Icon的定制

如果使用颜色的变化不足以展示一个选项Item的选中与非选中状态，可以使用

BottomNavigationItem.setInActiveIcon()
复制代码

4、添加角标

new BottomNavigationItem(R.mipmap.ic_directions_bike_white_24dp, "骑行").setBadgeItem(badge) //为item添加角标
复制代码

end.

分分钟实现底部导航栏：BottomNavigationBar快速集成