美文网首页AndroidAndroid开发学习
Android BottomNavigationView底部导航

Android BottomNavigationView底部导航

作者: 灰丨色 | 来源:发表于2019-08-28 14:28 被阅读0次

    基础使用

    先导入依赖(这里以AndroidX为例)

    implementation 'com.google.android.material:material:1.0.0'
    

    在布局中使用

    <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottomNavigationView"
                android:layout_width="match_parent"
                android:layout_height="56dp"
                android:background="@color/white"
                app:itemBackground="@null"
                app:itemTextColor="@drawable/sl_tab_color"
                app:labelVisibilityMode="labeled"
                app:layout_constraintBottom_toBottomOf="parent"
                app:menu="@menu/navigation_item" />
    

    其中app:itemTextColor="@drawable/sl_tab_color"为设置按钮选中与未选中时字体的颜色选择。navigation_item.xml文件为:

    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:id="@+id/menu_main"
            android:icon="@drawable/sl_tab_main_main"
            android:title="@string/menu_main"/>
    
        <item
            android:id="@+id/menu_project"
            android:icon="@drawable/sl_tab_main_project"
            android:title="@string/menu_project"/>
    
        <item
            android:id="@+id/menu_wechat"
            android:icon="@drawable/sl_tab_main_wechat"
            android:title="@string/menu_wechat"/>
    
        <item
            android:id="@+id/menu_system"
            android:icon="@drawable/sl_tab_main_system"
            android:title="@string/menu_system"/>
    </menu>
    

    其中android:icon="@drawable/sl_tab_main_system"为设置按钮选中与未选中时的图标选择
    显示效果:


    image.png

    注意:

    在BottomNavigationView的源码内有如下一段代码

    public int getMaxItemCount() {
            return 5;
    }
    

    所以当我们在menu文件内添加的item个数大于5个时会报错

    常见的效果显示

    1.去除点击时出现的水波纹背景效果
    app:itemBackground="@null"
    
    2.去除点击时的动画效果以及位移现象
    app:labelVisibilityMode="labeled"
    

    属性取值有labeled、unlabeled、selected、auto
    labeled:所有按钮中都显示图标与标签。
    unlabeled:所有按钮中都不显示标签,只显示图标。
    selected:只有选中的按钮才显示标签与图标,其他未选中的只显示图标。
    auto:自动模式,该模式使用item数来确定是否显示或隐藏标签。当按钮个数小于等于3个时使用labeled模式,大于3个时使用selected模式。

    此方法仅限当前使用的api大于28时才可使用。当api小于28时可采用下面这种方式:

    @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); 
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e( "TAG","Unable to get shift mode field");
        } catch (IllegalAccessException e) {
            Log.e( "TAG","Unable to change value of shift mode");
        }
    }
    
    3.去除点击时默认的图标颜色修改
    bottomNavigationView.itemIconTintList = null
    
    4.修改文字大小

    在资源文件dimens.xml中添加

    <dimen name="design_bottom_navigation_active_text_size" tools:override="true">12sp</dimen>
    <dimen name="design_bottom_navigation_text_size" tools:override="true">12sp</dimen>
    

    Activity内使用

    bottomNavigationView.setOnNavigationItemSelectedListener {
             when (it.itemId) {
                    R.id.menu_main -> {
                             //todo
                    }
                    R.id.menu_project -> {
                            //todo
                    }
                    R.id.menu_system -> {
                               //todo
                    }
                    R.id.menu_wechat -> {
                              //todo
                    }
                }
                true
            }
    

    如果需要获取具体某个按钮的相关信息时,可以调用下面的代码


    image.png

    相关文章

      网友评论

        本文标题:Android BottomNavigationView底部导航

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