官方的support design包中其实也有底部导航栏的控件叫BottomNavigationView,但是很不爽的地方就是当底部导航栏的item个数大于4个的时候会自动的改变显示模式,隐藏了文字,相比之下,下面的导航栏就没有这个问题,而且还有一些官方没有的功能,比如徽章。
目前github上的版本更新到了2.02版本,使用上没什么太大的变化,下面是地址
https://github.com/Ashok-Varma/BottomNavigation
1.使用BottomNavigationBar首先要先添加依赖,更改为最新的版本即可
compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0’
2.接下来是布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.yzq.csdn_bottomnav.MainActivity">
<!--内容区域-->
<LinearLayout
android:id="@+id/bottom_nav_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<!--BottomNavigationBar-->
<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@+id/bottom_navigation_bar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
</com.ashokvarma.bottomnavigation.BottomNavigationBar>
</android.support.design.widget.CoordinatorLayout>
布局很简单,就是一个内容区域和一个底部的导航栏。
内容区域只是用来显示不同的fragment
3.接下来转到MainActivity中
先设置BottomNavigationBar的样式和添加选项
默认有3种样式,通过对setMode和setBackgroundStyle的进行不同的组合会有不同的效果,感兴趣的可以自己尝试。
bottom_navigation_bar_container.setAutoHideEnabled(true);//自动隐藏
//BottomNavigationBar.MODE_SHIFTING;
//BottomNavigationBar.MODE_FIXED;
//BottomNavigationBar.MODE_DEFAULT;
bottom_navigation_bar_container.setMode(BottomNavigationBar.MODE_FIXED);
// BottomNavigationBar.BACKGROUND_STYLE_DEFAULT;
// BottomNavigationBar.BACKGROUND_STYLE_RIPPLE
// BottomNavigationBar.BACKGROUND_STYLE_STATIC
bottom_navigation_bar_container.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
bottom_navigation_bar_container.setBarBackgroundColor(R.color.white);//背景颜色
bottom_navigation_bar_container.setInActiveColor(R.color.nav_gray);//未选中时的颜色
bottom_navigation_bar_container.setActiveColor(R.color.colorPrimaryDark);//选中时的颜色
我们还可以设置角标
badgeItem = new BadgeItem().setBackgroundColor(Color.RED).setText(“99”).setHideOnSelect(true);//角标
接下来创建选项
msgItem = new BottomNavigationItem(R.drawable.msg, "消息");
msgItem.setBadgeItem(badgeItem);
taskItem = new BottomNavigationItem(R.drawable.task, "任务");
noticeItem = new BottomNavigationItem(R.drawable.notice, "公告");
然后将选项添加并初始化,设置监听
bottom_navigation_bar_container.addItem(msgItem).addItem(taskItem).addItem(noticeItem);
bottom_navigation_bar_container.initialise();
bottom_navigation_bar_container.setTabSelectedListener(this);
这样 底部导航栏就出来啦
4.接下来就是对监听做处理 选择选项时显示相应的fragment
/*底部NaV监听*/
@Override
public void onTabSelected(int position) {
hideAllFrag();//先隐藏所有frag
switch (position) {
case 0:
if (msgFrag == null) {
msgFrag = new MsgFragment();
}
addFrag(msgFrag);
getSupportFragmentManager().beginTransaction().show(msgFrag).commit();
getSupportActionBar().setTitle("消息");
break;
case 1:
if (taskFrag == null) {
taskFrag = new TaskFragment();
}
addFrag(taskFrag);
getSupportFragmentManager().beginTransaction().show(taskFrag).commit();
getSupportActionBar().setTitle("任务");
break;
case 2:
/*公告Frag*/
if (noticeFrag == null) {
noticeFrag = new NoticeFragment();
}
addFrag(noticeFrag);
getSupportFragmentManager().beginTransaction().show(noticeFrag).commit();
getSupportActionBar().setTitle("公告");
break;
}
}
大功告成!这样一个漂亮的底部导航就完成了,很简单吧。效果图如下
下面是写的一个小demo
底部导航栏Demo
需要Flutter底部导航栏的可以看 Flutter底部导航栏使用方法 这篇文章