使用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
4000
.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<Fragment> 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));
}
}
}
}

好了就说这么多了。