ANDROID BottomNavigationBar底部导航栏的实现示例

第一种介绍的就是使用开源库，因为使用开源库最简单，也更加的符合我们的审美标准，同时bottomnavigationbar还是符合当前的material design标准的。

效果展示

依赖

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

布局文件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<linearlayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <framelayout
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"/>

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

</linearlayout>

对于下面将要使用到四个fragment里面的布局文件

1.fragment_index.xml
2.fragment_map.xml
3.fragment_love.xml
4.fragment_person.xml

只需要将其中的android:text属性中的内容进行修改以做区分

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center">

  <textview
    android:text="主页"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

</linearlayout>

java代码

public class mainactivity extends appcompatactivity implements bottomnavigationbar.ontabselectedlistener {

  bottomnavigationbar mbottomnavigationbar;
  private indexfragment indexfragment;
  private mapfragment mapfragment;
  private lovefragment lovefragment;
  private personfragment personfragment;
  private badgeitem badgeitem;

  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);
    initbadge();
    setdefaultfragment();
    initnavigationbar();
  }

  private void initnavigationbar() {
    mbottomnavigationbar = (bottomnavigationbar)findviewbyid(r.id.bottom_navigation_bar);
    mbottomnavigationbar.settabselectedlistener(this);
    mbottomnavigationbar.setmode(bottomnavigationbar.mode_shifting);
    mbottomnavigationbar.setbackgroundstyle(bottomnavigationbar.background_style_ripple);
    mbottomnavigationbar
        .additem(new bottomnavigationitem(r.drawable.icon_index,"首页").setactivecolorresource(r.color.red))
        .additem(new bottomnavigationitem(r.drawable.icon_map,"地图").setactivecolorresource(r.color.blue))
        .additem(new bottomnavigationitem(r.drawable.icon_love,"关注").setactivecolorresource(r.color.yellow).setbadgeitem(badgeitem))
        .additem(new bottomnavigationitem(r.drawable.icon_person,"个人").setactivecolorresource(r.color.green))
        .setfirstselectedposition(0)
        .initialise();
  }

  public void initbadge()
  {
    badgeitem = new badgeitem()
          .setborderwidth(2)
          .setbordercolor("#ff0000")
          .setbackgroundcolor("#ff0000")
          .setgravity(gravity.right| gravity.top)
          .settext("2")
          .settextcolor("#ffffff")
          .setanimationduration(2000)
          .sethideonselect(true);
  }
  private void setdefaultfragment() {
    fragmentmanager fm = getsupportfragmentmanager();
    fragmenttransaction transaction = fm.begintransaction();
    indexfragment = new indexfragment();
    transaction.replace(r.id.fragment_container, indexfragment);
    transaction.commit();
  }

  @override
  public void ontabselected(int position) {
    log.d("ontabselected", "ontabselected: " + position);
    fragmentmanager fm = getsupportfragmentmanager();
    fragmenttransaction transaction = fm.begintransaction();
    switch (position) {
      case 0:
        if (indexfragment == null) {
          indexfragment = new indexfragment();
        }
        transaction.replace(r.id.fragment_container, indexfragment);
        break;
      case 1:
        if (mapfragment== null) {
          mapfragment = new mapfragment();
        }
        transaction.replace(r.id.fragment_container, mapfragment);
        break;
      case 2:
        if (lovefragment == null) {
          lovefragment = new lovefragment();
        }
        transaction.replace(r.id.fragment_container,lovefragment);
        break;
      case 3:
        if (personfragment == null) {
          personfragment = new personfragment();
        }
        transaction.replace(r.id.fragment_container,personfragment);
        break;
      default:
        break;
    }
    // 事务提交
    transaction.commit();
  }

  @override
  public void ontabunselected(int position) {
    log.d("ontabunselected", "ontabunselected: " + position);
  }

  @override
  public void ontabreselected(int position) {
    log.d("ontabreselected", "ontabreselected: " + position);
  }
}

代码分析

1.初始化导航条样式

对于mode和backgroundstyle各有3种选择

mode

1. 在xml代码使用android:bnbmode属性
2. 在java代码中使用setmode方法

mode_default：如果item的个数<=3就会使用mode_fixed模式，否则使用mode_shifting模式。
mode_fixed：填充模式，未选中的item会显示文字，没有换挡动画。
mode_shifting：换挡模式，未选中的item不会显示文字，选中的会显示文字。在切换的时候会有一个像换挡的动画。

backgroundstyle

1. 在xml代码使用android:bnbbackgroundstyle属性
2. 在java代码中使用setbackgroundstyle方法

background_style_default：如果设置的mode为mode_fixed，将使用background_style_static 。如果mode为mode_shifting将使用background_style_ripple。
background_style_static：点击的时候没有水波纹效果
background_style_ripple：点击的时候有水波纹效果

2.初始化导航条条目

需要几个就添加几个，包含图片和图片下方代表的文字以及设定被选中时产生效果的颜色。

mbottomnavigationbar.additem(new bottomnavigationitem(r.drawable.icon_index,"首页").setactivecolorresource(r.color.red))；

3.初始化badge

badgeitem = new badgeitem().setborderwidth(2)//边框宽度
          .setbordercolor("#ff0000")//边框颜色
          .setbackgroundcolor("#ff0000")//背景颜色
          .setgravity(gravity.right| gravity.top)//显示位置
          .settext("2")//显示文字
          .settextcolor("#ffffff")//文字颜色
          .setanimationduration(2000)//渐退、渐出的时间
          .sethideonselect(true);//选中时是否消失

然后为特定需要设置badge的条目设置上

mbottomnavigationbar.additem(new bottomnavigationitem(r.drawable.icon_love,"关注").setactivecolorresource(r.color.yellow).setbadgeitem(badgeitem))；

4.初始化fragment

在activity_main.xml当中有一个framelayout，这个需要当导航条条目发生改变时，对应着发生改变。

setdefaultfragment()：当活动打开时，事先显示哪个fragment

fragmentmanager fm = getsupportfragmentmanager();
    fragmenttransaction transaction = fm.begintransaction();
    indexfragment = new indexfragment();
    transaction.replace(r.id.fragment_container, indexfragment);
    transaction.commit();

下面则为下面的导航条目绑定监听事件

mbottomnavigationbar.settabselectedlistener(this);

ontabselected():当选中的导航条目发生改变时

fragmentmanager fm = getsupportfragmentmanager();
    fragmenttransaction transaction = fm.begintransaction();
    switch (position) {
      case 0:
        if (indexfragment == null) {
          indexfragment = new indexfragment();
        }
        transaction.replace(r.id.fragment_container, indexfragment);
        break;
      case 1:
        if (mapfragment== null) {
          mapfragment = new mapfragment();
        }
        transaction.replace(r.id.fragment_container, mapfragment);
        break;
      case 2:
        if (lovefragment == null) {
          lovefragment = new lovefragment();
        }
        transaction.replace(r.id.fragment_container,lovefragment);
        break;
      case 3:
        if (personfragment == null) {
          personfragment = new personfragment();
        }
        transaction.replace(r.id.fragment_container,personfragment);
        break;
      default:
        break;
    }
    // 事务提交
    transaction.commit();

总结

代码和解析都在上方，初学者一定要仔细的使用，方能很好的掌握。

源码：bottombarone_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。