带有徽章的Android BottomNavigationView [关闭]答案

【问题标题】：Android BottomNavigationView with Badge [closed]带有徽章的Android BottomNavigationView [关闭]
【发布时间】：2019-02-25 14:18:27
【问题描述】：

Android 中不支持向 BottomNavigationView 添加徽章。

如何将带有数字的徽章添加到底部导航视图中的特定选项卡。我需要在没有第三方库的情况下本地完成。

我正在使用带有 MvvmCross 的 Xamarin 本机。

【问题讨论】：

哦，好吧。我遇到了问题，找到了答案，并认为让其他人知道会很好，尤其是在阅读“Stack Exchange 一直明确鼓励用户回答他们自己的问题”之后。不确定这个问题的“太宽泛”是什么，尤其是当这个问题以前被问过时，但我不需要使用第三方库。

标签： android xamarin mvvmcross bottomnavigationview

【解决方案1】：

---注意---

很快就会支持开箱即用的徽章。但是，如果您真的想向标签添加自定义视图，这可能会很有用。

使用 BottomNavigationView 创建布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/tabsRootFrameLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/tabsRootBottomNavigation" />
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/tabsRootBottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@android:color/white"
        local:menu="@menu/root_bottom_navigation_menu"
        local:itemIconTint="@color/bottom_navigation_selector"
        local:itemTextColor="@color/bottom_navigation_selector"
        local:elevation="16dp" />
</RelativeLayout>

菜单：root_bottom_navigation_menu.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/tab_search"
        android:enabled="true"
        android:icon="@drawable/search_icon"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/tab_profile"
        android:enabled="true"
        android:icon="@drawable/profile_icon"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/tab_my_car"
        android:enabled="true"
        android:icon="@drawable/car_icon"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/tab_notifications"
        android:enabled="true"
        android:icon="@drawable/bell_icon"
        app:showAsAction="ifRoom" />
</menu>

创建徽章布局：component_tabbar_badge.axml

<?xml version="1.0" encoding="UTF-8"?>
<FrameLayout
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/margin_tiny">
    <TextView
        android:id="@+id/notificationsBadgeTextView"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:layout_gravity="top|center_horizontal"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:background="@drawable/notification_red_dot"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="9dp" />
</FrameLayout>

红点背景：notification_red_dot.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="@color/red" />
    <size
        android:width="10dp"
        android:height="10dp" />
</shape>

将徽章布局添加到底部导航

private void SetNotificationBadge()
{
    _bottomNavigation = FindViewById<BottomNavigationView>(Resource.Id.tabsRootBottomNavigation);
    var notificationsTab = _bottomNavigation.FindViewById<BottomNavigationItemView>(Resource.Id.tab_notifications);
    View badge = LayoutInflater.From(this).Inflate(Resource.Layout.component_tabbar_badge, notificationsTab, false);
    _notificationBadgeTextView = badge.FindViewById<TextView>(Resource.Id.notificationsBadgeTextView);
    notificationsTab.AddView(badge);
}

绑定徽章文字

    var set = this.CreateBindingSet<TabsRootActivity, TabsRootViewModel>();
    set.Bind(_notificationBadgeTextView).To(vm => vm.UnreadNotificationsCount);
    set.Apply();

结果

【讨论】：

如果为0如何删除
_notificationBadgeView.Visibility = ViewStates.Gone

【解决方案2】：

使用支持库底部导航栏时，在菜单项上显示徽章/通知非常复杂。但是，有一些简单的解决方案可以完成它。如https://github.com/aurelhubert/ahbottomnavigation

这个库是底部导航栏的更高级版本。你可以简单地使用这个代码 sn-p 在菜单项上设置一个标记。

bottomNavigation.setNotification(notification, bottomNavigation.getItemsCount() - 1);

如果你不想使用第三方库，那么没问题

【讨论】：