美文网首页AndroidAndroidUI
Android 底部导航栏BottomNavigationVie

Android 底部导航栏BottomNavigationVie

作者: 斌林诚上 | 来源:发表于2018-10-09 12:36 被阅读2017次

    一、简介

    这是material design提供的一个标准底部导航栏的实现,可以轻松的实现导航栏菜单之间的切换与浏览。使用方式更加快捷方便,适用于拥有3-5个子菜单。

    二、基本配置

    (1)添加依赖:

    (本人项目中使用的是较高版本的依赖)
    项目中依赖:implementation 'com.android.support:design:28.0.0-rc02'
    最新依赖:compile 'com.android.support:design:+'(容易出错,依赖冲突)
    指定依赖:compile 'com.android.support:design:26.1.0'
    

    (2)添加布局:

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bnv_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@drawable/main_bottom"
        app:itemTextColor="@drawable/main_bottom"
        />
    

    (3)属性说明:

    itemBackground: 设置导航栏的背景颜色

    itemIconTint: 设置导航栏中图片的颜色

    itemTextColor: 设置导航栏中文字的颜色

    三、代码运用

    (1)指定导航栏菜单

    布局设置 :

    <android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/bottomNavigationView"
        app:itemBackground="@color/gray"
        app:itemIconTint="@drawable/main_bottom"
        app:itemTextColor="@drawable/main_bottom"
        app:menu="@menu/menu_bottom_navigation_view" />
    

    app:menu :引用菜单布局


    clipboard.png

    menu_bottom_navigation_view.xml

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
        <item
            android:id="@+id/item_bottom_1"
            android:enabled="true"
            android:icon="@mipmap/set"
            android:title="选项一"
            app:showAsAction="ifRoom" />
          <item
            android:id="@+id/item_bottom_2"
            android:enabled="true"
            android:icon="@mipmap/set"
            android:title="选项二"
            app:showAsAction="ifRoom" />
        <item
            android:id="@+id/item_bottom_3"
            android:enabled="true"
            android:icon="@mipmap/set"
            android:title="选项三"
            app:showAsAction="ifRoom" />
    
    </menu>
    

    效果图:

    1.gif

    (2)代码添加导航栏菜单

    无需指定菜单布局:

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bnv_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@drawable/main_bottom"
        app:itemTextColor="@drawable/main_bottom"
        />
    

    动态添加菜单项(Item):

    Menu menu = bnvMenu.getMenu();
    menu.add(0,i,i,"标题一");//设置菜单标题
    MenuItem item = menu.findItem(i);
    item.setIcon(R.mipmap.set);//设置菜单图片
    

    删除最后一个菜单项(Item):

    bnvMenu.getMenu().removeItem(bnvMenu.getMenu().size()-1);
    
    效果图: 3.gif

    (3)设置选中菜单颜色

    app:itemIconTint="@drawable/main_bottom"
    app:itemTextColor="@drawable/main_bottom"
    

    main_bottom.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/green" android:state_checked="true" />
        <item android:color="@color/white" android:state_checked="false" />
    </selector>
    

    (4)常用方法

    //设置默认选中item
    bottomNavigationView.getMenu().getItem(1).setChecked(true);
    
    //设置导航栏菜单项Item选中监听
    bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            String title = item.getTitle().toString();
            switch (item.getItemId()) {
                case R.id.item_bottom_1:
                    RxToast.showToastShort(activity, title);
                    break;
                case R.id.item_bottom_2:
                    RxToast.showToastShort(activity, title);
                    break;
                case R.id.item_bottom_3:
                    RxToast.showToastShort(activity, title);
                    break;
            }
            return true;
        }
    });
    

    (5)超过3个菜单项动画效果问题

    看了许多博客归纳后的解决方法

    一、新api去除动画的方法:

    //默认动画
    bottomNavigationView.setLabelVisibilityMode(0);
    //默认清除动画(显示文字)
    bottomNavigationView.setLabelVisibilityMode(1);
    或布局中添加:app:labelVisibilityMode="labeled"
    

    二、旧api去除动画的方法

    @SuppressLint("RestrictedApi")
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //去除动画
                item.setShiftingMode(false); //api 28之前
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            LogUtils.e( "Unable to get shift mode field");
        } catch (IllegalAccessException e) {
            LogUtils.e( "Unable to change value of shift mode");
        }
    }
    

    四、源码地址

    https://github.com/DayorNight/BLCS

    五、参考文档

    官方文档:https://developer.android.google.cn/reference/android/support/design/widget/BottomNavigationView

    六、内容推荐

    CSDN地址:https://blog.csdn.net/cs_lwb/article/details/82979521
    上一篇《Android Log日志封装》

    相关文章

      网友评论

        本文标题:Android 底部导航栏BottomNavigationVie

        本文链接:https://www.haomeiwen.com/subject/fhueaftx.html