Android------底部导航栏BottomNavigationBar

≯℡__Kan透↙ 提交于 2020-03-28 04:49:00

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

 

由于代码太多,就不一一贴出来了,源码直接下载即可

源码传送门

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!