底部导航栏使用BottomNavigationBar

1.github地址

https://github.com/zhouxu88/BottomNavigationBar

2.基本使用

2,1添加依赖

implementation ‘com.ashokvarma.android:bottom-navigation-bar:2.0.5‘

  

2.2布局中使用

 <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/bottom_nav_bar"
        android:layout_alignParentBottom="true"
        ></com.ashokvarma.bottomnavigation.BottomNavigationBar>

  

2.3代码中设置

        /**
         * 导航基础设置 包括按钮选中效果 导航栏背景色等
         */
        bottomNavigationBar.setTabSelectedListener(this)
                .setMode(BottomNavigationBar.MODE_FIXED)
                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC)
                .setActiveColor("#ffffff")//选中颜色
                .setInActiveColor("#2B2B2B")//未选中颜色
                .setBarBackgroundColor("#EDC18E");//导航栏背景色
        badgeItem = new TextBadgeItem()
                .setBorderWidth(2)
                .setTextColor(Color.BLACK)
                .setBackgroundColor(Color.RED)
                .setText("99");

         /**
         *添加导航按钮
         */
        bottomNavigationBar.addItem(new BottomNavigationItem(R.mipmap.home,"首页"))
                .addItem(new BottomNavigationItem(R.mipmap.setting,"设置"))
                .addItem(new BottomNavigationItem(R.mipmap.menu,"菜单").setInActiveColor("#ffff00"))
                .addItem(new BottomNavigationItem(R.mipmap.person,"个人").setBadgeItem(badgeItem))//添加小红点数据
                .initialise();//initialise 一定要放在 所有设置的最后一项

  

2.4添加监听

bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {//这里也可以使用SimpleOnTabSelectedListener
         @Override
         public void onTabSelected(int position) {//未选中 -> 选中
         }

         @Override
         public void onTabUnselected(int position) {//选中 -> 未选中
         }

         @Override
         public void onTabReselected(int position) {//选中 -> 选中
         }
     });

  

3.知识点,用法说明。

3.1设置导航栏模式:setMode()

setMode() 内的参数有三种模式类型:
     MODE_DEFAULT 自动模式:导航栏Item的个数<=3 用 MODE_FIXED 模式,否则用 MODE_SHIFTING 模式
     MODE_FIXED 固定模式:未选中的Item显示文字,无切换动画效果。
     MODE_SHIFTING 切换模式:未选中的Item不显示文字,选中的显示文字,有切换动画效果。

  

3.2设置导航栏背景模式:setBackgroundStyle()

setBackgroundStyle() 内的参数有三种样式
   BACKGROUND_STYLE_DEFAULT: 默认样式 如果设置的Mode为MODE_FIXED,将使用BACKGROUND_STYLE_STATIC,如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。
   BACKGROUND_STYLE_STATIC: 静态样式 点击无波纹效果,航条的背景色是白色,加上setBarBackgroundColor()可以设置成你所需要的任何背景颜色
   BACKGROUND_STYLE_RIPPLE: 波纹样式 点击有波纹效果,导航条的背景色是你设置的处于选中状态的 Item的颜色(ActiveColor),也就是setActiveColorResource这个设置的颜色

  

3.3设置默认颜色

bottomNavigationBar
              .setActiveColor("#ff0000") //设置选中的颜色
              .setInActiveColor("#FFFFFF")//设置选中的颜色
              .setBarBackgroundColor("#000000");//设置bar背景
in-active color:
表示未选中Item中的图标和文本颜色。默认为 Color.LTGRAY

active color :
在BACKGROUND_STYLE_STATIC下,表示选中Item的图标和文本颜色。而在BACKGROUND_STYLE_RIPPLE下,表示整个容器的背景色。默认Theme‘s Primary Color

background color :
在BACKGROUND_STYLE_STATIC下,表示整个容器的背景色。而在BACKGROUND_STYLE_RIPPLE下,表示选中Item的图标和文本颜色。默认 Color.WHITE

  

3.4定制Item的选中未选中颜色

//设置Item未选中颜色方法
new BottomNavigationItem().setInActiveColorResource(R.color.white)) 或者
new BottomNavigationItem().setInActiveColor()
//设置Item选中颜色方法
new BottomNavigationItem().setActiveColorResource()或者
new BottomNavigationItem().setActiveColor()

  

3.5Icon的定制

如果使用颜色的变化不足以展示一个选项Item的选中与非选中状态,可以使用BottomNavigationItem.setInActiveIcon()方法来设置。

 .addItem(new BottomNavigationItem(R.mipmap.menu,"菜单").setInActiveColor("#ffff00"))

3.6手动隐藏与显示

bottomNavigationBar.hide();//隐藏
bottomNavigationBar.hide(true);//隐藏是否启动动画,这里并不能自定义动画
bottomNavigationBar.unHide();//显示
bottomNavigationBar.hide(true);//隐藏是否启动动画,这里并不能自定义动画

  

3.7为Item添加Badge,一般用作消息提醒的

badgeItem = new TextBadgeItem()
                .setBorderWidth(2)//Badge的Border(边界)宽度
                .setBorderColor(Color.BLUE)//Badge的Border颜色
                .setBackgroundColor(Color.RED)
                .setTextColor(Color.BLACK)//文本颜色
                .setGravity(Gravity.RIGHT| Gravity.TOP)//位置,默认右上角
                .setAnimationDuration(2000)
                .setHideOnSelect(true)//当选中状态时消失,非选中状态显示
                .setText("99");
shapeBadgeItem=new ShapeBadgeItem()        .setShape(SHAPE_OVAL) //形状        .setShapeColor(Color.BLUE) //颜色        .setShapeColorResource(R.color.colorPrimaryDark) //颜色,资源文件获取        .setEdgeMarginInDp(this,0) //距离Item的margin,dp        .setEdgeMarginInPixels(20) //距离Item的margin,px        .setSizeInDp(this,10,10) //宽高,dp        .setSizeInPixels(5,5) //宽高,px        .setAnimationDuration(200) //隐藏和展示的动画速度,单位毫秒,和setHideOnSelect一起使用        .setGravity(Gravity.LEFT) //位置,默认右上角        .setHideOnSelect(true); //true:当选中状态时消失,非选中状态显示,moren false

  

4案例

public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {
    private BottomNavigationBar bottomNavigationBar;
    private HomeFragment homeFragment;
    private PersonFragment personFragment;
    private SettingFragment settingFragment;
    private MenuFragment menuFragment;
    private FragmentManager fm;
    private TextBadgeItem badgeItem;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bottomNavigationBar=findViewById(R.id.bottom_nav_bar);
        fm=getFragmentManager();
        initBottomBar();

    }

    private void initBottomBar() {
        /**
         * 导航基础设置 包括按钮选中效果 导航栏背景色等
         */
        bottomNavigationBar.setTabSelectedListener(this)
                .setMode(BottomNavigationBar.MODE_FIXED)
                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC)
                .setActiveColor("#ffffff")//选中颜色
                .setInActiveColor("#2B2B2B")//未选中颜色
                .setBarBackgroundColor("#EDC18E");//导航栏背景色
        badgeItem = new TextBadgeItem()
                .setBorderWidth(2)//Badge的Border(边界)宽度
                .setBorderColor(Color.BLUE)//Badge的Border颜色
                .setBackgroundColor(Color.RED)
                .setTextColor(Color.BLACK)//文本颜色
                .setGravity(Gravity.RIGHT| Gravity.TOP)//位置,默认右上角
                .setAnimationDuration(2000)
                .setHideOnSelect(true)//当选中状态时消失,非选中状态显示
                .setText("99");

         /**
         *添加导航按钮
         */
        bottomNavigationBar.addItem(new BottomNavigationItem(R.mipmap.home,"首页"))
                .addItem(new BottomNavigationItem(R.mipmap.setting,"设置"))
                .addItem(new BottomNavigationItem(R.mipmap.menu,"菜单").setInActiveColor("#ffff00"))
                .addItem(new BottomNavigationItem(R.mipmap.person,"个人").setBadgeItem(badgeItem))//添加小红点数据
                .initialise();//initialise 一定要放在 所有设置的最后一项

        //设置默认导航栏
        homeFragment=HomeFragment.newInstance("首页");
        fm.beginTransaction().replace(R.id.fl,homeFragment).commit();

    }
    /**
     * 设置选中逻辑
     */
    @Override
    public void onTabSelected(int position) {
        FragmentTransaction transaction = fm.beginTransaction();
        switch (position){
            case 0:
                if(homeFragment==null){
                    homeFragment=new HomeFragment();
                }
                transaction.replace(R.id.fl,homeFragment);
                break;
            case 1:
                if(settingFragment==null){
                    settingFragment=new SettingFragment();
                }
                transaction.replace(R.id.fl,settingFragment);
                break;
            case 2:
                if(menuFragment==null){
                    menuFragment=new MenuFragment();
                }
                badgeItem.setText("4");
                transaction.replace(R.id.fl,menuFragment);
                break;
            case 3:
                if(personFragment==null){
                    personFragment=new PersonFragment();
                }
                transaction.replace(R.id.fl,personFragment);
                break;
            default:

                break;
        }
        transaction.commit();
    }

    /**
     * 设置未选中逻辑
     */
    @Override
    public void onTabUnselected(int position) {

    }

    /**
     * 设置释放逻辑
     */
    @Override
    public void onTabReselected(int position) {

    }
}

  

参考:

1.Android底部导航 BottomNavigationBar(Google官方)

2.BottomNavigationBar使用详解

3.安卓 BottomNavigationBar 底部导航栏 最简单用法详解

原文地址:https://www.cnblogs.com/wangjiaghe/p/9742921.html

时间: 2024-10-09 03:55:44

底部导航栏使用BottomNavigationBar的相关文章

Android仿小米商城底部导航栏之二(BottomNavigationBar、ViewPager和Fragment的联动使用)

简介 在前文<Android仿小米商城底部导航栏(基于BottomNavigationBar)>我们使用BottomNavigationBar控件模仿实现了小米商城底部导航栏效果.接下来更进一步的,我们将通过BottomNavigationBar控件和ViewPager空间的联动使用来实现主界面的滑动导航. 导航是移动应用最重要的方面之一,对用户体验是良好还是糟糕起着至关重要的作用.好的导航可以让一款应用更加易用并且让用户快速上手.相反,糟糕的应用导航很容易让人讨厌,并遭到用户的抛弃.为了打造

03-Flutter移动电商实战-底部导航栏制作

1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平板电脑.台式机和其他平台提供一致,更广泛的外观和感觉.我喜欢称它为纸墨设计.Material Design 风格是一种非常有质感的设计风格,并会提供一些默认的交互动画. cupertino风格:即 IOS 风格组件,它重现了很多经典的有 IOS 特性的交互和界面风格,让适用于 IOS 的人感觉亲切和

实现底部导航栏

许多的App都使用底部导航栏来实现导航功能,我们可以使用RadioGroup+RadioButton的形式或者直接Button数组的方式实现,而谷歌官方提供了FragmentTabHost来方便快捷实现底部导航栏. android.support.v4.app.FragmentTabHost 主要代码: fragmentTabHost.setup(this, getSupportFragmentManager(), R.id.layout_content); for (int i = 0; i 

Android实习札记(5)---Fragment之底部导航栏的实现

Android实习札记(5)---Fragment之底部导航栏的实现 --转载请注明出处:coder-pig 在Part 4我们回顾了一下Fragment的基本概念,在本节中我们就来学习Fragment应用的简单例子吧! 就是使用Fragment来实现简单的底部导航栏,先贴下效果图: 看上去很简单,实现起来也是很简单的哈!那么接着下来就看下实现的流程图吧: 实现流程图: 看完流程图是不是有大概的思路了,那么接着就开始代码的编写吧: 代码实现: ①先写布局,布局的话很简单,一个FrameLayou

移动端底部导航栏固定——兼容IOS

问题:移动端前端底部导航栏设计 兼容安卓下的各种浏览器和IOS自带的Safari,但是不兼容苹果下的 钉钉. 具体代码格式: <body> <!-- 头部导航栏 --> <div class="header">内容</div> <!-- 内容 --> <div class="content">内容</div> <!-- 底部导航栏 --> <div class=&q

Android Fragment解析及UI底部导航栏实例

import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.view.View; import android.view.View.OnClickListener; import and

Android应用底部导航栏(选项卡)实例

现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其中各个类的作用以及资源文件就不详细解释了,还有资源图片(在该Demo中借用了其它应用程序的资源图片)也不提供了,大家可以自行更换自己需要的资源图片.直接上各个布局文件或各个类的代码: [1]  res/layout目录下的 maintabs.xml 源码: <?xml version="1.0

FragmentTabHost+FrameLayout实现底部导航栏

app经常用到底部导航栏,早前使用过RadioGroup+FrameLayout实现或者RadioGroup+ViewPager实现,现在基本使用FragmentTabHost+FrameLayout来实现,因为使用起来简单易用.下面写一个小例子简要地总结一下这个组合. 首先,看一下例子的最终运行效果图 -> 这5个图标的效果其实都是一样的,只要做出来一个,以此类推就可以写出其他几个 第一步, FragmentTabHost+FrameLayout布局,先看一下代码: <?xml versio

Android底部导航栏

Android UI-仿微信底部导航栏布局 Android基础入门教程——5.2.1 Fragment实例精讲——底部导航栏的实现(方法1)