如何在Fragment中为BottomNavigationView菜单图标添加角标？

我来帮你搞定这个问题！你已经有了底部导航的选中监听代码，现在要在Fragment里给菜单图标加角标，同时了解XML的实现方式，下面分两部分给你详细说明：

一、XML静态角标的实现方式 #

如果只需要固定显示角标（比如固定数字或小红点），可以通过两种方式实现：

1. 利用AndroidX的BadgeDrawable配置（推荐） #

直接在底部导航的菜单文件（比如menu/bottom_nav_menu.xml）里，给需要加角标的item配置相关属性即可：

<item
    android:id="@+id/navigation_unpaid"
    android:icon="@drawable/ic_unpaid"
    android:title="@string/unpaid"
    app:badgeText="5" <!-- 角标显示的文字内容 -->
    app:badgeBackgroundColor="@color/red" <!-- 角标背景色 -->
    app:badgeTextColor="@color/white" <!-- 角标文字颜色 -->
    app:badgeMaxCharacterCount="2" <!-- 最大显示字符数，超过会显示"9+" -->
    app:badgeVisible="true" /> <!-- 控制角标是否可见 -->

这种方式无需自定义布局，依托AndroidX原生的BadgeDrawable实现，兼容性和易用性都很好。

2. 自定义菜单Item布局（个性化需求） #

如果需要更灵活的角标样式（比如自定义形状、位置），可以自定义item布局：

1. 创建自定义布局文件layout/bottom_nav_item_layout.xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="4dp">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_centerHorizontal="true"/>

    <TextView
        android:id="@+id/badge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/icon"
        android:layout_alignEnd="@id/icon"
        android:background="@drawable/badge_round_bg" <!-- 自定义角标背景 -->
        android:text="3"
        android:textColor="@color/white"
        android:textSize="12sp"
        android:paddingHorizontal="4dp"
        android:visibility="visible"/>

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/icon"
        android:layout_centerHorizontal="true"
        android:textSize="12sp"/>
</RelativeLayout>

2. 在菜单文件里指定这个自定义布局：

<item
    android:id="@+id/navigation_paid"
    android:title="@string/paid"
    app:actionLayout="@layout/bottom_nav_item_layout"/>

之后可以在代码里通过MenuItem.getActionView()获取布局内的控件，动态修改角标内容。

二、Fragment中动态控制角标的代码实现 #

如果需要根据业务数据动态更新角标（比如数字变化、显示/隐藏），可以按以下步骤操作：

1. 获取BottomNavigationView并初始化角标 #

在Fragment的onViewCreated方法中，获取底部导航控件（如果导航栏在Activity布局里，就用requireActivity()获取；如果在Fragment自己的布局里，直接用view.findViewById）：

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    
    // 获取Activity中的BottomNavigationView
    BottomNavigationView bottomNav = requireActivity().findViewById(R.id.bottom_navigation);
    
    // 给未支付菜单设置数字角标
    setNumberBadge(bottomNav, R.id.navigation_unpaid, 8);
    // 给已拒绝菜单设置小红点角标（无数字）
    setDotBadge(bottomNav, R.id.navigation_declined);
}

2. 封装角标工具方法 #

添加两个工具方法，分别处理带数字的角标和小红点角标：

// 设置带数字的角标
private void setNumberBadge(BottomNavigationView bottomNav, int itemId, int count) {
    BadgeDrawable badge = bottomNav.getOrCreateBadge(itemId);
    badge.setVisible(true);
    badge.setNumber(count);
    badge.setBackgroundColor(getResources().getColor(R.color.red));
    badge.setTextColor(getResources().getColor(R.color.white));
    // 设置最大显示字符数，超过会显示"9+"
    badge.setMaxCharacterCount(2);
}

// 设置小红点角标（无数字）
private void setDotBadge(BottomNavigationView bottomNav, int itemId) {
    BadgeDrawable badge = bottomNav.getOrCreateBadge(itemId);
    badge.setVisible(true);
    badge.setNumber(0); // 设置为0会只显示小红点，不显示数字
    badge.setBackgroundColor(getResources().getColor(R.color.red));
    badge.setBadgeGravity(BadgeDrawable.TOP_END); // 控制角标位置
}

3. 结合你的选中监听代码 #

如果需要在切换页面时更新角标状态（比如进入未支付页面后隐藏角标），可以在你的监听逻辑里添加对应处理：

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener = new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        Fragment fragment;
        BottomNavigationView bottomNav = requireActivity().findViewById(R.id.bottom_navigation);
        switch (item.getItemId()) {
            case R.id.navigation_lang:
                toolbar.setTitle("Language");
                fragment = new LangFragment();
                loadFragment(fragment);
                return true;
            case R.id.navigation_paid:
                toolbar.setTitle("Paid");
                fragment = new PaidFragment();
                loadFragment(fragment);
                return true;
            case R.id.navigation_unpaid:
                toolbar.setTitle("UnPaid");
                fragment = new UnpaidFragment();
                loadFragment(fragment);
                // 进入未支付页面后隐藏该菜单的角标
                bottomNav.removeBadge(R.id.navigation_unpaid);
                return true;
            case R.id.navigation_declined:
                toolbar.setTitle("Declined");
                fragment = new DeclinedFragment();
                loadFragment(fragment);
                return true;
        }
        return false;
    }
};

内容的提问来源于stack exchange，提问作者Developer