Google在自己推出的Material design中增加了Bottom Navigation導航控制。Android一直沒有官方的導航控制器,自己實現(xiàn)確實是五花八門,有了這個規(guī)定之后,就類似蘋果的底部Toolbar,以后我們的APP就會有一致的風格,先看一張效果:
1.BottomNavigationBar的下載地址
https://github.com/Ashok-Varma/BottomNavigation
2.用法
compile 'com.ashokvarma.android:bottom-navigation-bar:1.4.3'
布局
<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@+id/bottom_navigation_bar"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
初始化
bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.*bottom_navigation_bar*);
設置背景樣式和選中/未選中 顏色(整體的)
bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING)
.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
bottomNavigationBar //值得一提,模式跟背景的設置都要在添加tab前面,不然不會有效果。
.setActiveColor(R.color.colorPrimary)//選中顏色 圖標和文字
.setInActiveColor("#8e8e8e")//默認未選擇顏色
.setBarBackgroundColor("#ECECEC");//默認背景色
添加item
bottomNavigationBar
.addItem(new BottomNavigationItem(R.drawable.ic_favorite_white_24dp,"Like"))
.addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp,"Home"))
.addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp,"Music"))
.addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp,"TV"))
// .addItem(new BottomNavigationItem(R.drawable.ic_favorite_white_24dp,"Like").setActiveColor().setInActiveColor())
// .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp,"Home").setActiveColor().setInActiveColor())
// .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp,"Music").setActiveColor().setInActiveColor())
// .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp,"TV").setActiveColor().setInActiveColor())
.setFirstSelectedPosition(1)//設置默認選擇的按鈕
.initialise();//所有的設置需在調用該方法前完成
這里添加item可以在添加時設置圖標 和文字,也可以在后面繼續(xù)添加選中顏色和默認顏色(每一個可以不同)
設置底部按鈕點擊事件
bottomNavigationBar //設置lab點擊事件
.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
@Override
public void onTabSelected(int position) {
switch (position){
case 0:
Toast.makeText(MainActivity.this,"竟讓有這種操作!",Toast.LENGTH_SHORT).show();
break;
case 1:
Toast.makeText(MainActivity.this,"真的有這種操作!",Toast.LENGTH_SHORT).show();
break;
case 2:
Toast.makeText(MainActivity.this,"這是假的操作!",Toast.LENGTH_SHORT).show();
break;
case 3:
Toast.makeText(MainActivity.this,"我有一句嗎賣批不知當講不當講!",Toast.LENGTH_SHORT).show();
break;
}
}
@Override
public void onTabUnselected(int position) {
}
@Override
public void onTabReselected(int position) {
}
});
這里可以根據(jù)postion切換fragment 我就直接彈吐司提示了
設置BottomNavigationBar
1Mode
xml:bnbMode方法:setMode()包含3種Mode:
MODE_DEFAULT如果Item的個數(shù)<=3就會使用MODE_FIXED模式,否則使用MODE_SHIFTING模式
MODE_FIXED填充模式,未選中的Item會顯示文字,沒有換擋動畫。
MODE_SHIFTING換擋模式,未選中的Item不會顯示文字,選中的會顯示文字。在切換的時候會有一個像換擋的動畫
2.Background Style
xml: bnbBackgroundStyle方法:setBackgroundStyles()包含3種Style:
BACKGROUND_STYLE_DEFAULT如果設置的Mode為MODE_FIXED,將使用BACKGROUND_STYLE_STATIC 。如果Mode為MODE_SHIFTING將使用BACKGROUND_STYLE_RIPPLE。
BACKGROUND_STYLE_STATIC點擊的時候沒有水波紋效果
BACKGROUND_STYLE_RIPPLE點擊的時候有水波紋效果
MODE_FIXED+BACKGROUND_STYLE_STATIC效果

MODE_FIXED+BACKGROUND_STYLE_RIPPLE效果

MODE_SHIFTING+BACKGROUND_STYLE_STATIC效果

MODE_SHIFTING+BACKGROUND_STYLE_RIPPLE效果

值得一提,模式跟背景的設置都要在添加tab前面,不然不會有效果。
3.設置默認顏色
xml:bnbActiveColor, bnbInactiveColor, bnbBackgroundColor方法:setActiveColor, setInActiveColor, setBarBackgroundColor例如:
bottomNavigationBar .setActiveColor(R.color.primary) .setInActiveColor("#FFFFFF") .setBarBackgroundColor("#ECECEC")
in-active color:
表示未選中Item中的圖標和文本顏色。默認為 Color.LTGRAY
active color :
在BACKGROUND_STYLE_STATIC下,表示選中Item的圖標和文本顏色。而在BACKGROUND_STYLE_RIPPLE下,表示整個容器的背景色。默認Theme's Primary Color
background color :
在BACKGROUND_STYLE_STATIC下,表示整個容器的背景色。而在BACKGROUND_STYLE_RIPPLE下,表示選中Item的圖標和文本顏色。默認 Color.WHITE
4.定制Item的選中未選中顏色
我們可以為每個Item設置選中未選中的顏色,如果沒有設置,將繼承BottomNavigationBar設置的選中未選中顏色。方法:
BottomNavigationItem.setInActiveColor() 設置Item未選中顏色方法BottomNavigationItem.setActiveColor() 設置Item選中顏色方法
5.Icon的定制
如果使用顏色的變化不足以展示一個選項Item的選中與非選中狀態(tài),可以使用BottomNavigationItem.setInActiveIcon()方法來設置。例如:
new BottomNavigationItem(R.mipmap.ic_directions_bus_white_24dp, "公交")//這里表示選中的圖片 .setInactiveIcon(ContextCompat.getDrawable(this,R.mipmap.ic_launcher)))//非選中的圖片
6.設置自動隱藏與顯示
如果BottomNavigationBar是在CoordinatorLayout布局里,默認設置當向下滑動時會自動隱藏它,當向上滑動時會自動顯示它。我們可以通過setAutoHideEnabled(boolean)設置是否允許這種行為,好像這個方法木有啦。
7.手動隱藏與顯示
我們可以在任何時間,通過代碼隱藏或顯示BottomNavigationBar方法:
bottomNavigationBar.hide();//隱藏bottomNavigationBar.hide(true);//隱藏是否啟動動畫,這里并不能自定義動畫bottomNavigationBar.unHide();//顯示bottomNavigationBar.hide(true);//隱藏是否啟動動畫,這里并不能自定義動畫
實際上這里都是通過屬性動畫ViewPropertyAnimatorCompat來完成的,所以如果我們要自定義它的隱藏和顯示的話,通過屬性動畫即可實現(xiàn)。
8.為Item添加Badge
什么是Badge,看圖說話:

上面紅色的圖標就是Badge了,那如何使用呢?
1.創(chuàng)建一個BadgeItem
badge=new BadgeItem()
// .setBorderWidth(2)//Badge的Border(邊界)寬度
// .setBorderColor("#FF0000")//Badge的Border顏色
// .setBackgroundColor("#9ACD32")//Badge背景顏色
// .setGravity(Gravity.RIGHT| Gravity.TOP)//位置,默認右上角
.setText("2")//顯示的文本
// .setTextColor("#F0F8FF")//文本顏色
// .setAnimationDuration(2000)
// .setHideOnSelect(true)//當選中狀態(tài)時消失,非選中狀態(tài)顯示
2.為BottomNavigationItem設置BadgeItemnew
BottomNavigationItem(R.mipmap.ic_directions_bike_white_24dp, "騎行").setBadgeItem(badge)