gitHub地址：https://github.com/Ashok-Varma/BottomNavigation

一、基本使用

1.在AndroidStudio下添加依賴：?
compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.3'?
2.在布局文件中，添加布局

<com.ashokvarma.bottomnavigation.BottomNavigationBarandroid:id="@+id/bottom_navigation_bar"android:layout_width="match_parent"android:layout_height="wrap_content"/>

　　

3.在代碼中為BottomNavigationBar添加Item選項

BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home")).addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books")).addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music")).addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV")).addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games")).initialise();//所有的設置需在調用該方法前完成

　　

4.添加選項卡切換事件監聽

bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener(){@Overridepublic void onTabSelected(int position) {//未選中->選中}@Overridepublic void onTabUnselected(int position) {//選中->未選中}@Overridepublic void onTabReselected(int position) {//選中->選中}});

　　

二、BottomNavigationBar定制

1. 模式Modes

屬性：bnbMode?
值：mode_default, mode_fixed, mode_shifting, mode_fixed_no_title, mode_shifting_no_title?
方法：setMode()?
參數：MODE_DEFAULT, MODE_FIXED, MODE_SHIFTING, MODE_FIXED_NO_TITLE, MODE_SHIFTING_NO_TITLE

每種類型都會顯示菜單Icon，只有名稱顯示方式不同

mode_default:如果選項大于3個，使用mode_shifting，否則使用mode_fixed

mode_fixed:每個item對應名稱，不選中也會顯示

mode_shifting:每個item對應名稱，只有選中才會顯示，不選中隱藏

mode_fixed_no_title:相當于mode_fixed只是不顯示所有文字

mode_shifting_no_title:相當于mode_shifting只是不顯示所有文字

2. 背景樣式Background Styles

屬性：app:bnbBackgroundStyle?
值：background_style_default, background_style_static, background_style_ripple?
方法：setBackgroundStyle()?
參數：BACKGROUND_STYLE_DEFAULT, BACKGROUND_STYLE_STATIC, BACKGROUND_STYLE_RIPPLE

3種style

background_style_default:如果mode設為MODE_FIXED，默認使用BACKGROUND_STYLE_STATIC；如果mode設為MODE_SHIFTING，默認使用 BACKGROUND_STYLE_RIPPLE

background_style_static:點擊的時候沒有水波紋效果

background_style_ripple:點擊的時候有水波紋效果

3.顏色Colors

屬性：bnbActiveColor, bnbInactiveColor, bnbBackgroundColor?
方法：setActiveColor, setInActiveColor, setBarBackgroundColor?
值：顏色值或者資源?
例如：

bottomNavigationBar.setActiveColor(R.color.primary).setInActiveColor("#FFFFFF").setBarBackgroundColor("#ECECEC")

　　

類型和默認值

in-active color：圖標和文本未被激活或選中的顏色；默認顏色為Theme’s Primary Color

active color : 在BACKGROUND_STYLE_STATIC下，為圖標和文本激活或選中的顏色；在BACKGROUND_STYLE_RIPPLE下，為整個控件的背景顏色；默認顏色為Color.LTGRAY

background color :在BACKGROUND_STYLE_STATIC 下，為整個空控件的背景色；在 BACKGROUND_STYLE_RIPPLE 下為圖標和文本被激活或選中的顏色；默認顏色為Color.WHITE

4.自定義Item顏色Individual BottomNavigationItem Colors

如果Item的選中/未選中顏色需要特殊處理，可以調用

new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setActiveColor(R.color.orange)//設置選中的顏色.setInActiveColor(R.color.teal)//設為未選中的顏色

　　

5.陰影高度Elevation

屬性：bnbElevation

如果不需要陰影或者想要自定義，可以設置為0dp，默認為8dp

6.自定義選項圖標BottomNavigationItem Icon Customisations

可以設置選項，選中和未選中使用不同的圖標

//setInactiveIcon()設置未選中的圖標 new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setInactiveIcon(R.drawable.ic_home_black)

　　

7.自動隱藏/手動隱藏

自動隱藏：

如果容器在Co-ordinator Layout布局內，默認情況下，向下滾動會隱藏，向上滾動會展示；通過調用方法setAutoHideEnabled(false)可以關閉該特性

手動隱藏：

調用方法

bottomNavigationBar.hide();//隱藏 bottomNavigationBar.show();//顯示

　　

展示和隱藏時動畫模式

默認都是動畫模式，參數傳false可以關閉動畫

bottomNavigationBar.hide(false);//關閉動畫效果 bottomNavigationBar.show(false);//關閉動畫效果

　　

isHidden() 返回是否隱藏

三、BottomNavigationBar角標（小紅點）Badges

基本使用

1.如何添加

• 每個item都可以添加badge
• 每個item又一個badges
• 首先創建一個BadgeItem，然后關聯到item上

2.類型

• TextBadgeItem
• ShapeBadgeItem

3.代碼示例

//setBadgeItem(badgeItem) TextBadgeItem numberBadgeItem = new TextBadgeItem(); ShapeBadgeItem shapeBadgeItem = new ShapeBadgeItem(); bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setActiveColorResource(R.color.orange).setBadgeItem(numberBadgeItem))bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setActiveColorResource(R.color.orange).setBadgeItem(shapeBadgeItem))numberBadgeItem.setText("")// 更新數據

　　也可以自定義badgeItem

numberBadgeItem.setText("9") //顯示的文本.setBackgroundColor("#FF0000") //背景色.setTextColor("#FFFFFF") //文本顏色.setBorderColor("#000000") //border顏色.setBorderWidth(5) //border寬度px.setBackgroundColorResource(R.color.colorPrimaryDark) //背景色，資源文件獲取.setBorderColorResource(R.color.colorPrimary) //border顏色，資源文件獲取.setTextColorResource(R.color.colorAccent) //文本顏色，資源文件獲取.setAnimationDuration(30) //隱藏和展示的動畫速度，單位毫秒,和setHideOnSelect一起使用.setGravity(Gravity.RIGHT|Gravity.TOP) //位置，默認右上角.setHideOnSelect(true); //true：當選中狀態時消失，非選中狀態顯示,moren falseshapeBadgeItem.setShape(SHAPE_OVAL) //形狀.setShapeColor(Color.BLUE) //顏色.setShapeColorResource(R.color.colorPrimaryDark) //顏色，資源文件獲取.setEdgeMarginInDp(this,0) //距離Item的margin，dp.setEdgeMarginInPixels(20) //距離Item的margin，px.setSizeInDp(this,10,10) //寬高，dp.setSizeInPixels(5,5) //寬高，px.setAnimationDuration(200) //隱藏和展示的動畫速度，單位毫秒,和setHideOnSelect一起使用.setGravity(Gravity.LEFT) //位置，默認右上角.setHideOnSelect(true); //true：當選中狀態時消失，非選中狀態顯示,moren false

　　

4.badgeItem方法簡介

屬性描述方法參數

Hide On Select	選中時隱藏，默認false	setHideOnSelect()	boolean
Animation Duration	顯示隱藏的動畫時間，默認200	setAnimationDuration()	int毫秒
Hide	隱藏并有動畫效果	hide()	?
Hide with animation control	隱藏時動畫效果，默認有(true)	hide()	boolean
UnHide/Show	顯示并有動畫效果	show()	?
UnHide/Show with animation control	顯示時動畫效果，默認有(true)	show()	boolean
Toggle	toggles badge between hide/show with animation	toggle()	?
Toggle with animation control	toggles badge between hide/show with/without animation	toggle()	?
Is Hidden	是否隱藏	isHidden()	?
Graviy	設置位置，默認右上角	setGravity()	Gravity.TOP/BOTTOM/LEFT/RIGHT任意組合

5.textBadgeItem方法簡介

屬性描述方法參數

Textt	設置文本	setText()	CharSequence
Text Color	設置文本顏色，默認白色	setTextColorResource(), setTextColor()	Resource/ColorCode(String)/Color
BackgroundColor	設置背景顏色	setBackgroundColorResource(), setBackgroundColor()	Resource/ColorCode(String)/Color
Border Width	設置border寬度	setBorderWidth()	int (px值)
Border Color	設置border顏色	setBorderColorResource(), setBorderColor()	Resource/ColorCode(String)/Color

6.shapeBadgeItem方法簡介

屬性描述方法參數

Shape	設置形狀	setShape()	SHAPE_OVAL(橢圓), SHAPE_RECTANGLE(矩形), SHAPE_HEART(心形), SHAPE_STAR_3_VERTICES(三角形), SHAPE_STAR_4_VERTICES(菱形), SHAPE_STAR_5_VERTICES(五角星), SHAPE_STAR_6_VERTICES(六角)
yanse	設置顏色	setShapeColorResource(), setShapeColor()	Resource/ColorCode(String)/Color
Shape Size	設置寬高	setSizeInDp(), setSizeInPixels()	int(width and height in pixels/dp)
Shape Margin	Margin around the shape	setEdgeMarginInDp(), setEdgeMarginInPixels()	int (margin in pixels/dp)

四、FAB & SnackBar

1.SnackBar

底部導航自動與snackBar同步，無需任何代碼。

2.FAB

• FAB和BottomNavigationBar必須在同一個Coordinator Layout.
• 調用bottomNavigationBar的setFab()方法關聯

3.示例代碼

FloatingActionButton fabHome = (FloatingActionButton) findViewById(R.id.fab_home); BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bnb); bottomNavigationBar.setFab(fabHome);

　　

轉載于:https://www.cnblogs.com/geili/p/10247773.html

總結

以上是生活随笔為你收集整理的BottomNavigationBar使用详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。