之前底部導航欄的基本上都是自己通過selector來實現的，今天換上了Google推出的BottomNavigationBar，感覺效果還不錯，寫了一個專案上要用到的功能的demo，先上一張效果圖，大家感受一下：

這裡主要介紹BottomNavigationBar的使用，首先要在build.gradle中新增依賴：

//底部導航欄樣式BottomNavigationBar
compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.3'

然後在佈局檔案中就可以使用了：

<com.ashokvarma.bottomnavigation.BottomNavigationBar
 
android:id="@+id/bottom_navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"/>

mBottomNavigationBar= (BottomNavigationBar) findViewById(R.id
 
.bottom_navigation_bar);

大家看到的效果圖中的變化的數字和藍色五角星是分別通過TextBadgeItem和ShapeBadgeItem來實現的：

mTextBadgeItem = new TextBadgeItem()
.setBorderWidth(4)
.setBackgroundColorResource(R.color.colorAccent)
.setAnimationDuration(200)
.setText("3")
.setHideOnSelect(false);
mShapeBadgeItem = new ShapeBadgeItem()
.setShapeColorResource(
 
R.color.colorPrimary)
.setGravity(Gravity.TOP | Gravity.END)
.setHideOnSelect(false);

mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED)
.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
mBottomNavigationBar //值得一提，模式跟背景的設定都要在新增tab前面，不然不會有效果。
.setActiveColor(R.color.green);//選中顏色 圖示和文字
//                .setInActiveColor("#8e8e8e")//預設未選擇顏色
//                .setBarBackgroundColor(R.color.white);//預設背景色
mBottomNavigationBar
.addItem(new BottomNavigationItem(R.drawable.homepage_click,"首頁")
.setInactiveIcon(ContextCompat.getDrawable(MainActivity.this,R.drawable.homepage_normal))
.setBadgeItem(mShapeBadgeItem))
.addItem(new BottomNavigationItem(R.drawable.grown_wall_click,"成長牆")
.setInactiveIcon(ContextCompat.getDrawable(MainActivity.this,R.drawable.grown_wall_normal)))
.addItem(new BottomNavigationItem(R.drawable.study_click,"學管通")
.setInactiveIcon(ContextCompat.getDrawable(MainActivity.this,R.drawable.study_normal))
.setBadgeItem(mTextBadgeItem))
.addItem(new BottomNavigationItem(R.drawable.me_click,"我的")
.setInactiveIcon(ContextCompat.getDrawable(MainActivity.this,R.drawable.me_normal)))
.setFirstSelectedPosition(0)//設定預設選擇的按鈕
.initialise();//所有的設定需在呼叫該方法前完成

1. Mode包含3種Mode:

   • MODE_DEFAULT
     如果Item的個數<=3就會使用MODE_FIXED模式，否則使用MODE_SHIFTING模式
   • MODE_FIXED
     填充模式，未選中的Item會顯示文字，沒有換擋動畫。
   • MODE_SHIFTING
     換擋模式，未選中的Item不會顯示文字，選中的會顯示文字。在切換的時候會有一個像換擋的動畫

2. Background Style包含3種Style:

   • BACKGROUND_STYLE_DEFAULT
     如果設定的Mode為MODE_FIXED，將使用BACKGROUND_STYLE_STATIC 。如果Mode為MODE_SHIFTING將使用BACKGROUND_STYLE_RIPPLE。

   • BACKGROUND_STYLE_STATIC
     點選的時候沒有水波紋效果

   • BACKGROUND_STYLE_RIPPLE
     點選的時候有水波紋效果

官方效果圖：

mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.homepage_click,"首頁")

當然有時候這個填充顏色的圖片可能跟你們UI給你的設計效果圖不一致，所以你也可以像我一樣這樣新增：

mBottomNavigationBar
.addItem(new BottomNavigationItem(R.drawable.homepage_click,"首頁")
.setInactiveIcon(ContextCompat.getDrawable(MainActivity.this,R.drawable.homepage_normal))
.setBadgeItem(mShapeBadgeItem))

下面要實現BottomNavigationBar的點選選擇事件:

mBottomNavigationBar //設定lab點選事件
.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
@Override
public void onTabSelected(int position) {
switch (position){
case 0:
index = 0;
break;
case 1:
index = 1;
break;
case 2:
index = 2;
break;
case 3:
index = 3;
break;
                        }
if (index == 2) {
startActivity(new Intent(MainActivity.this, ChatActivity.class));
return;
                        }
if (currentTabIndex != index) {
FragmentTransaction trx = getSupportFragmentManager().beginTransaction();
trx.hide(mFragments[currentTabIndex]);
if (!mFragments[index].isAdded()) {
trx.add(R.id.fl, mFragments[index]);
                            }
trx.show(mFragments[index]).commit();
                        }
currentTabIndex = index;
//                        Toast.makeText(MainActivity.this,"onTabSelected"+position,Toast.LENGTH_SHORT).show();
}
@Override
public void onTabUnselected(int position) {
if (index==2){
mBottomNavigationBar.selectTab(position);
                        }
//                        Toast.makeText(MainActivity.this,"onTabUnselected"+position,Toast.LENGTH_SHORT).show();
}
@Override
public void onTabReselected(int position) {
//                        Toast.makeText(MainActivity.this,"onTabReselected"+position,Toast.LENGTH_SHORT).show();
}
                });