EasyNavigation

Introduction: Android 底部导航栏████几行代码实现 Tab 导航(随意定制加号,带红点消息提示)
More: Author   ReportBugs   
Tags:
  • 几行代码轻松实现底部导航栏(Tab 文字图片高度随意更改);
  • 中间可添加加号按钮,也可添加文字;(足够的属性满足你需要实现的加号样式)
  • 如果还不能满足、中间可添加自定义 View;
  • Tab 中随意添加小红点提示、数字消息提示;
  • 点击按钮可跳转界面、也可作为 Tab 切换 Fragment;
  • 2.0.+迁移 AndroidX、支持 ViewPager2;
  • 剥离导航栏、不传 Fragment 则不会创建 ViewPager、可自行实现 ViewPager 使用 setupWithViewPager 方法与之关联;
  • 支持仅图片、仅文字的方式.;
  • 支持字体单位修改、SP 和 DP 切换;
  • 支持红点消息大于 99、则显示椭圆可自定义背景颜色及角度;
  • 更多使用参考简书;

简书地址:https://www.jianshu.com/p/ce8e09cda486

效果图

image

image image image

实现

  • 依赖

Step 1. Add it in your root build.gradle at the end of repositories:

    allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

Step 2. Add the dependency

         implementation 'com.github.Vincent7Wong:EasyNavigation:1.5.0'
         //2.0.5  AndroidX 版本、支持 ViewPager2
         implementation 'com.github.Vincent7Wong:EasyNavigation:2.0.5'

navigationBar.defaultSetting()  //恢复默认配置、可用于重绘导航栏
                .titleItems(tabText)      //  Tab 文字集合  只传文字则只显示文字
                .normalIconItems(normalIcon)   //  Tab 未选中图标集合
                .selectIconItems(selectIcon)   //  Tab 选中图标集合
                .fragmentList(fragments)       //  fragment 集合
                .fragmentManager(getSupportFragmentManager())
                .iconSize(20)     //Tab 图标大小
                .tabTextSize(10)   //Tab 文字大小
                .tabTextTop(2)     //Tab 文字距 Tab 图标的距离
                .normalTextColor(Color.parseColor("#666666"))   //Tab 未选中时字体颜色
                .selectTextColor(Color.parseColor("#333333"))   //Tab 选中时字体颜色
                .scaleType(ImageView.ScaleType.CENTER_INSIDE)  //同 ImageView 的 ScaleType
                .navigationBackground(Color.parseColor("#80000000"))   //导航栏背景色
                .setOnTabClickListener(new EasyNavigationBar.OnTabClickListener() {
                    @Override
                    public boolean onTabSelectEvent(View view, int position) {
                        //Tab 点击事件  return true 页面不会切换

                        return false;
                    }

                    @Override
                    public boolean onTabReSelectEvent(View view, int position) {
                        //Tab 重复点击事件
                        return false;
                    }
                })
                .smoothScroll(false)  //点击 Tab  Viewpager 切换是否有动画
                .canScroll(true)    //Viewpager 能否左右滑动
                .mode(EasyNavigationBar.NavigationMode.MODE_ADD)   //默认 MODE_NORMAL 普通模式  //MODE_ADD 带加号模式
                .centerTextStr("发现")
                .centerImageRes(R.mipmap.add_image)
                .centerIconSize(36)    //中间加号图片的大小
                .centerLayoutHeight(100)   //包含加号的布局高度 背景透明  所以加号看起来突出一块
                .navigationHeight(60)  //导航栏高度
                .lineHeight(10)         //分割线高度  默认 1px
                .lineColor(Color.parseColor("#ff0000"))
                .centerLayoutRule(EasyNavigationBar.RULE_BOTTOM) //RULE_CENTER 加号居中 addLayoutHeight 调节位置 EasyNavigationBar.RULE_BOTTOM 加号在导航栏靠下
                .centerLayoutBottomMargin(10)   //加号到底部的距离
                .hasPadding(true)    //true ViewPager 布局在导航栏之上 false 有重叠
                .hintPointLeft(-3)  //调节提示红点的位置 hintPointLeft hintPointTop(看文档说明)
                .hintPointTop(-3)
                .hintPointSize(6)    //提示红点的大小
                .msgPointLeft(-10)  //调节数字消息的位置 msgPointLeft msgPointTop(看文档说明)
                .msgPointTop(-10)
                .msgPointTextSize(9)  //数字消息中字体大小
                .msgPointSize(18)    //数字消息红色背景的大小
                .centerAlignBottom(true)  //加号是否同 Tab 文字底部对齐  RULE_BOTTOM 时有效;
                .centerTextTopMargin(50)  //加号文字距离加号图片的距离
                .centerTextSize(15)      //加号文字大小
                .centerNormalTextColor(Color.parseColor("#ff0000"))    //加号文字未选中时字体颜色
                .centerSelectTextColor(Color.parseColor("#00ff00"))    //加号文字选中时字体颜色
                .setMsgPointColor(Color.BLUE) //数字消息、红点背景颜色
                .setMsgPointMoreRadius(5) //消息 99+角度半径
                .setMsgPointMoreWidth(50)  //消息 99+宽度
                .setMsgPointMoreHeight(40)  //消息 99+高度
                .textSizeType(EasyNavigationBar.TextSizeType.TYPE_DP)  //字体单位 建议使用 DP  可切换 SP
                .setOnTabLoadListener(new EasyNavigationBar.OnTabLoadListener() { //Tab 加载完毕回调
                    @Override
                    public void onTabLoadCompleteEvent() {
                        navigationBar.setMsgPointCount(0, 7);
                        navigationBar.setMsgPointCount(1, 109);
                        navigationBar.setHintPoint(4, true);
                    }
                })
                //.setupWithViewPager() ViewPager 或 ViewPager2
                .build();

更新

  • 此版本较上一版本有很大更新、实现方式也调整了下、如有错误及时反馈
  • 2.0.+迁移 AndroidX、支持 ViewPager2;
  • 剥离导航栏、不传 Fragment 则不会创建 ViewPager、可自行实现 ViewPager 使用 setupWithViewPager 方法与之关联;
  • 新增仅图片、仅文字的方式。titleItems 和 normalIconItems 不能同时为空。如果没有 titleItems、则仅显示图片,没有 normalIconItems 则仅显示文字,没有 selectIconItems 则 Tab 没有切换效果;
  • 新增字体单位修改、SP 和 DP 切换;
  • 新增红点消息大于 99、则显示椭圆可自定义背景颜色及角度;
  • 修复控件宽度计算问题;
  • 新增重复选择回调;
  • 方法名字诸多修改;(中间 Tab 的相关属性由 add 改为 center/万分抱歉)
  • 取消 Tab 点击动画

Demo

github:https://github.com/Vincent7Wong/EasyNavigation

apk:http://d.6short.com/7r4d

image.png

Apps
About Me
GitHub: Trinea
Facebook: Dev Tools