使用BottomNavigationBar实现底部导航栏

1,概述

之前底部导航栏基本上都是通过Radiobutton结合selector实现的，最近在项目中换成了BottomNavigationBar这个控件，整体感觉还不错，先上一张官方的效果图，大家感受一下：

2,基本使用

首先需要添加引用:

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

然后在布局文件中调用

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

准备工作就这么多，接下来就是在Activity中使用。首先是控件初始化这没什么好说的，之后就是一个基本属性的使用。如果你希望在你的导航栏出现如下所示的效果，你可以通过TextBadgeItem和ShapeBadgeItem来实现，然后通过setBadgeItem(mTextBadgeItem 或mShapeBadgeItem )方法进行添加：

mTextBadgeItem = new TextBadgeItem()
        .setBorderWidth(4)
        .setBackgroundColorResource(R.color.colorAccent)
        .setAnimationDuration(200)
        .setText("3")
        .setHideOnSelect(false);

mShapeBadgeItem = new ShapeBadgeItem()
        .setShapeColorResource(R.color.colorPrimary)
        .setGravity(Gravity.TOP | Gravity.END)
        .setHideOnSelect(false);

BottomNavigationBar的基本属性

bar.setMode(BottomNavigationBar.MODE_SHIFTING);
        bar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);//设置Mode和BackgroundStyle

Mode和BackgroundStyle分别有三种，分别包含一种Default模式：
Mode包含3种Mode:

MODE_DEFAULT
如果Item的个数<=3就会使用MODE_FIXED模式，否则使用MODE_SHIFTING模式
MODE_FIXED
填充模式，未选中的Item会显示文字，没有换挡动画。
MODE_SHIFTING
换挡模式，未选中的Item不会显示文字，选中的会显示文字。在切换的时候会有一个像换挡的动画
Background Style包含3种Style:

BACKGROUND_STYLE_DEFAULT
如果设置的Mode为MODE_FIXED，将使用BACKGROUND_STYLE_STATIC 。如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。

BACKGROUND_STYLE_STATIC
点击的时候没有水波纹效果

BACKGROUND_STYLE_RIPPLE
点击的时候有水波纹效果

bar.addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "Home")//被点击之后的图片
                .setInactiveIcon(ContextCompat.getDrawable(this,R.mipmap.first))//默认的图片
                .setActiveColorResource(R.color.orange))//点击之后的背景颜色
                .addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "Books")
                        .setInactiveIcon(ContextCompat.getDrawable(this,R.mipmap.content_iv)//默认的图片
 .setBadgeItem(mShapeBadgeItem))//在右上角显示标记
                        .setActiveColorResource(R.color.blue))
                .addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "Music").setActiveColorResource(R.color.red))
                .addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "Games").setActiveColorResource(R.color.green))
                .setFirstSelectedPosition(0)//设置默认选择的按钮
                .initialise();//所有的设置需在调用该方法前完成

bottomnavigationbar常用的属性也就差不多这样吧。用到的方法在上面也都有注释，在这里就不说了。接下来就是bottomnavigationbar的点击事件了。

 bar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
            @Override
            public void onTabSelected(int position) {
            //被选中时所做的操作
                transaction = manager.beginTransaction();
                switch (position) {
                    case 0:
                        show(0);
                        transaction.commit();
                        break;
                    case 1:
                        show(1);
                        transaction.commit();
                        break;
                    case 2:
                        show(2);
                        transaction.commit();
                        break;
                    case 3:
                        show(3);
                        transaction.commit();
                        break;
                }
            }

            @Override
            public void onTabUnselected(int position) {
            }

            @Override
            public void onTabReselected(int position) {
            }
        });

BottomNavigationBar的点击事件很简单，其中的三方法大家看一下应该都能明白。我这里也没做什么操作，无外乎就是几个fragment之间的切换这个没什么好说的。

总结

说的有点乱，不过也没什么难的东西应该很容易理解。最后附上完成代码。

public class Main2Activity extends AppCompatActivity {
    private BottomNavigationBar bar;
    private FrameLayout frameLayout;

    private HomepageFragment homepage;
    private ConvenientFragment convenient;
    private MyselfFragment myself;
    private SettingFragment setting;
    private List list;

    private FragmentManager manager;
    private FragmentTransaction transaction;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        bar = (BottomNavigationBar) findViewById(R.id.bar);
        frameLayout = (FrameLayout) findViewById(R.id.frame);
      //  如果设置的Mode为MODE_FIXED，将使用BACKGROUND_STYLE_STATIC 。如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE
        bar.setMode(BottomNavigationBar.MODE_SHIFTING);
        bar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
        bar.addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "Home")//被点击之后的图片
                .setInactiveIcon(ContextCompat.getDrawable(this,R.mipmap.first))//默认的图片
                .setActiveColorResource(R.color.orange))//点击之后的背景颜色
                .addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "Books")
                        .setInactiveIcon(ContextCompat.getDrawable(this,R.mipmap.content_iv))//默认的图片
                        .setActiveColorResource(R.color.blue))
                .addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "Music").setActiveColorResource(R.color.red))
                .addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "Games").setActiveColorResource(R.color.green))
                .setFirstSelectedPosition(0)
                .initialise();

        list = new ArrayList<>();
        homepage = new HomepageFragment();
        convenient = new ConvenientFragment();
        myself = new MyselfFragment();
        setting = new SettingFragment();
        list.add(homepage);
        list.add(convenient);
        list.add(myself);
        list.add(setting);


        manager = getSupportFragmentManager();
        transaction = manager.beginTransaction();
        transaction.add(R.id.frame, list.get(3));
        transaction.add(R.id.frame, list.get(2));
        transaction.add(R.id.frame, list.get(1));
        transaction.add(R.id.frame, list.get(0));
        transaction.commit();

        bar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
            @Override
            public void onTabSelected(int position) {
                transaction = manager.beginTransaction();
                switch (position) {
                    case 0:
                        show(0);
                        transaction.commit();
                        break;
                    case 1:
                        show(1);
                        transaction.commit();
                        break;
                    case 2:
                        show(2);
                        transaction.commit();
                        break;
                    case 3:
                        show(3);
                        transaction.commit();
                        break;
                }
            }

            @Override
            public void onTabUnselected(int position) {
            }

            @Override
            public void onTabReselected(int position) {
            }
        });
    }
    private void show(int postion) {
        for (int i = 0; i < list.size(); i++) {
            if(postion==i){
                transaction.show(list.get(postion));
            }else {
                transaction.hide(list.get(i));
            }
        }
    }
}

好了就说这么多了。