AndroidベースナビゲーションBottomNavigationBarの使用

前言
Androidの下部ナビゲーションバーは、下図のように実際には様々な実装方法があり、RadioGroup、Linearlayout+TextVIew、TabHostで実現することができます.Google公式には、既存のナビゲーションコンポーネントはありません.しかしGoogleは、自身が発売したMaterial designでBottom Navigationナビゲーション制御を追加し、Google公式のBottomNavigationBarへのリンクを添付するhttps://github.com/Ashok-Varma/BottomNavigation
ここではBottomNavigationBarで実現し、まず効果図を見てみましょう.
プロジェクトのソース:https://github.com/baojie0327/SsrjMvp
1 BottomNavigationBarの導入

  compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.3'

2 xmlファイルにレイアウトを導入する

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

3状態、背景色などを設定する

 // TODO     
        mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        // TODO        
        mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
        mBottomNavigationBar.setBarBackgroundColor(R.color.background_gray_color);

3つのモード:

MODE_DEFAULT Itemの個数<=3ならMODE_を使いますFIXEDモード、そうでなければMODE_を使用SHIFTINGモード

MODE_FIXED(固定サイズ)塗りつぶしモードでは、選択されていないItemに文字が表示され、シフトアニメーションはありません.幅=総幅/action個数最大幅:168 dp最小幅:80 dp Padding:6 dp(8 dp)、10 dp、12 dpフォントサイズ:12 sp、14 sp

MODE_SHIFTING(サイズが固定されていない)シフトモードでは、選択されていないItemには文字が表示されず、選択されたものには文字が表示されます.切り替え時にシフトのような動画があります

3種類のスタイル

BACKGROUND_STYLE_DEFAULT設定のModeがMODEの場合FIXED、BACKGROUND_を使用STYLE_STATIC .ModeがMODEの場合SHIFTINGはBACKGROUND_を使用しますSTYLE_RIPPLE.

BACKGROUND_STYLE_STATICクリック時に水うねり効果がない航条の背景色は白で、setBarBackgroundColor()を加えると必要な背景色

に設定できます.

BACKGROUND_STYLE_RIPPLEクリック時のウォーターリップル効果ナビゲーションバーの背景色は、あなたが設定した選択状態のItemの色(ActiveColor)、つまりsetActiveColorResourceという設定の色

です.
MODE_FIXED
MODE_SHIFTING
BACKGROUND_STYLE_STATIC
BACKGROUND_STYLE_RIPPLE
4 Badgesを設定します.一般的にメッセージ・アラートに使用されます.

 mTextBadgeItem = new TextBadgeItem()
                .setBorderWidth(4)
                .setBackgroundColorResource(R.color.main_color)
                .setText("5")
                .setTextColorResource(R.color.white)
                .setBorderColorResource(R.color.colorPrimaryDark)  //     
                .setHideOnSelect(false);

        mShapeBadgeItem = new ShapeBadgeItem()
                .setShape(ShapeBadgeItem.SHAPE_OVAL)
                .setShapeColor(R.color.main_color)
                .setShapeColorResource(R.color.main_color)
                .setSizeInDp(this,10,10)
                .setEdgeMarginInDp(this,2)
//                .setSizeInPixels(30,30)
//                .setEdgeMarginInPixels(-1)
                .setGravity(Gravity.TOP | Gravity.END)
                .setHideOnSelect(false);

5 BottomNavigationBarの設定

 mBottomNavigationBar
                .addItem(new BottomNavigationItem(R.mipmap.tab_home_pressed, "  ").setActiveColorResource(R.color.main_color).setInactiveIconResource(R.mipmap.tab_home_normal).setInActiveColorResource(R.color.icon_color))
                .addItem(new BottomNavigationItem(R.mipmap.tab_benefits_check, "  ").setActiveColorResource(R.color.main_color).setInactiveIconResource(R.mipmap.tab_benefits_check_no).setInActiveColorResource(R.color.icon_color).setBadgeItem(mShapeBadgeItem))
                .addItem(new BottomNavigationItem(R.mipmap.tab_mine, "  ").setActiveColorResource(R.color.main_color).setInactiveIconResource(R.mipmap.tab_mine_off).setInActiveColorResource(R.color.icon_color).setBadgeItem(mTextBadgeItem))
                .setFirstSelectedPosition(lastSelectedPosition)
                .initialise();

6リスニングの設定

  mBottomNavigationBar.setTabSelectedListener(this);

 @Override
    public void onTabSelected(int position) {
        lastSelectedPosition = position;
        //    
        mTransaction = mManager.beginTransaction();
        hideFragment(mTransaction);

        /**
         * fragment   add + show + hide   
         *           fragment，       
         *
         * fragment   replace   
         *           
         *
         */
        switch (position){
            case 0:
                if (mNearbyFragment == null) {
                    mNearbyFragment = new NearbyFragment();
                    mTransaction.add(R.id.ll_content,
                            mNearbyFragment);
                } else {
                    mTransaction.show(mNearbyFragment);
                }
                break;
            case 1:
                if (mDisCountFragment == null) {
                    mDisCountFragment = new DisCountFragment();
                    mTransaction.add(R.id.ll_content,
                            mDisCountFragment);
                } else {
                    mTransaction.show(mDisCountFragment);
                }
                break;
            case 2:
                isLogin=mSharedPreferencesUtil.getBoolean(SharedPreferencesUtil.LOGIN_STATUS, false);
                if (isLogin==false){
                    Intent intent=new Intent(MainActivity.this, LoginActivity.class);
                    startActivity(intent);
                }else {
                    if (mMineFragment == null) {
                        mMineFragment = new MineFragment();
                        mTransaction.add(R.id.ll_content,
                                mMineFragment);
                    } else {
                        mTransaction.show(mMineFragment);
                    }
                }

                break;
        }
        //     
        mTransaction.commit();
      //  mTransaction.commitAllowingStateLoss();
    }

    @Override
    public void onTabUnselected(int position) {

    }

    @Override
    public void onTabReselected(int position) {

    }

コードのダウンロード:https://github.com/baojie0327/SsrjMvp