BottomNavigationView 上的徽章 [英] Badge on BottomNavigationView

问题描述

我试图在不使用任何库的情况下向 BottomNavigationView 项目添加徽章，但不知何故 BottomNavigationView 没有显示徽章 (custom_view)

main_view.xml:

 <框架布局android:id="@+id/容器"android:layout_width="match_parent"android:layout_height="match_parent"/><android.support.design.widget.BottomNavigationViewandroid:id="@+id/bottom_navigation"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"app:itemBackground="@color/colorPrimary"app:itemIconTint="@color/colorAccent"app:itemTextColor="@color/colorPrimaryDark"app:menu="@menu/bottom_navigation_main"/></RelativeLayout>

bottom_navigation_menu.xml:

 <menu xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"><项目android:id="@+id/item_test"android:icon="@mipmap/ic_launcher"机器人:标题=动作1"app:showAsAction="always"/><项目机器人:启用=真"android:icon="@mipmap/ic_launcher"机器人:标题=动作2"app:showAsAction="ifRoom"/><项目机器人:启用=真"android:icon="@mipmap/ic_launcher"机器人:标题=动作3"app:showAsAction="ifRoom"/></菜单>

Activity 扩展自 AppCompatActivity:

@Override公共布尔 onCreateOptionsMenu(菜单菜单){menu = bottomNavigationView.getMenu();menu.clear();getMenuInflater().inflate(R.menu.bottom_navigation_main, menu);MenuItem item = menu.findItem(R.id.item_test);item = MenuItemCompat.setActionView(item, R.layout.custom_view);相对布局徽章包装器 = (相对布局) MenuItemCompat.getActionView(item);TextView textView = (TextView) 徽章Wrapper.findViewById(R.id.txtCount);textView.setText("99+");返回 super.onCreateOptionsMenu(menu);}

custom_view.xml:

<图像视图android:layout_width="wrap_content"android:layout_height="wrap_content"android:contentDescription="通知图标"机器人:重力=中心"android:src="@mipmap/ic_launcher"/><TextView xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/txtCount"机器人:重力=正确"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/ic_badge"机器人:文本=55"android:textColor="#ffffffff"android:textSize="12sp"/></RelativeLayout>

不是显示 (badge) custom_view 而是只显示项目本身:

下面从调试模式可以看出，访问的view是正确的，并且设置正确.但是不知何故 BottomNavigationView 并没有失效:

解决方案

您可以使用

要更改徽章重力，请使用 setBadgeGravity 方法.

badge.setBadgeGravity(BadgeDrawable.BOTTOM_END);

I am trying to add a badge to the BottomNavigationView Item without using any library, however somehow the BottomNavigationView is not showing the badge (custom_view)

main_view.xml:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context="com.hrskrs.test.MainActivity">

  <FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

  <android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@color/colorAccent"
    app:itemTextColor="@color/colorPrimaryDark"
    app:menu="@menu/bottom_navigation_main" />
</RelativeLayout>

bottom_navigation_menu.xml:

    <menu xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto">
  <item
    android:id="@+id/item_test"
    android:icon="@mipmap/ic_launcher"
    android:title="action1"
    app:showAsAction="always" />

  <item
    android:enabled="true"
    android:icon="@mipmap/ic_launcher"
    android:title="action2"
    app:showAsAction="ifRoom" />

  <item
    android:enabled="true"
    android:icon="@mipmap/ic_launcher"
    android:title="action3"
    app:showAsAction="ifRoom" />
</menu>

Activity extended from AppCompatActivity:

@Override
  public boolean onCreateOptionsMenu(Menu menu) {
    menu = bottomNavigationView.getMenu();
    menu.clear();
    getMenuInflater().inflate(R.menu.bottom_navigation_main, menu);
    MenuItem item = menu.findItem(R.id.item_test);
    item = MenuItemCompat.setActionView(item, R.layout.custom_view);
    RelativeLayout badgeWrapper = (RelativeLayout) MenuItemCompat.getActionView(item);

    TextView textView = (TextView) badgeWrapper.findViewById(R.id.txtCount);
    textView.setText("99+");

    return super.onCreateOptionsMenu(menu);
  }

custom_view.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  style="@android:style/Widget.ActionButton"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@android:color/transparent"
  android:clickable="true"
  android:gravity="center"
  android:orientation="vertical">

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="Notification Icon"
    android:gravity="center"
    android:src="@mipmap/ic_launcher" />

  <TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/txtCount"
    android:gravity="right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/ic_badge"
    android:text="55"
    android:textColor="#ffffffff"
    android:textSize="12sp" />
</RelativeLayout>

Istead of showing (badge) custom_view it shows the item itself only:

Below you can see from the debug mode that the view accessed is the right one and it is being set correctly. However somehow the BottomNavigationViewis not being invalidated:

解决方案

You can use the BottomNavigationView provided by the Material Components Library.

Just add the BottomNavigationView to your layout:

  <com.google.android.material.bottomnavigation.BottomNavigationView
      android:layout_gravity="bottom"
      app:menu="@menu/navigation_main" 
      ../>

Then use in your code:

  int menuItemId = bottomNavigationView.getMenu().getItem(0).getItemId();
  BadgeDrawable badge = bottomNavigationView.getOrCreateBadge(menuItemId);
  badge.setNumber(2);

To change the badge gravity use the setBadgeGravity method.

badge.setBadgeGravity(BadgeDrawable.BOTTOM_END);

这篇关于BottomNavigationView 上的徽章的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！