BottomNavigationBar使用の詳細

BottomNavigationBar使用の詳細
gitHubアドレス:https://github.com/Ashok-Varma/BottomNavigation
一、基本使用
1.Android Studioに依存を追加する:compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.3'.「≪レイアウト・ファイル｜Layout File｜Essbase_Studio≫」で、レイアウトを追加

 "@+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(){
            @Override
            public void onTabSelected(int position) {
                //   ->  
            }
            @Override
            public void onTabUnselected(int position) {
                //  ->   
            }
            @Override
            public 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_RIPPLE3種類のスタイル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 false

 shapeBadgeItem.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&SnakBar
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);