一直以来Android App 的底部导航栏都是伟大的开发者挥洒自如的构造自己的作品,因为iAndroid一直没有官方的导航控制器,但是最近Google在自己推出的Material design中增加了Bottom Navigation导航控制。有了这个控件之后,就类似iOS的底部Toolbar,以后我们的Android APP就会有一致的风格,是不是心里有点小激动啊?先看一张效果:
代码传送门:https://github.com/Xianicai/BottomNavigationBar
基本使用
在Android Studio下添加依赖:
compile'com.ashokvarma.android:bottom-navigation-bar:1.2.0'
在布局文件中,添加布局
<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@+id/bottomNavigationBar"
android:layout_width="0dp"
android:layout_height="50dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:visibility="visible"/>
在代码中为BottomNavigationBar添加Item选项
String[] mTitles = new String[]{"首页", "发现", "信息", "我的"};
mBottomNavigationBar
.setActiveColor(R.color.yellow)
.setInActiveColor(R.color.black)
.setBarBackgroundColor(R.color.white);
mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
mBottomNavigationBar
.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC
);
mBottomNavigationBar
.addItem(new BottomNavigationItem(R.mipmap.ic_tabbar_home_pressed, mTitles[0])
.setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_tabbar_home_normal)))
.addItem(new BottomNavigationItem(R.mipmap.ic_tabbar_discover_pressed, mTitles[1])
.setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_tabbar_discover_normal)))
.addItem(new BottomNavigationItem(R.mipmap.ic_tabbar_feed_pressed, mTitles[2])
.setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_tabbar_feed_normal)))
.addItem(new BottomNavigationItem(R.mipmap.ic_tabbar_me_pressed, mTitles[3])
.setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_tabbar_me_normal)))
.setFirstSelectedPosition(0)
.initialise();//所有的设置需在调用该方法前完成```
**效果图如下:**
![惊不惊喜,意不意外?](http://upload-images.jianshu.io/upload_images/5853846-fb1d89a06d1bb6d4.gif?imageMogr2/auto-orient/strip)
#####添加选项卡切换事件监听
bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {//这里也可以使用SimpleOnTabSelectedListener
@Override
public void onTabSelected(int position) {//未选中->选中
}
@Override
public void onTabUnselected(int position) {//选中->未选中
}
@Override
public void onTabReselected(int position) {//选中->选中
}
});```
设置BottomNavigationBar
Mode
xml:bnbMode
方法:setMode()
包含3种Mode:
- MODE_DEFAULT
如果Item的个数<=3就会使用MODE_FIXED模式,否则使用MODE_SHIFTING模式 - MODE_FIXED
填充模式,未选中的Item会显示文字,没有换挡动画。 - MODE_SHIFTING
换挡模式,未选中的Item不会显示文字,选中的会显示文字。在切换的时候会有一个像换挡的动画
Background Style
xml: bnbBackgroundStyle
方法:setBackgroundStyles()
包含3种Style: - BACKGROUND_STYLE_DEFAULT
如果设置的Mode为MODE_FIXED,将使用BACKGROUND_STYLE_STATIC 。如果Mode为 -- MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。 - BACKGROUND_STYLE_STATIC
点击的时候没有水波纹效果 - BACKGROUND_STYLE_RIPPLE
点击的时候有水波纹效果
设置默认颜色
xml:bnbActiveColor, bnbInactiveColor, bnbBackgroundColor
方法:setActiveColor, setInActiveColor, setBarBackgroundColor
例如:
bottomNavigationBar.setActiveColor(R.color.primary).setInActiveColor("#FFFFFF").setBarBackgroundColor("#ECECEC")
- in-active color
表示未选中Item中的图标和文本颜色。默认为 Color.LTGRAY - active color :
在BACKGROUND_STYLE_STATIC下,表示选中Item的图标和文本颜色。而在BACKGROUND_STYLE_RIPPLE下,表示整个容器的背景色。默认Theme's Primary Color - background color :
在BACKGROUND_STYLE_STATIC下,表示整个容器的背景色。而在BACKGROUND_STYLE_RIPPLE下,表示选中Item的图标和文本颜色。默认 Color.WHITE
定制Item的选中未选中颜色
我们可以为每个Item设置选中未选中的颜色,如果没有设置,将继承BottomNavigationBar设置的选中未选中颜色。
方法:
BottomNavigationItem.setInActiveColor()设置Item未选中颜色方法
BottomNavigationItem.setActiveColor()设置Item选中颜色方法
Icon的定制
如果使用颜色的变化不足以展示一个选项Item的选中与非选中状态,可以使用BottomNavigationItem.setInActiveIcon()方法来设置。
例如:
new BottomNavigationItem(R.mipmap.ic_directions_bus_white_24dp,"公交")//这里表示选中的图片
.setInactiveIcon(ContextCompat.getDrawable(this,R.mipmap.ic_launcher)))//非选中的图片
设置自动隐藏与显示
如果BottomNavigationBar是在CoordinatorLayout布局里,默认设置当向下滑动时会自动隐藏它,当向上滑动时会自动显示它。我们可以通过setAutoHideEnabled(boolean)设置是否允许这种行为,好像这个方法木有啦。
手动隐藏与显示
我们可以在任何时间,通过代码隐藏或显示BottomNavigationBar
方法:
bottomNavigationBar.hide();//隐藏bottomNavigationBar.hide(true);//隐藏是否启动动画,这里并不能自定义动画
bottomNavigationBar.unHide();//显示bottomNavigationBar.hide(true);//隐藏是否启动动画,这里并不能自定义动画
实际上这里都是通过属性动画ViewPropertyAnimatorCompat来完成的,所以如果我们要自定义它的隐藏和显示的话,通过属性动画即可实现。
为Item添加Badge
什么是Badge,看图说话:
上面红色的图标就是Badge了,那如何使用呢?
创建一个BadgeItem
badge=new BadgeItem()//
.setBorderWidth(2)//Badge的Border(边界)宽度//
.setBorderColor("#FF0000")//Badge的Border颜色//
.setBackgroundColor("#9ACD32")//Badge背景颜色//
.setGravity(Gravity.RIGHT| Gravity.TOP)//位置,默认右上角
.setText("2")//显示的文本//
.setTextColor("#F0F8FF")//文本颜色//
.setAnimationDuration(2000)//
.setHideOnSelect(true)//当选中状态时消失,非选中状态显示
为BottomNavigationItem设置BadgeItem
new BottomNavigationItem(R.mipmap.ic_directions_bike_white_24dp,"骑行").setBadgeItem(badge)
参考:http://www.jianshu.com/p/134d7847a01e
简单的使用到这里就结束了,更深层次的需要我们动手撸,动脑想,一起加油做有梦想的好青年。
嗨~我是夏尼采,一个有梦想的IT男
每周输出3篇有用的文章,目标是签约简书。
如果文章对您有帮助,希望能点个赞或者关注我。
您的关注和点赞是对我最大的鼓励,感谢您的阅读