温馨提示

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

OneBottomNavigationBar 使用说明

简介：

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

先看一组效果图

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

图1

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

图2

引入方法

jcenter

VERSION: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cfkNw6lP-1575002590992)(https://api.bintray.com/packages/onestravel/one/OneBottomNavigationBar/images/download.svg)]

在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:

在项目中的根目录下的 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.OneBottomNavigationBarandroid: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.OneBottomNavigationBarandroid: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"><itemandroid:id="@+id/tab1"android:icon="@drawable/bar_news"android:title="首页"></item><itemandroid:id="@+id/tab2"android:icon="@drawable/bar_constact"android:title="联系人"></item><itemandroid:id="@+id/tab5"android:icon="@drawable/tab_manage_selected"android:title="拍照"></item><itemandroid:id="@+id/tab3"android:icon="@drawable/bar_invite"android:title="发现"></item><itemandroid: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"><itemandroid:id="@+id/tab1"android:icon="@drawable/bar_news"android:title="首页"></item><itemandroid:id="@+id/tab2"android:icon="@drawable/bar_constact"android:title="联系人"></item><itemandroid:id="@+id/tab5"android:icon="@drawable/tab_manage_selected"android:title="拍照"app:floating="true"android:checkable="false"></item><itemandroid:id="@+id/tab3"android:icon="@drawable/bar_invite"android:title="发现"></item><itemandroid:id="@+id/tab4"android:icon="@drawable/bar_my"android:title="我的"></item>
</menu>

设置点击切换监听

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

        bottomView.setOnItemSelectedListener(new OneBottomNavigationBar.OnItemSelectedListener() {@Overridepublic 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

OneBottomNavigationBar 可以凸起的导航菜单相关推荐

导航条——收缩式导航菜单
1.概述在网站中不仅可以设置导航条,而且还可以设置导航菜单.由于菜单内容比较多,同一页面显示比较杂乱,所以很多的设计者都采用了收缩式的菜单形式. 2.技术要点本实例主要是应用JavaScript控 ...
基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <ul class="ce& ...
一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览源码下载实现的代码. ...
一款基jquery超炫的动画导航菜单
今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览 ...
在ASP.NET MVC下实现树形导航菜单
在需要处理很多分类以及导航的时候,树形导航菜单就比较适合.例如在汽车之家上: 页面主要分两部分,左边是导航菜单,右边显示对应的内容.现在,我们就在ASP.NET MVC 4 下临摹一个,如下: 实现的 ...
导航菜单：jQuery粘性滚动导航栏效果
粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...
jQuery实例——仿京东仿淘宝列表导航菜单
以前看着京东,淘宝的导航做的真好,真想哪一天自己也能做出来这么漂亮功能全的导航菜单.今天弄了一下午终于自制成功,主要使用jQuery和CSS,实现功能基本和京东一样. 功能介绍: 1.鼠标停留导航: ...
js实现当前导航菜单高亮显示
2019独角兽企业重金招聘Python工程师标准>>> 为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有 ...
Javascript导航菜单13则
来源:http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html 翻译:http://parandroid.com 下面为你准备了13 ...

OneBottomNavigationBar 可以凸起的导航菜单

温馨提示

OneBottomNavigationBar 使用说明

简介：

先看一组效果图

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

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

引入方法

jcenter

jitPack

属性说明

OneBottomNavigationBar 属性说明

示例1:不需要浮动（凸起）的菜单，图1效果

示例2:需要浮动（凸起）的菜单，图2效果

menu 菜单属性值说明

示例1:不需要浮动（凸起）的菜单，图1效果

示例2:需要浮动（凸起）的菜单，图2效果

设置点击切换监听

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

版本更新说明

1.0.2

1.0.3

1.0.4

1.0.5

1.0.6

1.1.0

1.1.1

温馨提示：

OneBottomNavigationBar 可以凸起的导航菜单相关推荐

最新文章

热门文章