之前底部导航栏的基本上都是自己通过selector来实现的,今天换上了Google推出的BottomNavigationBar,感觉效果还不错,写了一个项目上要用到的功能的demo,先上一张效果图,大家感受一下:
这里主要介绍BottomNavigationBar的使用,首先要在build.gradle中添加依赖:
//底部导航栏样式BottomNavigationBar compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.3'
然后在布局文件中就可以使用了:
<com.ashokvarma.bottomnavigation.BottomNavigationBar android:id="@+id/bottom_navigation_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_alignParentBottom="true"/>接下来就是 BottomNavigationBar在activity中的使用, 当然,首先是实例化控件:
mBottomNavigationBar= (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
大家看到的效果图中的变化的数字和蓝色五角星是分别通过TextBadgeItem和ShapeBadgeItem来实现的:
mTextBadgeItem = new TextBadgeItem() .setBorderWidth(4) .setBackgroundColorResource(R.color.colorAccent) .setAnimationDuration(200) .setText("3") .setHideOnSelect(false); mShapeBadgeItem = new ShapeBadgeItem() .setShapeColorResource(R.color.colorPrimary) .setGravity(Gravity.TOP | Gravity.END) .setHideOnSelect(false);然后就是设置 BottomNavigationBar的属性了:
mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED) .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC); mBottomNavigationBar //值得一提,模式跟背景的设置都要在添加tab前面,不然不会有效果。 .setActiveColor(R.color.green);//选中颜色 图标和文字 // .setInActiveColor("#8e8e8e")//默认未选择颜色 // .setBarBackgroundColor(R.color.white);//默认背景色 mBottomNavigationBar .addItem(new BottomNavigationItem(R.drawable.homepage_click,"首页") .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this,R.drawable.homepage_normal)) .setBadgeItem(mShapeBadgeItem)) .addItem(new BottomNavigationItem(R.drawable.grown_wall_click,"成长墙") .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this,R.drawable.grown_wall_normal))) .addItem(new BottomNavigationItem(R.drawable.study_click,"学管通") .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this,R.drawable.study_normal)) .setBadgeItem(mTextBadgeItem)) .addItem(new BottomNavigationItem(R.drawable.me_click,"我的") .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this,R.drawable.me_normal))) .setFirstSelectedPosition(0)//设置默认选择的按钮 .initialise();//所有的设置需在调用该方法前完成Mode和BackgroundStyle分别有三种,分别包含一种Default模式:
Mode包含3种Mode:
- MODE_DEFAULT
如果Item的个数<=3就会使用MODE_FIXED模式,否则使用MODE_SHIFTING模式 - MODE_FIXED
填充模式,未选中的Item会显示文字,没有换挡动画。 - MODE_SHIFTING
换挡模式,未选中的Item不会显示文字,选中的会显示文字。在切换的时候会有一个像换挡的动画
- MODE_DEFAULT
Background Style包含3种Style:
BACKGROUND_STYLE_DEFAULT
如果设置的Mode为MODE_FIXED,将使用BACKGROUND_STYLE_STATIC 。如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。BACKGROUND_STYLE_STATIC
点击的时候没有水波纹效果BACKGROUND_STYLE_RIPPLE
点击的时候有水波纹效果
官方地址为:https://github.com/Ashok-Varma/BottomNavigation
官方效果图:
mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.homepage_click,"首页")
当然有时候这个填充颜色的图片可能跟你们UI给你的设计效果图不一致,所以你也可以像我一样这样添加:
mBottomNavigationBar .addItem(new BottomNavigationItem(R.drawable.homepage_click,"首页") .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this,R.drawable.homepage_normal)) .setBadgeItem(mShapeBadgeItem))setBadgeItem()方法就是效果上的设置的蓝色五角星的效果,传的是 ShapeBadgeItem,当然换成 TextBadgeItem的话就是那个加减数字的效果了,ShapeBadgeItem和TextBadgeItem可以通过他们的hide()和show()方法来控制他们的显示和隐藏。属性就介绍这么多吧。
下面要实现BottomNavigationBar的点击选择事件:
mBottomNavigationBar //设置lab点击事件 .setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() { @Override public void onTabSelected(int position) { switch (position){ case 0: index = 0; break; case 1: index = 1; break; case 2: index = 2; break; case 3: index = 3; break; } if (index == 2) { startActivity(new Intent(MainActivity.this, ChatActivity.class)); return; } if (currentTabIndex != index) { FragmentTransaction trx = getSupportFragmentManager().beginTransaction(); trx.hide(mFragments[currentTabIndex]); if (!mFragments[index].isAdded()) { trx.add(R.id.fl, mFragments[index]); } trx.show(mFragments[index]).commit(); } currentTabIndex = index; // Toast.makeText(MainActivity.this,"onTabSelected"+position,Toast.LENGTH_SHORT).show(); } @Override public void onTabUnselected(int position) { if (index==2){ mBottomNavigationBar.selectTab(position); } // Toast.makeText(MainActivity.this,"onTabUnselected"+position,Toast.LENGTH_SHORT).show(); } @Override public void onTabReselected(int position) { // Toast.makeText(MainActivity.this,"onTabReselected"+position,Toast.LENGTH_SHORT).show(); } });这就是它的Tab选择事件了,是不是很简单,好像也没什么要重点说明的,他的下标是从0开始的应该不用我提醒吧
![偷笑](http://static.blog.csdn.net/xheditor/xheditor_emot/default/titter.gif)
给出Demo下载地址:http://download.csdn.net/download/lkjfyy/10178202