在底部导航栏图标上方显示徽章

111

我已经在我的应用程序中实现了底部导航视图,并且我已经搜索了所有地方来显示像这样在图标上方显示徽章。 我想知道是否有可能实现。任何帮助都将不胜感激。 谢谢。


1
当然可以。您可以在底部导航视图的布局xml中自己创建徽章。创建一个帧布局,将菜单图标放置在徽章下方,并创建逻辑以显示/隐藏您的徽章视图。 - velval
1
你可以使用BadgeView;或在Github上搜索。 - zxbin
@velval,你有实现这个的代码示例或教程吗? - kalamar
1
https://dev59.com/ILXna4cB1Zd3GeqPFyVK#57073610 - Sumit Shukla
2
OP中的此链接是404。 - John
17个回答

3

@Abel的答案是最好的,除非您已经有一套复杂的主题,并且没有时间更改它们所有的。

但是,如果a)您时间紧迫并且正在使用Google Material库BottomNavigationView Bar或者b)您想添加自己的自定义视图徽章,则接受的答案将无法在com.google.android.material:material:1.1.0中工作。

您需要为不同的视图层次结构编写代码,而不是接受的答案。

  BottomNavigationItemView itemView = (BottomNavigationItemView) ((BottomNavigationMenuView) mBottomNavigation.getChildAt(0)).getChildAt(2);
  View badge = LayoutInflater.from(this).inflate(R.layout.navigation_dot, itemView, false);
  itemView.addView(badge);

如果你想更新主题并更新到com.google.android.material:material:1.1.0-alpha09,那么你只需要做的是mBottomNavigation.getOrCreateBadge(R.id.navigation_menu_item_one).setNumber(YOUR_NUMBER);。移除和数字功能仅存在于1.1.0-alpha09版本(及更高版本)。

2
您可以尝试这种方法:
在BottomNavigationView中放置一个TextView用于计数(BottomNavigationView是一个FrameLayout):
    <android.support.design.widget.BottomNavigationView android:id="@id/bottomMenu" style="@style/bottomMenu">
        <TextView android:id="@id/bottomMenuSelectionsNumber" style="@style/bottomMenuSelectionsNumber"/>
    </android.support.design.widget.BottomNavigationView>

并将它们样式化如下:
<style name="bottomMenu">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">@dimen/toolbarHeight</item>
    <item name="android:layout_gravity">center|bottom</item>
    <item name="android:background">@color/colorThird</item>
    <item name="itemBackground">@drawable/tabs_ripple</item>
    <item name="itemIconTint">@drawable/bottom_menu_item_color</item>
    <item name="itemTextColor">@drawable/bottom_menu_item_color</item>
    <item name="menu">@menu/bottom_menu</item>
</style>

<style name="bottomMenuSelectionsNumber">
    <item name="android:text">@string/bottomMenuSelectionsNumber</item>
    <item name="android:textSize">@dimen/appSecondFontSize</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:layout_width">@dimen/bottomMenuSelectionsNumberDim</item>
    <item name="android:layout_height">@dimen/bottomMenuSelectionsNumberDim</item>
    <item name="android:layout_gravity">right|bottom</item>
    <item name="android:layout_marginRight">@dimen/bottomMenuSelectionsNumberMarginR</item>
    <item name="android:layout_marginBottom">@dimen/bottomMenuSelectionsNumberMarginB</item>
    <item name="android:gravity">center</item>
    <item name="android:includeFontPadding">false</item>
    <item name="android:background">@drawable/bottom_menu_selections_number_bg</item>
</style>

"并且 bottom_menu_selections_number_bg:"
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="@color/colorAccent"/>
    <corners android:radius="@dimen/cornerRadius"/>
</shape>

2

请查看文档页面:https://material.io/develop/android/components/bottom-navigation-view/

简述: 他们没有更新正确的使用方法,所以文档中留下了一个小错误。要添加或删除标记,请按以下步骤操作:

// to remove
bottomNavigationView.removeBadge(R.id.action_settings)

// to add
bottomNavigationView.getOrCreateBadge(R.id.action_settings).apply {
    //if you want to change other attributes, like badge color, add a number, maximum number (a plus sign is added, e.g. 99+)
    number = 100
    maxCharactersCount = 3
    backgroundColor = ContextCompat.getColor(context, R.color.color_red)
}

1
如果您只想要没有数字的点,那么可以使用com.google.android.material.bottomnavigation.BottomNavigationView创建底部导航,然后在Java中使用。
BottomNavigationView mBtmView = (BottomNavigationView) findViewById(R.id.bottom_navigatin_view);
mBtmView.setOnNavigationItemSelectedListener(this);
mBtmView.getOrCreateBadge(R.id.chatFragment).setBackgroundColor(getResources().getColor(R.color.Red));

enter image description here


1

使用支持库BottomNavigationView很困难。一个简单的解决方案是使用外部组件。 一个易于处理的是:https://github.com/roughike/BottomBar 查看它的文档就像这样简单:

BottomBarTab nearby = bottomBar.getTabWithId(R.id.tab_nearby);
nearby.setBadgeCount(5);

// Remove the badge when you're done with it.
nearby.removeBadge/();

3
对于在2019年阅读此内容的任何人,这个库已经过时,而且已经2年没有进行维护了。 - brandonx
你说得对,现在我们有原生的BottomNavigationView,使用起来要容易得多。 - Fran

0
首先创建一个徽章的布局文件,然后按照以下步骤进行操作。
BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigation.getChildAt(0);
 
BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(2);

View messageBadgeView = LayoutInflater.from(this).inflate(R.layout.message_badge_view, menuView, false);    
TextView textView = messageBadgeView.findViewById(R.id.counter_badge);        
textView.setText("15");

itemView.addView(messageBadgeView);`

0

我对@ilbose的回答进行了一些更改,我这样做并测试了小屏幕和大屏幕

../drawable/badge_circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="@color/solid_red_base" />

以及../layout/notifcation_badge.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/badge_frame_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="11dp"
android:layout_gravity="center_horizontal">

<TextView
    android:id="@+id/badge_text_view"
    android:layout_width="12dp"
    android:layout_height="12dp"
    android:textSize="11sp"
    android:textColor="@android:color/white"
    android:background="@drawable/message_badge"
    android:layout_gravity="top"
    android:layout_centerHorizontal="true"
    android:padding="2dp"/> </RelativeLayout>

在Java代码中

 public static void showBadge(Context context, BottomNavigationView
        bottomNavigationView, @IdRes int itemId, String value) {
    BottomNavigationItemView itemView = bottomNavigationView.findViewById(itemId);
    View badge = LayoutInflater.from(context).inflate(R.layout.message_notification_badge, bottomNavigationView, false);

    TextView text = badge.findViewById(R.id.badge_text_view);
    text.setText(value);
    itemView.addView(badge);
}

 public static void removeBadge(BottomNavigationView bottomNavigationView, @IdRes int itemId) {
    BottomNavigationItemView itemView = bottomNavigationView.findViewById(itemId);
    if (itemView.getChildCount() == 4) {
        itemView.removeViewAt(4);
    }
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接