Skip to content

(一个轻量级的底部导航控件)A simple and lightly widget to accomplish bottom Navigation,可设置未读数、提示点、提示消息

Notifications You must be signed in to change notification settings

chaychan/BottomBarLayout

Repository files navigation

英文(English)

支持

如果觉得我的项目对你有所帮助的话,帮我点下Star 吧,让更多人的人可以看到,谢谢!

旧版本

新版本3.0对项目进行了重构,用法有很大不同,如果你之前使用的是2.0版本,想继续更新维护详细用法请参考
BottomBarLayout-2.1.0, 旧版本的实现后续将不再维护,若有需要请下载源码修改,分支名feature-2.1.0

2024-07-17

距离上次更新接近4年,看到依旧有不少小伙伴提issue,很抱歉没有及时回复,趁着这段时间空闲,针对issue进行了修复,如:

  • #57 —— 支持ViewPager2
  • #56 —— 针对某些场景添加跳转前拦截

以及一些小问题的修复,发布了2.1.0版本,如果项目之前集成了这个库,可以更新下这个版本

同时想着让大家可以更方便地使用这个库,对该库进行了重构,发布3.0版本,看有不少人提了中间凸起图标的需求, 特意支持中间图标凸起,详情请看文档介绍。

轻量级的底部导航栏

  目前市场上的App,几乎都有底部页签导航栏,所以我们在开发的时候经常需要用到这个,虽然github上有不少已经封装好的底部导航栏的工具,例如bottombar,alphaIndicator(仿微信滑动渐变底部控件)等,但是这些控件由于功能太多,而且也没有给予详细的介绍文档,所以用起来不是特别容易,有时候我们仅仅只是想要一个简简单单的底部导航,但是又不想去自己在布局中搞一个个LinearLayout或者RadioGroup,然后切换页签的时候更换图标,让ViewPager跳转到对应的页面等一系列繁琐的操作,这时候,你可以使用BottomBarLayout,简简单单就可以实现以下效果:

我的博客

http://chaychan.tech

下载体验

点击下载体验

扫码下载:

导入方式

在项目根目录下的build.gradle中的allprojects{}中,添加jitpack仓库地址,如下:

   allprojects {
        repositories {
            jcenter()
            maven { url 'https://jitpack.io' }//添加jitpack仓库地址
        }
  }
	

打开app的module中的build.gradle,在dependencies{}中,添加依赖,如下:

 dependencies {
    implementation 'com.github.chaychan:BottomBarLayout:3.0.0' //建议使用最新版本
 }
	

最新发布的版本可以查看

https://github.com/chaychan/BottomBarLayout/releases

支持中间图标凸起,点击跳转前拦截

显示未读数、提示小红点、提示消息

支持lottie

历史版本更新说明

历史更新记录

BottomBarLayout的使用

        <!--设置bar的高度-->
        <attr name="barHeight" format="dimension"/>
        <!--设置bar的背景-->
        <attr name="barBackground" format="reference"/>

        <!--是否中间图标凸起-->
        <attr name="floatEnable" format="boolean"/>
        <!--设置凸起按钮距离底部间距-->
        <attr name="floatMarginBottom" format="dimension"/>

        <!--float图标-->
        <attr name="floatIcon" format="reference"/>
        <!--float图标的宽度-->
        <attr name="floatIconWidth" format="dimension"/>
        <!--float图标的高度-->
        <attr name="floatIconHeight" format="dimension"/>
        
        <!--是否开启viewPager的滑动-->
        <attr name="smoothScroll" format="boolean"/>
        <!--是否相同tab点击回调-->
        <attr name="sameTabClickCallBack" format="boolean"/>

        <!--文字大小-->
        <attr name="itemTextSize" format="dimension"/>
        <!--文字加粗-->
        <attr name="itemTextBold" format="boolean"/>
        <!--默认状态下的文字颜色-->
        <attr name="textColorNormal" format="color"/>
        <!--选中状态下的文字颜色-->
        <attr name="textColorSelected" format="color"/>

        <!--文字和图标的顶部距离-->
        <attr name="itemMarginTop" format="dimension"/>

        <!--设置图标的宽度-->
        <attr name="iconWidth" format="dimension"/>
        <!--设置图标的高度-->
        <attr name="iconHeight" format="dimension"/>

        <!--设置BottomBarItem的padding-->
        <attr name="itemPadding" format="dimension"/>

        <!--设置未读数字体大小-->
        <attr name="unreadTextSize" format="dimension"/>
        <!--设置未读数字体颜色-->
        <attr name="unreadTextColor" format="reference"/>
        <!--设置未读数背景色-->
        <attr name="unreadTextBg" format="reference"/>

        <!--设置提示消息字体大小-->
        <attr name="msgTextSize" format="dimension"/>
        <!--设置提示消息字体颜色-->
        <attr name="msgTextColor" format="reference"/>
        <!--设置提示消息背景-->
        <attr name="msgTextBg" format="reference"/>

        <!--设置提示点背景-->
        <attr name="notifyPointBg" format="reference"/>

        <!--设置未读数组阈值 大于阈值的数字将显示为 n+ n为设置的阈值-->
        <attr name="unreadThreshold" format="integer"/>

布局文件中配置

在xml文件中,配置BottomBarLayout

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

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <com.chaychan.library.BottomBarLayout
        android:id="@+id/bbl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:barBackground="@color/tab_gb"
        app:barHeight="45dp"
        app:textColorNormal="@color/tab_normal_color"
        app:textColorSelected="@color/tab_selected_color"
        app:iconHeight="30dp"
        app:iconWidth="30dp"
        app:itemTextSize="8sp"
        app:itemMarginTop="-5dp"
        app:unreadTextSize="10sp"
        app:msgTextSize="6sp"/>

</LinearLayout>

java文件中设置

找过对应的ViewPager和BottomBarLayout,为ViewPager设置Adapter,然后为BottomBarLayout设置ViewPager

 protected List<TabData> getTabData() {
    List<TabData>  tabData = new ArrayList<>();
    tabData.add(new TabData("首页", R.mipmap.tab_home_normal, R.mipmap.tab_home_selected));
    tabData.add(new TabData("视频", R.mipmap.tab_video_normal, R.mipmap.tab_video_selected));
    tabData.add(new TabData("微头条", R.mipmap.tab_micro_normal, R.mipmap.tab_micro_selected));
    tabData.add(new TabData("我的", R.mipmap.tab_me_normal, R.mipmap.tab_me_selected));
    
    //如果是lottie  lottie文件存放位置 /src/main/assets
    //tabData.add(new TabData("首页", "home.json"));
    //tabData.add(new TabData("分类", "category.json"));
    //tabData.add(new TabData("购物车", "cart.json"));
    //tabData.add(new TabData("我的",  "mine.json"));
    
    return tabData;
 }
  
  ...
  mBottomBarLayout.setData(tabData); //设置数据源    
  //和ViewPager2联动
  mVpContent.setAdapter(new MyAdapter(getSupportFragmentManager()));
  mBottomBarLayout.setViewPager2(mVpContent);  

这样就实现底部导航栏功能了

设置中间图标凸起

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

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="45dp"/>

    <com.chaychan.library.BottomBarLayout
        android:id="@+id/bbl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" //高度需要自适应
        android:layout_gravity="bottom"
        app:barBackground="@color/tab_gb"
        app:barHeight="45dp" //导航栏的具体高度
        app:floatEnable="true" //是否开启图片凸起
        app:floatIcon="@mipmap/icon_add" //凸起图标的资源
        app:floatIconWidth="50dp" //凸起图标宽度
        app:floatIconHeight="50dp" //凸起图标高度
        app:floatMarginBottom="20dp" //凸起图标距离底部的位置
        app:barBackground="@color/tab_gb"
        app:barHeight="45dp"
        app:floatEnable="true"
        app:floatIcon="@mipmap/icon_add"
        app:floatIconWidth="50dp"
        app:floatIconHeight="50dp"
        app:floatMarginBottom="20dp"
        app:textColorNormal="@color/tab_normal_color"
        app:textColorSelected="@color/tab_selected_color"
        app:iconHeight="30dp"
        app:iconWidth="30dp"
        app:itemTextSize="8sp"
        app:itemMarginTop="-5dp"
        app:unreadTextSize="10sp"
        app:msgTextSize="6sp"/>

</FrameLayout>

动态添加条目

     for (int i = 0; i < mTitleIds.length; i++) {
            //创建item
            BottomBarItem item = createBottomBarItem(i);
            mBottomBarLayout.addItem(item); //添加条目

            TabFragment homeFragment = createFragment(mTitleIds[i]);
            mFragmentList.add(homeFragment);
    }
    
    private BottomBarItem createBottomBarItem(int i) {
        BottomBarItem item = new BottomBarItem.Builder(this)
                .titleTextSize(8)
                .titleNormalColor(R.color.tab_normal_color)
                .titleSelectedColor(R.color.tab_selected_color)
	//          .marginTop(5)
	//          .itemPadding(5)
	//          .unreadNumThreshold(99)
	//          .unreadTextColor(R.color.white)

                //还有很多属性,详情请查看Builder里面的方法
                .create(mNormalIconIds[i], mSelectedIconIds[i], getString(mTitleIds[i]));
        return item;
   }

移除条目

  mBottomBarLayout.removeItem(0);

开启滑动效果

页签之间的切换默认关闭了滑动效果,如果需要开启可以通过调用BottomBarLayout的setSmoothScroll()方法:

  mBottomBarLayout.setSmoothScroll(true);

也可以在布局文件中指定BottomBarLayout的smoothScroll属性为true

开启后效果如下:

跳转前拦截

    mBottomBarLayout.setOnPageChangeInterceptor(position -> {
       if(position == TAB_POSITION_ADD){
           //中间凸起图标的位置
           Toast.makeText(ViewPager2DemoActivity.this, "可以跳转别的页面,比如发布页", Toast.LENGTH_SHORT).show();
           return true; //是否拦截 true拦截不进行跳转 false不拦截
       }
       boolean isLogin = false; //模拟没有登录
       if (position == TAB_POSITION_ME && !isLogin){
           //no login intercept  to other tab or to LoginActivity
           Toast.makeText(ViewPager2DemoActivity.this, "Test intercept, Login first please", Toast.LENGTH_SHORT).show();
           return true;
       }
     return false; 
  });

设置条目选中的监听

    mBottomBarLayout.setOnItemSelectedListener((bottomBarItem, previousPosition, currentPosition) -> {
         //do something
    });

设置同个tab重复点击是否回调setOnItemSelectedListener

  app:sameTabClickCallBack="true" //默认为false

显示未读数、提示小红点、提示消息

  mBottomBarLayout.setUnread(0,20);//设置第一个页签的未读数为20
  mBottomBarLayout.setUnread(1,101);//设置第二个页签的未读数
  mBottomBarLayout.showNotify(2);//设置第三个页签显示提示的小红点
  mBottomBarLayout.setMsg(3,"NEW");//设置第四个页签显示NEW提示文字

当设置的未读数小于或等于0时,消失未读数的小红点将会消失;
当未读数为1-99时,则显示对应的数字;
当未读数大于99时,显示99+;

设置未读数阈值

   未读数的阈值可以指定BottomBarItem的unreadThreshold属性设置,默认该值为99,如设置 app:unreadThreshold="999" , 若未读数超过该值,则显示"999+"。

隐藏提示小红点、提示消息

 mBottomBarLayout.hideNotify(2);//隐藏第三个页签显示提示的小红点
 mBottomBarLayout.hideMsg(3);//隐藏第四个页签显示的提示文字

设置未读数字体颜色

  app:unreadTextColor="@color/unreadTextColor"

设置未读数背景

  app:unreadTextBg="@drawable/shape_unread"

drawable的编写如下:

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="20dp" />
    <solid android:color="@color/red" />
    <padding android:left="4dp" android:right="4dp" android:top="1dp" android:bottom="1dp"/>
 </shape>

设置提示文字字体颜色、背景

 app:msgTextColor="@color/msgTextColor"
 app:msgTextBg="@drawable/shape_msg"

设置提示点背景

 app:notifyPointBg="@drawable/shape_notify_point"

BottomBarItem的介绍

  BottomBarItem继承于LinearLayout,其子View有显示图标的ImageView和展示文字的TextView,分别可以通过getImageView()和getTextView()方法获取到对应的子控件。github上不少底部导航栏的控件都没能获取到对应的子控件,所以在需要对子控件进行操作的时候极不方便,有一些的思路并不是用ImageView和TextView,而是用绘制的,所以也不能获取到对应的显示图标的控件或展示文字的控件,造成无法获取到该控件,无法进行一些业务上的操作,比如类似今日头条的底部的首页,点击首页的页签,会更换成加载中的图标,执行旋转动画,BottomBarLayout可以轻松地做到这个需求。

演示效果如下:

只需为BottomBarLayout设置页签选中的监听,在回调中进行以下处理:

mBottomBarLayout.setOnItemSelectedListener(new BottomBarLayout.OnItemSelectedListener() {
        @Override
        public void onItemSelected(final BottomBarItem bottomBarItem, int previousPosition, final int currentPosition) {
            Log.i("MainActivity", "position: " + currentPosition);
            if (currentPosition == 0) {
                //如果是第一个,即首页
                if (previousPosition == currentPosition) {
                    //如果是在原来位置上点击,更换首页图标并播放旋转动画
                    if (mRotateAnimation != null && !mRotateAnimation.hasEnded()){
                        //如果当前动画正在执行
                        return;
                    }

                    bottomBarItem.setSelectedIcon(R.mipmap.tab_loading);//更换成加载图标

                    //播放旋转动画
                    if (mRotateAnimation == null) {
                        mRotateAnimation = new RotateAnimation(0, 360,
                                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                                0.5f);
                        mRotateAnimation.setDuration(800);
                        mRotateAnimation.setRepeatCount(-1);
                    }
                    ImageView bottomImageView = bottomBarItem.getImageView();
                    bottomImageView.setAnimation(mRotateAnimation);
                    bottomImageView.startAnimation(mRotateAnimation);//播放旋转动画

                    //模拟数据刷新完毕
                    mHandler.postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            boolean tabNotChanged = mBottomBarLayout.getCurrentItem() == currentPosition; //是否还停留在当前页签
                            bottomBarItem.setSelectedIcon(R.mipmap.tab_home_selected);//更换成首页原来选中图标
                            cancelTabLoading(bottomBarItem);
                        }
                    }, 3000);
                    return;
                }
            }

            //如果点击了其他条目
            BottomBarItem bottomItem = mBottomBarLayout.getBottomItem(0);
            bottomItem.setSelectedIcon(R.mipmap.tab_home_selected);//更换为原来的图标

            cancelTabLoading(bottomItem);//停止旋转动画
        }
    });


 	/**停止首页页签的旋转动画*/
    private void cancelTabLoading(BottomBarItem bottomItem) {
        Animation animation = bottomItem.getImageView().getAnimation();
        if (animation != null){
            animation.cancel();
        }
    }

实现思路:

1.当点击页签加载的时候,BottomBarItem通过调用setIconSelectedResourceId()设置成选中状态下的图标资源id为加载中图标的资源id,完成图标的更换操作;

2.通过BottomBarItem获取到对应页签的ImageView,对其设置旋转动画,执行旋转动画,当点击其他页签或者数据加载完成后,更换回原来的选中图标,停止旋转动画。

好了,到这里BottomBarLayout的介绍就到此为止了,之所以封装这个控件主要是为了方便开发,希望可以帮助到更多人,如果大家有什么想法或者意见不妨向我提出,我会不断完善BottomBarLayout的。

支持和鼓励

如果觉得我的项目对你有所帮助的话,不妨打赏一下吧!这样我会更加有动力去完善好这个项目:

微信赞赏:

About

(一个轻量级的底部导航控件)A simple and lightly widget to accomplish bottom Navigation,可设置未读数、提示点、提示消息

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages