脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → ANDROID BottomNavigationBar

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

 更新时间：2017年10月23日 09:02:22   作者：张瑾瑜  
本篇文章主要介绍了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

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

您可能感兴趣的文章:

相关文章

  • Android编程实现简单设置按钮颜色的方法

    Android编程实现简单设置按钮颜色的方法

    这篇文章主要介绍了Android编程实现简单设置按钮颜色的方法,涉及Android控件布局与属性设置相关操作技巧,需要的朋友可以参考下
    2017-03-03
  • Android ContentObserver 监听短信思路详解

    Android ContentObserver 监听短信思路详解

    ContentObserver允许在Android中监控特定数据的变化,可用于短信等应用的数据监听,开发者可通过继承ContentObserver并实现onChange方法来定义当目标内容变化时的响应行为,感兴趣的朋友一起看看吧
    2024-09-09
  • Android Studio配置(Android Studio4.1为例)

    Android Studio配置(Android Studio4.1为例)

    这篇文章主要介绍了Android Studio配置(Android Studio4.1为例),文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • Android view绘制流程详解

    Android view绘制流程详解

    View 的绘制是在 ViewRoot 的 performTraversals() 开始的，它历经 measure(测量), layout(布局), draw(绘制) 三个流程将 View 显示在屏幕上。
    2021-05-05
  • Android 完全退出当前应用程序的四种方法

    Android 完全退出当前应用程序的四种方法

    Android程序有很多Activity，比如说主窗口A，调用了子窗口B，如果在B中直接finish(), 接下里显示的是A。在B中如何关闭整个Android应用程序呢?本人总结了几种比较简单的实现方法
    2016-02-02
  • Retrofit之OKHttpCall源码分析

    Retrofit之OKHttpCall源码分析

    这篇文章主要介绍了Retrofit之OKHttpCall源码分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Android在linux下刷机教程

    Android在linux下刷机教程

    android 在linux下刷机，我们只需要下载相应的zip包，然后一条命令就可以完成，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧
    2016-09-09
  • Android开发岛屿数量算法示例解析

    Android开发岛屿数量算法示例解析

    这篇文章主要为大家介绍了Android开发岛屿数量算法示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • Android WebView基础应用详解

    Android WebView基础应用详解

    这篇文章主要为大家介绍了Android中WebView这一控件的基础应用，例如：播放音乐，播放视频等，文中的示例代码讲解详细，对于我们了解WebView很有帮助，需要的同学可以学习一下
    2021-12-12
  • 详解如何在Android Studio中添加RecyclerView-v7支持包

    详解如何在Android Studio中添加RecyclerView-v7支持包

    本篇文章主要介绍了详解如何在Android Studio中添加RecyclerView-v7支持包，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-02-02

最新评论