分分钟实现底部导航栏：BottomNavigationBar快速集成
github地址（完整Demo下载）
/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="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:id="@+id/webViewParent"><com.ashokvarma.bottomnavigation.BottomNavigationBarandroid:layout_width="match_parent"android:layout_height="wrap_content"android:id="@+id/navigationBar"android:layout_alignParentBottom="true"></com.ashokvarma.bottomnavigation.BottomNavigationBar><FrameLayoutandroid: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<>();复制代码
初始化的方法：
@Overrideprotected 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
@Overridepublic 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 "/datcom.luck.picture.lib.adapter.PictureImageGridAdapter.onBindViewHolder(PictureImageGridAdapter.java:186)复制代码
4、调整图标和文字的间距
在自己项目里value文件夹中的dimens.xml里面复写fixed_height_bottom_padding（默认是10dp，值越小，间距越大。适用的模式是BottomNavigationBar.MODE_FIXED）
如果模式是BottomNavigationBar.MODE_SHIFTING也是一样，复写和修改相关的参数
详情可看 /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@Overridepublic void onTabSelected(int position) {//未选中 -> 选中}@Overridepublic void onTabUnselected(int position) {//选中 -> 未选中}@Overridepublic 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.
