OneBottomNavigationBar 可以凸起的导航菜单

温馨提示

写博客是为了记录在开发过程中所涉及到的技术以及遇到的问题的解决,如果该博客对您有所帮助,希望可以点个关注/喜欢;如果您对文章中的内容有什么不同的见解,欢迎留言进行讨论。谢谢!

OneBottomNavigationBar 使用说明

简介:

OneBottomNavigationBar 是自定义的一个实现App应用底部导航栏功能的View,可以实现底部 2-5 个导航菜单(一般不会有更多),可以实现某一个菜单凸起的效果,如,有5个菜单,可以选择让第三个菜单凸起(floating),这是很多App都有的功能; 可以根据编写的颜色变化的资源文件来更改图标和文字选中时和未选中时的颜色,可以自由控制是否需要选中(checkable),选择开启时,可变换为选中颜色,选择关闭时,不能更改为选择颜色;可以控制默认选中哪一项;可以设置某一个导航菜单的未读消息数(数字或者小红点)。

先看一组效果图

五个菜单,没有凸起的,都是可选中的

正常菜单

<center>图1</center>

中间有凸起,并且中间的不能选中,但点击事件可以响应

中间凸起

<center>图2</center>

引入方法

jcenter

VERSION: VERSION

  • 在model 中的build.gradle 中增加依赖
dependencies {
    implementation 'cn.onestravel.one:one_bottom_navigationbar:VERSION'
}

例如:

dependencies {
    implementation 'cn.onestravel.one:one_bottom_navigationbar:1.1.1'
}

jitPack

VERSION: VERSION

  • 在项目中的根目录下的 build.gradle (与model同级的) 中增加如下配置

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

  • 在model 中的build.gradle 中增加依赖
dependencies {
    implementation 'com.github.onestravel:OneBottomNavigationBar:VERSION'
}

例如:

dependencies {
     implementation 'com.github.onestravel:OneBottomNavigationBar:1.1.1'
}

属性说明

OneBottomNavigationBar 属性说明

属性 参考值 说明
app:oneItemIconTint @drawable/tab_selecter 整体的tab菜单的图片选中和未选中的颜色变化,传入一个资源drawable文件
app:oneItemTextColor @drawable/tab_selecter @drawable/tab_selecter@drawable/tab_selecter整体的tab菜单的图片选中和未选中的颜色变化,传入一个资源drawable文件
app:oneFloatingEnable true/false 是否开启浮动,默认为false,设置为true是,可以实现中间凸起
app:oneFloatingUp 20dp 设置Tab的上浮尺寸,比如:上浮20dp,上浮尺寸不可超过整个菜单高度的1/2
app:oneMenu @menu/botom_menu BottomNavigationBar导航栏的关键,设置导航栏的tab菜单
app:oneItemTextSize 15sp 设置导航栏文字的大小
app:oneItemIconWidth 30dp 设置导航栏Icon的宽度
app:oneIemIconHeight 30dp 设置导航栏Icon的高度
app:oneItemTextTopMargin 5dp 置导航栏文字和Icon的间隔高度
app:oneItemTopLineColor #CCCCCC 置导航栏顶部分割线颜色,想去掉该分割线可设置透明色

示例1:不需要浮动(凸起)的菜单,图1效果


    <cn.onestravel.navigation.view.OneBottomNavigationBar
        android:id="@+id/BottomLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/white"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        app:menu="@menu/navigation_menu">

    </cn.onestravel.navigation.view.OneBottomNavigationBar>
    

示例2:需要浮动(凸起)的菜单,图2效果

 <cn.onestravel.navigation.view.OneBottomNavigationBar
        android:id="@+id/BottomLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/white"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        app:floatingEnable="true"
        app:floatingUp="25dp"
        app:menu="@menu/navigation_menu">

    </cn.onestravel.navigation.view.OneBottomNavigationBar>

menu 菜单属性值说明

属性 参考值 说明
android:id @+id/tab1 导航菜单 Item 的ID;
android:icon @drawable/bar_news 导航菜单 Item 的图标,可以是图标选择器(selector),也可以是默认图标,根据与OneBottomNavigationBar 的属性 app:oneItemIconTint 更改选中与不选中的颜色变化,默认为蓝色和灰色;
android:title 首页 导航菜单 Item 的文字,可以默认为空字符串,表示不设置;
android:checkable true/false 设置导航菜单 Item 是否可以选择,值影响选择与不选中效果,不影响点击事件;
android:checked true/false 设置导航菜单 Item 是否默认选中,默认为第一个选中,请不要在多个Item上设置改;
app:floating true/false 设置该导航菜单 Item 是否浮动,与OneBottomNavigationBar 的app:floatingEnable和 app:oneFloatingUp属性配合使用,默认为false,即不浮动(不凸起);

示例1:不需要浮动(凸起)的菜单,图1效果

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

    <item
        android:id="@+id/tab1"
        android:icon="@drawable/bar_news"
        android:title="首页"></item>
    <item
        android:id="@+id/tab2"
        android:icon="@drawable/bar_constact"
        android:title="联系人"></item>
    <item
        android:id="@+id/tab5"
        android:icon="@drawable/tab_manage_selected"
        android:title="拍照"></item>
    <item
        android:id="@+id/tab3"
        android:icon="@drawable/bar_invite"
        android:title="发现"></item>
    <item
        android:id="@+id/tab4"
        android:icon="@drawable/bar_my"
        android:title="我的"></item>
</menu>

示例2:需要浮动(凸起)的菜单,图2效果

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

    <item
        android:id="@+id/tab1"
        android:icon="@drawable/bar_news"
        android:title="首页"></item>
    <item
        android:id="@+id/tab2"
        android:icon="@drawable/bar_constact"
        android:title="联系人"></item>
    <item
        android:id="@+id/tab5"
        android:icon="@drawable/tab_manage_selected"
        android:title="拍照"
        app:floating="true"
        android:checkable="false"></item>
    <item
        android:id="@+id/tab3"
        android:icon="@drawable/bar_invite"
        android:title="发现"></item>
    <item
        android:id="@+id/tab4"
        android:icon="@drawable/bar_my"
        android:title="我的"></item>
</menu>

设置点击切换监听

在NavigationBar的Tab进行切换时,会回调改方法,可进行相应处理,如:未读消息数设置

        bottomView.setOnItemSelectedListener(new OneBottomNavigationBar.OnItemSelectedListener() {
                    @Override
                    public void onItemSelected(OneBottomNavigationBar.Item item, int position) {
                        if(position==2){
                            bottomView.setFloatingEnable(true);
                        }else {
                            bottomView.setFloatingEnable(false);
                        }
                    }
                });

添加Fragment进行管理,点击自动切换

需要先设置FragmentManager管理器和加载Fragment的ViewGroup,一般为FrameLayout ,需要设置id;之后调用addFragment,为对应的Tab添加Fragment,

        bottomView.setFragmentManager(getFragmentManager(),mainFragment);
        bottomView.addFragment(R.id.tab1,new FirstFragment());
        bottomView.addFragment(R.id.tab2,new SecondFragment());
        bottomView.addFragment(R.id.tab3,new ThirdFragment());
        bottomView.addFragment(R.id.tab4,new FourFragment());
        bottomView.addFragment(R.id.tab5,new FiveFragment());

版本更新说明

1.0.2

  • 初版实现自定义底部导航栏

1.0.3

  • 在原基础上对封装进行优化,支持代码实现导航栏

1.0.4

  • 优化选中突出效果,支持选中放大,支持导航栏背景圆角

1.0.5

  • 可以自定义导航栏文字大小
  • 可以自定义图标的宽度和高度
  • 自定义图标和文字间隔高度

1.0.6

  • 可以Java Api 设置导航栏文字大小
  • 可以Java Api 设置图标的宽度和高度
  • Java Api 设置图标和文字间隔高度
  • 支持管理Fragment ,实现Fragment点击自动切换

1.1.0

  • 更换属性,部分属性前增加one前缀,解决属性冲突问题
  • BottomNavigationBar 更换为 OneBottomNavigationBar
  • 增加顶部分割线颜色属性,可设置分割线颜色(或透明色)

1.1.1

  • 开发语言更换为 kotlin
  • 新增使用androidx.fragment.app.Fragment和androidx.fragment.app.FragmentManager管理fragment的支持,
    包路径为:cn.onestravel.one.navigation.androidx.OneBottomNavigationBar
  • 在jcenter上发布新包

温馨提示:

在使用过程中,如遇到任何问题,可进行留言,发送简信或发送邮件至server@onestravel.cn说明相关问题,我在看到问题的第一时间,会针对相应问题进行沟通解决,谢谢支持!


个人博客:https://blog.onestravel.cn
Github: https://github.com/onestravel

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,262评论 4 61
  • Android UI相关开源项目库汇总OpenDigg 抽屉菜单MaterialDrawer ★7337 - 安卓...
    黄海佳阅读 8,764评论 3 77
  • 《白娘子的耳垂》 一 紫气东来 十里铺社区,人来人往。 东西走向的中心大街两侧,人头攒动。 街南侧,紧挨着居委和教...
    卿真阅读 197评论 0 0
  • 属性动画 CAPropertyAnimation 基类 不能直接使用子类:1.CABasicAnimation ...
    七月上阅读 1,671评论 2 4
  • 每次想起曾紧紧的抱着你的腰肢,痴迷的吻着你的发梢,脑子里想着好多好多我们该有的未来的时候,我的心脏就像无数蠕虫一般...
    墨小凝阅读 410评论 0 2