Advertisement

Android底部导航栏组件:BottomNavigationBar

阅读量:

Google正式推出了自己特色的底部导航栏。这一项功能对手机应用开发者来说是个极大的便利或促进。

废话不多说,先来看一下效果:

这里写图片描述

怎么样,是不是还行,其实使用起来也非常简单,下面跟着我来做吧!

添加依赖:

复制代码
    compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.1'
    
      
    
    代码解释

布局文件:

复制代码
    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navbar"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true"/>
    
      
      
      
      
      
    
    代码解释

生成导航栏的每一个item:

复制代码
     BottomNavigationBar navbar = (BottomNavigationBar) findViewById(R.id.bottom_navbar);
     //生成BottomNavigationBar中的每一个item
        BottomNavigationItem item1 = new BottomNavigationItem(R.mipmap.ic_home,"home");
        BottomNavigationItem item2 = new BottomNavigationItem(R.mipmap.ic_chat,"chat");
        BottomNavigationItem item3 = new BottomNavigationItem(R.mipmap.ic_user,"user");
        //将item添加到BottomNavigationBar中
        navbar.addItem(item1);
        navbar.addItem(item2);
        navbar.addItem(item3);
    
      
      
      
      
      
      
      
      
      
    
    代码解释

设置点击、未点击、和背景色:

复制代码
        //统一设置点击颜色
        navbar.setActiveColor(R.color.colorAccent);
        //统一设置未点击颜色
        navbar.setInActiveColor(R.color.colorWhite);
        //统一设置BottomNavigationBar的背景色
        navbar.setBarBackgroundColor(R.color.colorBlue);
    
      
      
      
      
      
      
    
    代码解释

设置BottomNavigationBar的mode和style

复制代码
        //设置BottomNavigationBar的模式
        navbar.setMode(BottomNavigationBar.MODE_FIXED);
        //设置背景样式
     navbar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
    
      
      
      
      
    
    代码解释

这里要说明一下,mode分为MODE_FIXED和MODE_SHIFTING。
MODE_FIXED :常规模式,正常的点击反馈效果;
MODE_SHIFTING :动画模式,点击时会有滑动效果,未选中item只显示icon,不显示文字。

BackgroundStyle 分为BACKGROUND_STYLE_STATIC和BACKGROUND_STYLE_RIPPLE。

BACKGROUND_STYLE_STATIC :正常背景样式,在此样式下,setActiveColor是点击时文字颜色,setInActiveColor是未点击时文字颜色,setBarBackgroundColor为背景色;

BACKGROUND_STYLE_RIPPLE :波纹效果,不同的是在此样式下,setActiveColor为背景色,setInActiveColor是未点击时文字颜色,setBarBackgroundColor是点击时文字颜色。
(具体可以看我的demo效果)

生成BottomNavigationBar:

复制代码
     navbar.initialise();
    
      
    
    代码解释

到这里BottomNavigationBar就乖乖地出现在屏幕上。下面我要学习一些拓展用法。

设置选中监听:

复制代码
    navbar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
            //item变为选中回调
            @Override
            public void onTabSelected(int position) {
    
            }
            //item变为未选中回调
            @Override
            public void onTabUnselected(int position) {
    
            }
            //item再次变为选中回调
            @Override
            public void onTabReselected(int position) {
    
            }
        });
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解释

清空所有item:

复制代码
    navbar.clearAll();
    
      
    
    代码解释

添加一个标记:
效果

这里写图片描述
复制代码
    /** * 获得一个导航图标右上角的标记,例如 未读消息
     * * @param borderWidth  边距
     * @param text         内容
     * @param hideOnSelect 点击时是否显示标记
     */
    private BadgeItem initBadge(int borderWidth, String text, boolean hideOnSelect) {
        return new BadgeItem()
                .setBorderWidth(borderWidth)
                .setBackgroundColorResource(R.color.colorAccent)
                .setText(text)
                .setHideOnSelect(hideOnSelect);
    }
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解释

将BottomNavigationBar与fragment相结合的方式非常便捷。其中提供了构建app架构及各种主流框架应用实例,并涵盖当前最受欢迎的各种框架的实际应用案例:https://github.com/18973809797/BaseStorehouse

如果您只需简要了解BottomNavigationBar的基本概念,请访问该GitHub仓库中的演示地址:...

全部评论 (0)

还没有任何评论哟~