BottomNavigationBar酷炫导航栏
今年三月份Google在自己推出的Material design库中增加了BottomNavigationBar导航栏控制器。以前想要实现这个效果可谓是方法众多,五花八门像TabHost,RadioButton,textView等等,现在推出了这个就可以完美取代其它各式各样的导航栏。
先放上效果图
MODE_FIXED+BACKGROUND_STYLE_STATIC效果
MODE_SHIFTING+BACKGROUND_STYLE_STATIC效果
MODE_FIXED+BACKGROUND_STYLE_RIPPLE效果
MODE_SHIFTING+BACKGROUND_STYLE_RIPPLE效果
先看下build.gradle
compile 'com.ashokvarma.android:bottom-navigation-bar:1.2.0'
布局内容
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context="com.example.wangchang.testbottomnavigationbar.MainActivity"><FrameLayout
android:id="@+id/layFrame"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@+id/bottom_navigation_bar"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom" />
</LinearLayout>
接下来都是在mainactivity的操作了
1.首先需要设置导航栏的模式和背景样式
bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
2.初始化导航栏标签页
/***添加标签的消息数量*/BadgeItem numberBadgeItem = new BadgeItem().setBorderWidth(4).setBackgroundColor(Color.RED).setText("5").setHideOnSelect(true);/***添加tab标签页*/bottomNavigationBar.addItem(new BottomNavigationItem(R.mipmap.ic_book_white_24dp, "Books").setActiveColorResource(R.color.teal).setBadgeItem(numberBadgeItem)).addItem(new BottomNavigationItem(R.mipmap.ic_music_note_white_24dp, "Music").setActiveColorResource(R.color.blue)).addItem(new BottomNavigationItem(R.mipmap.ic_tv_white_24dp, "Movies & TV").setActiveColorResource(R.color.brown)).addItem(new BottomNavigationItem(R.mipmap.ic_videogame_asset_white_24dp, "Games").setActiveColorResource(R.color.grey).setBadgeItem(numberBadgeItem)).initialise();/***首次进入不会主动回调选中页面的监听*所以这里自己调用一遍,初始化第一个页面*/onTabSelected(0);bottomNavigationBar.setTabSelectedListener(this);
接下来就是重要的部分了,对Fragment状态进行保存。
@Overridepublic void onTabSelected(int position) {FragmentManager fm = getSupportFragmentManager();FragmentTransaction transaction = fm.beginTransaction();/***每次添加之前隐藏所有正在显示的Fragment*然后如果是第一次添加的话使用transaction.add();*但第二次显示的时候,使用transaction.show();*这样子我们就可以保存Fragment的状态了*/hideFragment(transaction);switch (position) {case 0:if (bookFragment == null) {bookFragment = new BookFragment();transaction.add(R.id.layFrame, bookFragment);list.add(bookFragment);} else {transaction.show(bookFragment);}break;case 1:if (musicFragment == null) {musicFragment = new MusicFragment();transaction.add(R.id.layFrame, musicFragment);list.add(musicFragment);} else {transaction.show(musicFragment);}break;case 2:if (tvFragment == null) {tvFragment = new TvFragment();transaction.add(R.id.layFrame, tvFragment);list.add(tvFragment);} else {transaction.show(tvFragment);}break;case 3:if (gameFragment == null) {gameFragment = new GameFragment();transaction.add(R.id.layFrame, gameFragment);list.add(gameFragment);} else {transaction.show(gameFragment);}break;}transaction.commit();}
隐藏Fragment
/*** @param transaction*/public void hideFragment(FragmentTransaction transaction) {for (Fragment fragment : list) {transaction.hide(fragment);}}
碎片的布局就很简单了
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:orientation="vertical"><CheckBox
android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="book" />
</LinearLayout>
这里还有个小问题,添加了5个标签页的时候,这样保存Fragment状态第二次切换回第一个标签页的时候就有问题无法正常切换,有兴趣的小伙伴可以试一下!
这就是带状态保存的BottomNavigationBar
BottomNavigationBar酷炫导航栏相关推荐
- html炫酷的导航栏效果,css3制作炫酷导航栏效果
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
- html炫酷的导航栏效果,纯CSS3创意导航菜单特效
这是一款非常有创意的纯CSS3导航菜单特效.该导航菜单主要通过CSS3 transform和transition方法实现效果,非常简单.该特效由進擊的燊提供. 使用方法 HTML结构 该导航菜单使用一 ...
- java 导航栏 可视化_一步步教大家编写酷炫的导航栏js+css实现
一步一步的学习制作导航栏,文章末尾再做个综合页面,分享给大家一个炫酷的导航栏供大家参考,具体内容如下 1.当前页面高亮显示的导航栏 首先是HTML代码,很简单,ul+li实现菜单 导航栏一 Andro ...
- Qt仿照酷狗的导航栏
简述 如题所示,本篇文章主要展示博主在仿照酷狗做播放器的时候,模仿酷狗导航栏及其实现的代码. 酷狗原图: 实现效果: 实现原理 酷狗的导航条是控制下面所要展示的控件的,所以我采用的是继承QPushBu ...
- android fragment 底部菜单栏,一句话搞定Android底部导航栏,一键绑定Fragment、ViewPager...
现在大多数App都会用到底部导航栏,比如常见的聊天工具QQ.微信.购物App等等,有了底部导航栏,用户可以随时切换界面,查看不同的内容.它的实现方式也很多,以前大多使用TabHost来实现,但是现在我 ...
- Android底部导航栏的四种实现
现在大多数App都会用到底部导航栏,比如常见的聊天工具QQ.微信,购物App等等,有了底部导航栏,用户可以随时切换界面,查看不同的内容.它的实现方式也很多,以前大多使用TabHost来实现,但是现在我 ...
- 原生Android打造一个炫酷的底部导航栏
最近浏览各大平台,发现各种导航栏层出不穷,出于好奇心,我也来试试.先上个效果图 代码也简单:首先布局文件 <?xml version="1.0" encoding=" ...
- android 打造炫酷导航栏(仿UC头条)
年后开始上班甚是清闲,所以想捣鼓一些东西.在翻阅大神杰作Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI 的时候看到下面有一条评论说,如果导航栏能滑动就更好了. ...
- CSS实现炫酷导航栏
实现思路 本导航栏的实现,通过使用伪元素:before和:after这两个伪元素在真正页面元素a标签之前和之后添加新内容(边框,背景颜色),使用transition属性设置过渡效果的时间,再使用:ho ...
最新文章
- python程序设计——函数设计与调用
- python下载网页中的pdf文件_【Python】Python的urllib模块、urllib2模块批量进行网页下载文件...
- Notification通知栏
- import org.apache.http.xxxxxx 爆红,包不存在之解决办法
- Linux 命令之 env -- 显示系统的环境变量,定义执行命令时的环境变量
- 删除vs的调试其他软件的功能
- 引用activity_允许其他应用启动您的 Activity
- 838计算机专业课包含什么,华南农业大学
- 3.字符串(string)
- 【转】新方法打造自己的N合一 XP系统盘
- 国家统计局拟用大数据预测房价走势
- python sample函数
- [CSS揭秘]菱形图片
- vue中 this.$set的使用
- 一个曾讨厌英语的人是如何爱上英语学好英语的
- “数据结构”课程的内容
- Python世界里的魔术方法(一)
- 纯干货!最全股票基础知识(上)
- MATLAB 代数运算
- IT项目管理:项目前期研究报告
热门文章
- RTMP FLV H.264 NALU GOP
- Antd Table 点击行变换背景颜色 (Antd React)
- 第一次考PAT甲级,95分,分享一下自己的心得体会
- 《长安三万里》片尾曲
- 锁定select下拉框
- 《大话处理器》连载——微架构(1) 顺溜的2级流水线
- 微信小程序之联合百度API实现定位(6)
- 工程研发专业名词解释(EVT,DVT,DMT,MVT,PVT,MP)
- img,br标签以及img标签的路径问题
- c语言java对电脑配置的要求,java程序员需要的电脑配置