底部导航视图上的徽章

13

我正在尝试在不使用任何库的情况下向BottomNavigationView项添加徽章,但是不知何故BottomNavigationView没有显示徽章(自定义视图)

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>

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>

代替显示 (badge) custom_view,它仅显示该项本身:

enter image description here

以下是来自调试模式的信息,可以看到访问的view是正确的,并且被正确地设置了。但是不知何故BottomNavigationView未被使无效:

enter image description here


1
你有找到任何解决方法吗? - Moulesh
我在这里回答了这个问题 https://dev59.com/T1gQ5IYBdhLWcg3wfUBR#46595155。希望这可以帮到你。 - Arash
这个问题已经在这里得到了回答。 - Abel
https://dev59.com/ILXna4cB1Zd3GeqPFyVK#57073610 - Sumit Shukla
4个回答

13
你可以使用Material Components Library提供的BottomNavigationView
只需将BottomNavigationView添加到你的布局中:
  <com.google.android.material.bottomnavigation.BottomNavigationView
      android:layout_gravity="bottom"
      app:menu="@menu/navigation_main" 
      ../>

然后在你的代码中使用:

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

enter image description here

要更改徽章的位置,请使用setBadgeGravity方法。

badge.setBadgeGravity(BadgeDrawable.BOTTOM_END);

enter image description here


7

我成功地制作了带徽章的 BottomNavigationView。以下是我的 Kotlin 代码。

这是面板(从 BottomNavigationView 继承)。

/** Bottom menu with badge */
class AdvancedBottomNavigationView(context: Context, attrs: AttributeSet) : BottomNavigationView(context, attrs) {

    private companion object {
        const val BADGE_MIN_WIDTH = 16          // [dp]
        const val BADGE_MARGIN_TOP = 5          // [dp]
        const val BADGE_MARGIN_LEFT = 15        // [dp]
    }

    @Inject internal lateinit var uiCalculator: UICalculatorInterface

    private val bottomMenuView: BottomNavigationMenuView

    init {
        //  Get access to internal menu
        val field = BottomNavigationView::class.java.getDeclaredField("mMenuView")
        field.isAccessible = true
        bottomMenuView = field.get(this) as BottomNavigationMenuView

        App.injections.presentationLayerComponent!!.inject(this)

        @SuppressLint("CustomViewStyleable")
        val a = context.obtainStyledAttributes(attrs, R.styleable.advanced_bottom_navigation_bar)
        val badgeLayoutId  = a.getResourceId(R.styleable.advanced_bottom_navigation_bar_badge_layout, -1)
        a.recycle()

        initBadges(badgeLayoutId)
    }

    /**
     * [position] index of menu item */
    fun setBadgeValue(position: Int, count: Int) {
        val menuView = bottomMenuView
        val menuItem = menuView.getChildAt(position) as BottomNavigationItemView

        val badge = menuItem.findViewById(R.id.bottom_bar_badge)
        val badgeText = menuItem.findViewById(R.id.bottom_bar_badge_text) as TextView

        if (count > 0) {
            badgeText.text = count.toString()
            badge.visibility = View.VISIBLE
        } else {
            badge.visibility = View.GONE
        }
    }

    /**
     * Select menu item
     * [position] index of menu item to select
     */
    fun setSelected(position: Int) = bottomMenuView.getChildAt(position).performClick()

    private fun initBadges(badgeLayoutId: Int) {
        // Adding badges to each Item
        val menuView = bottomMenuView
        val totalItems = menuView.childCount

        val oneItemAreaWidth = uiCalculator.getScreenSize(context).first / totalItems

        val marginTop = uiCalculator.dpToPixels(context, BADGE_MARGIN_TOP)
        val marginLeft = uiCalculator.dpToPixels(context, BADGE_MARGIN_LEFT)

        for (i in 0 until totalItems) {
            val menuItem = menuView.getChildAt(i) as BottomNavigationItemView

            // Add badge to every item
            val badge = View.inflate(context, badgeLayoutId, null) as FrameLayout
            badge.visibility = View.GONE
            badge.minimumWidth = uiCalculator.dpToPixels(context, BADGE_MIN_WIDTH)

            val layoutParam = FrameLayout.LayoutParams(
                FrameLayout.LayoutParams.WRAP_CONTENT,
                FrameLayout.LayoutParams.WRAP_CONTENT)
            layoutParam.gravity = Gravity.START

            layoutParam.setMargins(oneItemAreaWidth / 2 + marginLeft, marginTop, 0, 0)
            menuItem.addView(badge, layoutParam)
        }
    }
 }

这是一个带有选项的attr.xml文件,用于此组件:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="advanced_bottom_navigation_bar">
        <attr name="badge_layout" format="reference|integer" />
    </declare-styleable>
</resources>

从drawable文件夹中获取徽章的背景:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#ff0000" />
            <corners android:radius="10dp" />
        </shape>
    </item>
</selector>

徽章本身:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    android:id="@+id/bottom_bar_badge"
    android:layout_height="20dp"
    android:layout_width="20dp"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/bcg_badge"
    >
<TextView
    android:id="@+id/bottom_bar_badge_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="1"
    android:textSize="10sp"
    android:textColor="@android:color/white"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:textAlignment="center"
    android:layout_gravity="center"/>
</FrameLayout>

这是一个关于如何在你的代码中使用它的例子:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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"
    tools:context="su.ivcs.ucim.presentationLayer.userStories.mainScreen.view.MainActivity">

    <su.ivcs.ucim.presentationLayer.common.advancedBottomNavigationView.AdvancedBottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@android:color/white"
        app:itemIconTint="@color/main_screen_tabs_menu_items"
        app:itemTextColor="@color/main_screen_tabs_menu_items"
        app:menu="@menu/main_screen_tabs_menu"
        app:badge_layout = "@layout/common_badge"

        app:layout_constraintTop_toBottomOf="@+id/fragmentsContainer"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

</android.support.constraint.ConstraintLayout>

我希望这篇文章对您有所帮助。


UICalculatorInterface 是什么? - Muneerah Rashed
@MuneerahRashed 这是我用于 UI 尺寸计算等方面的辅助工具。对于这个解决方案来说,它并不是必要的。 - Alex Shevelev

1
@hrskrs 尝试在您的txtCount或badgeWrapper本身上添加更高的海拔高度。 BottomNavigationView似乎比屏幕上的其他视图具有更高的海拔高度。
我在显示BottomNavigationView项目徽章方面遇到了困难。我的徽章(没有任何文本值)本身是可绘制的,当用户单击其他项目或变为与色调相同的颜色(如果未定义,则为colorPrimary)时,它会变成灰色。 我认为您将遇到我面临的相同问题,即BottomNavigationView菜单项顶部的徽章/计数器的染色问题,因为色调颜色将应用于项目本身,而您的badgeWrapper是MenuItem的一部分,将采用色调(当您点击任何其他项目时会变灰,这可能不是您想要的)。
在这里查看我的答案:是否有方法在API 25中引入的Google官方BottomNavigationView菜单项上显示通知徽章? 我使用了一个ImageView作为徽章,但您可以将badgeWrapper RelativeView替换为ImageView。

我并不是在寻求替代方案,因为有多种方法可以实现。我是在询问如何通过“菜单资源”向“BottomNavigationView”添加徽章。 - hrskrs
我在处理菜单资源时遇到了困难,但是它对我没有起作用。使用菜单资源是正确的方法。如果您能够使用菜单资源使其正常工作,我会很高兴看到的。 - Waqas

0

像这样使用BadgeDrawable

Integer amount = tabBadgeCountMap.get(tab);
            BadgeDrawable badgeDrawable = bottomNavigationView.getOrCreateBadge(tabMenuResId);
            badgeDrawable.setNumber(amount != null ? amount : 0);

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