简介
在 Android Design Support Library 25 的时候，Google 推出了新一代 底部导航栏 控件： BottomNavigationView
我们在前面的教程中（TODO::TabLayout）有讲过用 TabLayout 实现底部导航栏，BottomNavigationView 的作用其实跟 TabLayout 作为底部导航栏差不多，只是它在性能上和动画效果上有所提升。
最后老规矩先来看下 BottomNavigationView 的官方文档：
BottomNavigationView 存在于 design 包中，且继承于FrameLayout。
BottomNavigationView 使用规范
在 Google Material Design 中，对于底部导航栏（bottom-navigation-behavior）的设计规范，提及了一些要求，可以更好地让我们知道什么时候或者应当如何正确使用 BottomNavigationView 去维护一个具备材料特征的应用：
BottomNavigationView 应当为应用顶层界面提供快速访问的导航接口。只有那些需要直接访问的目标（界面）才应当放入到 BottomNavigationView 中。
BottomNavigationView 一般提供3~5个目标（界面）导航接口。如果应用只有两个目标导航，建议使用 TabLayout。如果应用超过5个目标导航界面，建议使用抽屉式导航栏（DrawerLayout）。
每个选项的最大宽度为168dp，最小宽度为80dp，高度为56dp，每个图标（icon）的大小是24×24dp，对于选中选项，图标距离顶层内边距为6dp，非选中则为8dp；文字距离底部内边距为10dp,左右内边距为12dp。选项的高度（海拔）为8dp。
活动图标应当使用应用 primary color 进行着色。BottomNavigationView 背景浅色或灰色时，图标和文字要带鲜艳颜色；背景带颜色时，应当使用浅色或灰色图标。千万不要两者混合用在一起，标签的颜色任何时刻最多使用一种。
如果 view 得到焦点，那么 view 的图标和文字应当进行显示。如果只有3个选项，所有的图标和文字标题在任何时刻都应当显示。如果有4个或5个选项，非活动 view 应当只显示图标。
通过 BottomNavigationView 进行导航时，应当重置任务状态。当用户选中活动标签时，BottomNavigationView 应当展示对应页面的顶层界面给到用户。不支持滑动切换。
开发人员应当注意底部导航栏和标签栏（tabs）的结合，当导航时，这可能会为用户带来困扰。
BottomNavigationView 使用方法
下面介绍下 BottomNavigationView 的基本使用：
直接看布局文件：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="@menu/menu_bottom_nav" />
</RelativeLayout>
以上就是 BottomNavigationView 最简单的布局方式，里面最主要的就是app:menu属性的配置，通过app:menu，我们可以给 BottomNavigationView 设置一个菜单选项，其菜单内容具体如下：
<?xml version="1.0" encoding="utf-8"?>
<!-- res/menu/menu_bottom_nav.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/item_1"
android:icon="@drawable/ic_message_black_24dp"
android:title="消息" />
<item
android:id="@+id/item_2"
android:icon="@drawable/ic_account_box_black_24dp"
android:title="联系人" />
<item
android:id="@+id/item_3"
android:icon="@drawable/ic_favorite_black_24dp"
android:title="动态" />
</menu>
菜单 menu 主要提供了3个选项（Item）。
按上面的布局，其效果如下图所示：
从效果上看，基本的需求都已经具备，包括点击选中，波纹，选中图标增大效果等等（这里 BottomNavigationView 的背景是浅色的，按照规范我们应当为图标和文本设置其他颜色，但这里作为最简化例子，就暂时先忽略这些规范 -_-）。
但是按默认配置还是存在一些问题的，比如图标颜色被灰度化了······
解决方法是通过代码调用：this.mBotNavi.setItemIconTintList(null);，这样图标颜色就能恢复到原本颜色了。
但是更好的做法是为 图标颜色 添加一个选择器效果，为用户带来更好的体验。配置的方法也很简单：
- 首先，创建一个
selector：
<?xml version="1.0" encoding="utf-8"?>
<!--res/color/selector_bottom_navi.xml-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#FF0000" android:state_checked="true"></item>
<item android:color="#000000"></item>
</selector>
设置选中的时候，图标颜色为红色；未选中的时候，图标颜色为黑色；
- 然后，将该 selector 通过
app:itemIconTint="@color/selector_bottom_navi"设置给 BottomNavigationView。
效果如下：
除了给 图标颜色 设置选择器外，我们也可以给 图标 设置一个选择器，通常用来更换图标：
- 同样，新建一个 selector：
<?xml version="1.0" encoding="utf-8"?>
<!--res/drawable/selector_bottom_navi_icon.xml-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_3d_rotation_black_24dp" android:state_checked="true"></item>
<item android:drawable="@drawable/ic_message_black_24dp"></item>
</selector>
- 然后，在
app:menu设置的菜单中，给某个菜单图标设置该 selector
即可：
<?xml version="1.0" encoding="utf-8"?>
<!-- res/menu/menu_bottom_nav.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/item_1"
android:icon="@drawable/selector_bottom_navi_icon" //selector
android:title="消息" />
<item
android:id="@+id/item_2"
android:icon="@drawable/ic_account_box_black_24dp"
android:title="联系人" />
<item
android:id="@+id/item_3"
android:icon="@drawable/ic_favorite_black_24dp"
android:title="动态" />
</menu>
我们这里就只为第一个菜单图标设置 selector，效果如下所示：
同理，我们也可以通过app:itemTextColor属性修改字体颜色，但更佳的体验同样是给字体设置一个 selector，这里我们使用复用设置 图标颜色 的 selector：app:itemTextColor="@color/selector_bottom_navi"
效果如下：
BottomNavigationView 警惕点
BottomNavigationView 虽然可以很方便的帮助我们实现底部导航栏，但某些时候，你可能会遇到一些坑，就比如下面几种情况：
-
BottomNavigationView 的菜单个数不能超过5个，否则将会产生
IllegalArgumentException：
- 当底部导航栏菜单超过3个时，BottomNavigationView 会自动开启移位模式（Shift Mode），现象就是当你选中某个菜单时，其他菜单变得较小，并且没有显示标题，切换的时候，菜单会带着移动特效。如下图所示：
如果你对这种效果不满意，想取消移动模式（Shift Mode），让 BottomNavigationView 的表现跟3个菜单时的一致，怎么办呢？
很可惜，BottomNavigationView 并没有提供接口去禁止移动模式，所以只能通过非常规方法进行设置，具体方法请参考：
How to disable BottomNavigationView shift mode?
BottomNavigationView 与 ViewPager 结合
我们前面使用 TabLayout 的时候，可以很方便的结合 ViewPager 联合使用，因为 TabLayout 已提供了相关接口；
很可惜的是，BottomNavigationView 并未像 TabLayout 一样提供一个接口让我们结合 ViewPager。所以，我们只能自己手动进行实现了。
实现的原理其实很简单，就是对 BottomNavigationView 进行点击监听，然后控制 ViewPager 滑动到相应页面即可；同样也要对 ViewPager 进行事件监听，然后依据滑动方向设置 BottomNavigationView 相应的菜单状态。具体代码如下：
首先给出布局：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.BottomNavigationView
android:id="@+id/botNavi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@color/colorPrimary"
app:itemIconTint="@color/selector_bottom_navi"
app:itemTextColor="@color/selector_bottom_navi"
app:menu="@menu/menu_bottom_nav" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/botNavi"
android:layout_alignParentTop="true" />
</RelativeLayout>
源码如下：
public class BottomNavigationViewActivity extends AppCompatActivity {
@BindView(R.id.botNavi)
private BottomNavigationView mBotNavi;
@BindView(R.id.viewpager)
private ViewPager mViewPager;
@Override
@ViewInject(ViewInject.ACTIVITY)
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bottom_nav);
initView();
initViewPagerEvent();
initBotNaviEvent();
}
private void initView() {
// this.mBotNavi.setItemIconTintList(null);
this.mViewPager.setAdapter(new FragmentPagerAdapter(this.getSupportFragmentManager()) {
private List<Fragment> fragments = Arrays.asList(
MyFragment.newInstance("one"),
MyFragment.newInstance("two"),
MyFragment.newInstance("three")
);
@Override
public Fragment getItem(int position) {
return this.fragments.get(position);
}
@Override
public int getCount() {
return this.fragments.size();
}
});
}
private void initViewPagerEvent() {
this.mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
BottomNavigationViewActivity.this.resetBotNaviItemState();
MenuItem item = BottomNavigationViewActivity.this.mBotNavi.getMenu().getItem(position);
item.setCheckable(true);
item.setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initBotNaviEvent() {
this.mBotNavi.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
boolean bSelected = false;
switch (item.getItemId()) {
case R.id.item_1:
BottomNavigationViewActivity.this.mViewPager.setCurrentItem(0);
bSelected = true;
break;
case R.id.item_2:
BottomNavigationViewActivity.this.mViewPager.setCurrentItem(1);
bSelected = true;
break;
case R.id.item_3:
BottomNavigationViewActivity.this.mViewPager.setCurrentItem(2);
bSelected = true;
break;
default:
break;
}
return bSelected;
}
});
}
@MainThread
private void resetBotNaviItemState() {
Menu menu = this.mBotNavi.getMenu();
for (int i = 0, len = menu.size(); i < len; ++i) {
menu.getItem(i).setCheckable(true);
menu.getItem(i).setChecked(false);
}
}
}
效果如下：
彩蛋
如果你对 BottomNavigationView 的效果不太满意，你还可以选择其他一些类似的第三方开源控件，就比如：BottomNavigation
本文所示素材图标来源于 Android Studio的一个插件：android material design icon generator。该插件中拥有官方全套的 Material Design 图片素材，安装这个插件后，直接快捷键 ctrl + alt +m 就可以进入下载界面。
