Android 底部导航栏 BottomNavigationBar

大部分app，都采用导航栏的方式，无论是顶部导航栏还是底部导航栏，这是一个app的根骨，本文是采用Google最近添加到Material design中的底部导航栏BottomNavigationBar控件，效果好，UI美观，而且有很多效果，下面就来简单介绍一下。

先上图：

            

代码添加：

1、引入Navigation的包：

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

2、java代码部分

public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener{

    private int lastSelectedPosition;
    private int mHomeMessage;
    private BottomNavigationBar bottomNavigationBar;
    private BadgeItem mHomeNumberBadgeItem,mMusicNumberBadgeItem;

    private HomeFragment mHomeFragment;
    private BookFragment mBookFragment;
    private MusicFragment mMusicFragment;
    private FavoriteFragment mFavoriteFragment;
    private FragmentManager mFragmentManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        setDefaultFragment();
    }

    private void initView(){

        /**
         *添加标签的消息数量
         */
        mHomeNumberBadgeItem = new BadgeItem()
                .setBorderWidth(2)
                .setBackgroundColor(Color.RED)
                .setText("")
                .setHideOnSelect(false); // TODO 控制便签被点击时 消失 | 不消失


        /**
         *添加标签的消息数量
         */
        mMusicNumberBadgeItem = new BadgeItem()
                .setBorderWidth(2)
                .setBackgroundColor(Color.RED)
                .setText("99+")
                .setHideOnSelect(true);


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

        // TODO 设置模式
        bottomNavigationBar
                .setMode(BottomNavigationBar.MODE_FIXED);
        // TODO 设置背景色样式
        bottomNavigationBar
                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);

        bottomNavigationBar.setTabSelectedListener(this);

        bottomNavigationBar
                .addItem(new BottomNavigationItem(R.mipmap.ic_home_white_24dp, "Home").setActiveColorResource(R.color.orange).setBadgeItem(mHomeNumberBadgeItem))
                .addItem(new BottomNavigationItem(R.mipmap.ic_book_white_24dp, "Books").setActiveColorResource(R.color.teal))
                .addItem(new BottomNavigationItem(R.mipmap.ic_music_note_white_24dp, "Music").setActiveColorResource(R.color.blue).setBadgeItem(mMusicNumberBadgeItem))
                .addItem(new BottomNavigationItem(R.mipmap.ic_favorite_white_24dp, "Favorite").setActiveColorResource(R.color.brown))
                .setFirstSelectedPosition(lastSelectedPosition)
                .initialise();

        // TODO 设置 BadgeItem 默认隐藏 注意 这句代码在添加 BottomNavigationItem 之后
        mHomeNumberBadgeItem.hide();
    }

    private void setDefaultFragment() {

        mFragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = mFragmentManager.beginTransaction();
        mHomeFragment = mHomeFragment.newInstance("HomeFragment");
        transaction.add(R.id.tb, mHomeFragment);
        transaction.commit();

    }

    @Override
    public void onTabSelected(int position) {
        lastSelectedPosition = position;

        //开启事务
        FragmentTransaction transaction = mFragmentManager.beginTransaction();
        hideFragment(transaction);

        /**
         * fragment 用 add + show + hide 方式
         * 只有第一次切换会创建fragment，再次切换不创建
         *
         * fragment 用 replace 方式
         * 每次切换都会重新创建
         *
         */
        switch (position) {
            case 0:
                if (mHomeFragment == null) {
                    mHomeFragment = mHomeFragment.newInstance("HomeFragment");
                    transaction.add(R.id.tb, mHomeFragment);
                }else{
                    transaction.show(mHomeFragment);
                }
//                transaction.replace(R.id.tb, mHomeFragment);
                break;
            case 1:
                if (mBookFragment == null) {
                    mBookFragment = BookFragment.newInstance("mBookFragment");
                    transaction.add(R.id.tb, mBookFragment);
                }else{
                    transaction.show(mBookFragment);
                }
//                transaction.replace(R.id.tb, mBookFragment);
                break;
            case 2:
                if (mMusicFragment == null) {
                    mMusicFragment = MusicFragment.newInstance("mMusicFragment");
                    transaction.add(R.id.tb, mMusicFragment);
                }else{
                    transaction.show(mMusicFragment);
                }
//                transaction.replace(R.id.tb, mMusicFragment);
                break;
            case 3:
                if (mFavoriteFragment == null) {
                    mFavoriteFragment = FavoriteFragment.newInstance("mFavoriteFragment");
                    transaction.add(R.id.tb, mFavoriteFragment);
                }else{
                    transaction.show(mFavoriteFragment);
                }
//                transaction.replace(R.id.tb, mFavoriteFragment);
                break;
            default:
                break;
        }
        // 事务提交
        transaction.commit();
    }

    /**
     * 隐藏当前fragment
     * @param transaction
     */
    private void hideFragment(FragmentTransaction transaction){
        if (mHomeFragment != null){
            transaction.hide(mHomeFragment);
        }
        if (mBookFragment != null){
            transaction.hide(mBookFragment);
        }
        if (mMusicFragment != null){
            transaction.hide(mMusicFragment);
        }
        if (mFavoriteFragment != null){
            transaction.hide(mFavoriteFragment);
        }
    }

    @Override
    public void onTabUnselected(int position) {

    }

    @Override
    public void onTabReselected(int position) {

    }

    public void addMessage(){
        mHomeMessage ++ ;
        mHomeNumberBadgeItem.setText(mHomeMessage + "");
        mHomeNumberBadgeItem.show();
    }
}

注意先设置模式和背景样式，在添加NavigationItem，还有注意 标签的显示隐藏，代码里注释也很详细了

3、布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zs.test.bottomnavigationbardemo.MainActivity">

    <LinearLayout
        android:id="@+id/tb"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" />

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