Android底部导航栏之BottomNavigationView

一,基本用法

1,首先需要添加依赖:

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

2,布局文件中引入:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="0dp"
    android:layout_marginEnd="0dp"
    android:background="?android:attr/windowBackground"
    app:menu="@menu/bottom_nav_menu" />

3,常用属性:

  • app:itemTextColor 文字的颜色,可以通过selector来控制选中和未选中的颜色

  • app:itemIconTint 图标的颜色,可以通过selector来控制选中和未选中的颜色

  • app:itemIconSize 图标大小,默认24dp

  • app:iteamBackground 背景颜色,默认是主题的颜色

  • app:itemRippleColor 点击后的水波纹颜色

  • app:itemTextAppearanceActive 设置选中时文字样式

  • app:itemTextAppearanceInactive 设置默认的文字样式

  • app:itemHorizontalTranslationEnabled 在label visibility 模式为selected时item水平方向移动

  • app:elevation 控制控件顶部的阴影

  • app:labelVisibilityMode 文字的显示模式

  • app:menu 指定菜单xml文件(文字和图片都写在这个里面)

4,menu文件:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_rypc"
        android:icon="@drawable/main_bottom_rypc_selector"
        android:title="@string/bottom_rypc" />

    <item
        android:id="@+id/navigation_ryzy"
        android:icon="@drawable/main_bottom_ryzy_selector"
        android:title="@string/bottom_ryzy" />

    <item
        android:id="@+id/navigation_ryct"
        android:icon="@drawable/main_bottom_ryct_selector"
        android:title="@string/bottom_ryct" />
    <item
        android:id="@+id/navigation_mine"
        android:icon="@drawable/main_bottom_mine_selector"
        android:title="@string/bottom_mine" />
</menu>

在每个item中设置对应的icon和title即可。这里的icon可以是一个drawable,也可以是包含不同状态对应不同图片的selector。设置了menu后一个基本的底部菜单栏就有了。

二,配合Fragment使用

1.设置对应的navigation文件,指定fragment页面

<?xml version="1.0" encoding="utf-8"?>
<navigation 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"
    app:startDestination="@id/navigation_rypc"
    android:id="@+id/main_navigation">

    <fragment
        android:id="@+id/navigation_rypc"
        android:name="com.heziz.yjct.fragment.RypcFragment"
        tools:layout="@layout/fragment_rypc"/>

    <fragment
        android:id="@+id/navigation_ryzy"
        android:name="com.heziz.yjct.fragment.RyzyFragment"
        tools:layout="@layout/fragment_ryzy"/>

    <fragment
        android:id="@+id/navigation_ryct"
        android:name="com.heziz.yjct.fragment.RyctFragment"
        tools:layout="@layout/fragment_ryct"/>

    <fragment
        android:id="@+id/navigation_mine"
        android:name="com.heziz.yjct.fragment.MineFragment"
        tools:layout="@layout/fragment_mine"/>

</navigation>

2.activity中的布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#f8f8f8"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/main_navigation" />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:layout_gravity="bottom"
        android:background="@color/white"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/main_bottom_icons" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

3.Activity中使用


public class MainActivity extends BaseAppCompatActivity {

    BottomNavigationView bottomNavigationView;

    @Override
    protected boolean isRegisterEventBus() {
        return false;
    }

    @Override
    protected int setLayout() {
        return R.layout.activity_main;
    }

    @Override
    protected void setView() {
        initNavigation();
    }

    @Override
    protected void setData() {
    }

    private void initNavigation() {

        NavController controller = Navigation.findNavController(this, R.id.nav_host_fragment);
        bottomNavigationView = findViewById(R.id.bottom_navigation);
        NavigationUI.setupWithNavController(bottomNavigationView,controller);

        // 动态删除底部导航控件
//        bottomNavigationView.getMenu().removeItem(R.id.navigation_ryzy);
    }

三,注意事项

  • menu文件中item的id要和navigation文件中fragment的id保持一致,否则无法正常显示

  • 要想取消点击选中后放大效果,只需在dimens文件中新增一下配置,设置字体大小一致

//防止字体出现变大效果
    <dimen name="design_bottom_navigation_active_text_size">12dp</dimen>
    <dimen name="design_bottom_navigation_text_size">12dp</dimen>

四,显示badge(角标/悬浮徽章)

还在github上查找怎么往BottomNavigationView上添加badge吗?BottomNavigationView默认提供了badge。

1,基本使用

BottomNavigationView上添加badge很简单,它提供了如下操作badge的方法:

  • getBadge(int menuItemId) 获取badge

  • getOrCreateBadge(int menuItemId) 获取或创建badge

  • removeBadge(int menuItemId) 移除badge

因此添加一个badge只需要如下代码:

val navView: BottomNavigationView = findViewById(R.id.nav_view)
val badge = navView.getOrCreateBadge(R.id.navigation_dashboard)

效果:

设置数量

badge.number = 20

设置数量后效果:

2,常用属性

getBadgegetOrCreateBadge方法返回的都是BadgeDrawableBadgeDrawable常用的属性/方法如下:

  • backgroundColor 设置背景色

  • badgeGravity 设置Badge的显示位置,有四种可先:TOP_STARTTOP_ENDBOTTOM_STARTBOTTOM_END,分别对应左上角,右上角,左下角和右下角。

  • badgeTextColor 设置文字颜色

  • maxCharacterCount 最多显示几位数字,比如该项设置了3,number设置为108,则显示99+

猜你喜欢

转载自blog.csdn.net/u010855711/article/details/129437505