Android 的底部导航栏 BottomNavigationBar 由Google官方Material design中增加的。
Android底部导航栏的实现方式特别多,例如TabHost,TabLayout,或者TextView等,都可以实现底部导航栏的效果。
但Google既然推出了还是可以尽量用他来实现底部导航栏这样的功能。
下来看看案例效果图
使用添加依赖
compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.zhangqie.bottomnavigationbar.MainActivity"> <FrameLayout android:id="@+id/fragment" 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>
BottomNavigationBar的属性设置
mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar); mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED); mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC); mBottomNavigationBar.setBarBackgroundColor(android.R.color.white); badgeItem = new BadgeItem() .setBackgroundColor(Color.RED).setText("99")//设置角标内容 .setHideOnSelect(true); //设置被选中时隐藏角标 mBottomNavigationBar .setActiveColor(R.color.colorBottomBack) //设置选中的颜色 .setInActiveColor(R.color.colorActive);//未选中颜色 mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.icon_home_normal, "首页"))//添加图标和文字 .addItem(new BottomNavigationItem(R.drawable.icon_shop_normal, "店铺")) .addItem(new BottomNavigationItem(R.drawable.icon_cart_normal, "购物车")) .addItem(new BottomNavigationItem(R.drawable.icon_my_normal, "我的").setBadgeItem(badgeItem)) .initialise(); //设置点击事件 mBottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener(){ @Override public void onTabSelected(int position) { showFragment(position); } @Override public void onTabUnselected(int position) { } @Override public void onTabReselected(int position) { } });
setMode的相关属性
包含3种Mode:
MODE_DEFAULT
- 如果Item的个数<=3就会使用MODE_FIXED模式,否则使用MODE_SHIFTING模式
MODE_FIXED (固定大小)
- 填充模式,未选中的Item会显示文字,没有换挡动画。
- 宽度=总宽度/action个数
- 最大宽度: 168dp
- 最小宽度: 80dp
- Padding:6dp(8dp)、10dp、12dp
- 字体大小:12sp、14sp
MODE_SHIFTING (不固定大小)
- 换挡模式,未选中的Item不会显示文字,选中的会显示文字。在切换的时候会有一个像换挡的动画
setBackgroundStyles的相关属性
包含3种Style:
BACKGROUND_STYLE_DEFAULT
- 如果设置的Mode为MODE_FIXED,将使用BACKGROUND_STYLE_STATIC 。如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。
BACKGROUND_STYLE_STATIC
- 点击的时候没有水波纹效果
- 航条的背景色是白色,加上setBarBackgroundColor()可以设置成你所需要的任何背景颜色
BACKGROUND_STYLE_RIPPLE
- 点击的时候有水波纹效果
- 导航条的背景色是你设置的处于选中状态的 Item的颜色(ActiveColor),也就是setActiveColorResource这个设置的颜色
BottomNavigationBar源码:https://github.com/Ashok-Varma/BottomNavigation
由于代码太多,就不一一贴出来了,源码直接下载即可
来源:https://www.cnblogs.com/zhangqie/p/7605655.html