导航栏BottomNavigationBar使用
转载于:http://blog.csdn.net/student9128/article/details/53239087
最近在写底部导航栏,平时用到的就常见了,不过Material Desigh的导航栏却用的不多。在谷歌官方文档上有这种设计,可惜却没用过。所以学习了一下,这里记录下来。
那么BottomNavigationBar是什么样子呢?请看图
这个是Google Material上面的图。可以看到有谷歌对设计的建议
下面看下我的效果图:
添加依赖
首先使用BottomNavigationBar前要添加依赖。
布局代码:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.student.kevin.bottomnavigationbar.MainActivity"><LinearLayout
android:id="@+id/ll_content"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:text="Hello World!"></LinearLayout><com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@+id/bottom_navigation_bar"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"></com.ashokvarma.bottomnavigation.BottomNavigationBar>
</RelativeLayout>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
也就是与其他布局使用方法一样,直接在布局里面添加就行了。
代码中的使用
mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.icon_one, R.string.tab_one).setActiveColorResource(R.color.green).setBadgeItem(badgeItem)).addItem(new BottomNavigationItem(R.drawable.icon_two, R.string.tab_two).setActiveColorResource(R.color.orange)).addItem(new BottomNavigationItem(R.drawable.icon_three, R.string.tab_three).setActiveColorResource(R.color.lime)).addItem(new BottomNavigationItem(R.drawable.icon_four, R.string.tab_four))//依次添加item,分别icon和名称.setFirstSelectedPosition(0)//设置默认选择item.initialise();//初始化
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
这样底部导航栏就有了,是不是很简单。相比平时写的导航栏确实简单的很多。这样还不行,光有导航栏了,还要有监听,因为我们要根据点击导航栏的tab来切换不同的fragment。所以要添加监听事件。
添加监听,重写方法,我们最常做的事情
这样在重写的方法里进行Fragment的切换即可
@Overridepublic void onTabSelected(int position) {FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();switch (position) {case 0:if (mFragmentOne == null) {mFragmentOne = FragmentOne.newInstance("First Fragment");}transaction.replace(R.id.ll_content, mFragmentOne);break;case 1:if (mFragmentTwo == null) {mFragmentTwo = FragmentTwo.newInstance("Second Fragment");}transaction.replace(R.id.ll_content, mFragmentTwo);break;case 2:if (mFragmentThree == null) {mFragmentThree = FragmentThree.newInstance("Third Fragment");}transaction.replace(R.id.ll_content, mFragmentThree);break;case 3:if (mFragmentFour == null) {mFragmentFour = FragmentFour.newInstance("Forth Fragment");}transaction.replace(R.id.ll_content, mFragmentFour);break;default:if (mFragmentOne == null) {mFragmentOne = FragmentOne.newInstance("First Fragment");}transaction.replace(R.id.ll_content, mFragmentOne);break;}transaction.commit();}@Overridepublic void onTabUnselected(int position) {}@Overridepublic void onTabReselected(int position) {}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
这样出现的只是默认的效果,我们如果要自己需要的颜色背景呢?
当然有方法
个性化BottomNavigationBar
BottomNavigationBar已经提供给了我们方法
mBottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
- 1
- 2
- 1
- 2
Mode和BackgroundStyle分别有三种,分别包含一种Default模式
效果图
这里截取几种效果图:
- Default默认效果
- FIXED+STATIC
- FIXED+RIPPLE
- SHIFTING+RIPPLE
SHIFTING+STATIC效果这里就不传了,通过对比可以发现,默认的效果其实就是SHIFTING+STATIC效果
设置导航栏颜色
当然导航栏的颜色也是可以设置成固定颜色的,刚开始的效果图可以看到导航栏是蓝色。默认颜色的colorAccent
mBottomNavigationBar.setBarBackgroundColor(R.color.blue);//set background color for navigation bar,设置底部导航栏颜色
- 1
- 1
添加黄色小圆点
还上面的效果图上可以看到,第一个tab上面有一个黄色的小圆点。这跟小红点是一样的,只是我设置颜色为黄色的了。
这个就是添加了一个BadgeItem.
BadgeItem badgeItem = new BadgeItem();badgeItem.setHideOnSelect(false).setText("10").setBackgroundColorResource(R.color.orange).setBorderWidth(0);//导航栏中的tab添加小圆点
mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.icon_one, R.string.tab_one).setActiveColorResource(R.color.green).setBadgeItem(badgeItem));
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
不知道有没有感觉这个很好用呢?我感觉还不错,有需要的可以看一下哦~
导航栏BottomNavigationBar使用相关推荐
- Flutter底部导航栏BottomNavigationBar页面状态保持解决方案
网易云[玩转大前端]配套课程 EDU配套 教程 Flutter开发的点滴积累系列文章 一行代代码置灰应用?对就是这么干 在实际应用开发中,一般应用的首页面会有这种结构,在Flutter应用开发中,有多 ...
- Flutter学习日记之底部导航栏BottomNavigationBar组件的使用
本文地址:https://blog.csdn.net/qq_40785165/article/details/116953235,转载需附上此地址 大家好,我是小黑,一个还没秃头的程序员~~~ 空袋子 ...
- Android 底部导航栏 BottomNavigationBar
大部分app,都采用导航栏的方式,无论是顶部导航栏还是底部导航栏,这是一个app的根骨,本文是采用Google最近添加到Material design中的底部导航栏BottomNavigationBa ...
- Flutter底部导航栏BottomNavigationBar
BottomNavigationBar是底部的导航栏,一般应用在多个视图进行选择.类比于Android的底部导航栏,由Text文本和Icon图标组成. 这里创建一个List为显示内容提供容器: sta ...
- 【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )
文章目录 一.BottomNavigationBar 底部导航栏 二.PageView 滑动页面 三.BottomNavigationBar 与 PageView 关联 四.完整代码示例 1.核心导航 ...
- 【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
文章目录 一.BottomNavigationBar 组件 二.BottomNavigationBarItem 组件 三.BottomNavigationBar 底部导航栏代码示例 四.BottomN ...
- Android学习之BottomNavigationBar实现Android特色底部导航栏
Android底部导航栏的实现方式特别多,例如TabHost,TabLayout,或者TextView等,都可以实现底部导航栏的效果,但是却没有Google官方统一的导航栏样式,今天讲的就是Googl ...
- android仿咸鱼底部导航栏,Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果...
如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titlebar能够和状态栏融为一体,增加沉浸感. 如上 ...
- Flutter NavigationBar 优雅的实现底部导航栏菜单
程序员如果敲一会就停半天,抱着一杯茶,表情拧巴,那才是在编程,在之前我要实现一级标签效果,我还在苦苦写了好多嵌套的代码,当我看到 Clip 时,泪奔啊,原来一个组件就可以实现,所以从事Flutter开 ...
最新文章
- 欢迎参加2022年第一次《城市大脑建设标准规范》专家研讨会
- 显示乱七八糟图片问题之解决
- IfSpeed 带宽计算
- 【华为云技术分享】云图说|全新华为云云备份服务:为您的数据提供三合一的保障
- shell进行mysql统计
- SAP License:ERP的实施要点
- 区块链入局新领域:助推会展产业从信息化向数字化转型!
- 简易天线增益测量系统
- 网页制作之各种框架简介
- 日志追踪-类加载器-自定义类加载器
- linux展示隐藏的文件,linux怎样设置显示隐藏文件?
- html的几种选择器
- 域内计算机本地管理员密码管理
- android 逆向so,逆向Android SO,以《遇见》App为例
- 二叉平衡树(AVL树)详细理解
- 什么产品适合做海外众筹
- Pytorch实现YOLOv3训练自己的数据集
- MATLAB 用拉格朗日插值验证龙格现象
- 《机器学习实战》学习第一章
- 曾经的中国互联网:多少巨头销声匿迹
热门文章
- [bzoj3144]【HNOI2013】切糕
- 连接ssh响应慢解决办法
- 设n个不同的整数排好序后存于T[1..n]中,若存在一个下标i(1≤ i ≤ n),使得T[i]=i。试设计一个有效算法找到这个下标,要求算法在最坏情形下的计算时间为O(log n)
- 近代诗欣赏【白鹭引擎】
- OW+框架的个人理解
- 学会线性表,一篇就够了
- 火焰之纹章多拉基亚776攻略
- 华东交通大学2018年ACM“双基”程序设计竞赛 D
- 有哪些能提升睡眠质量的好物,双十一助眠好物清单推荐
- python画笑脸表情_关于Python:Python-用ASCII字符替换unicode表情符号