徽章绘图未显示

Question

为什么BadgeDrawable没有显示在任何地方？ 我正在尝试添加MaterialCardView 、 MaterialButton等。它没有显示。 任何人都知道如何解决这个问题？ 或者有相同的库来替换它？

这是代码：

val badgeDrawable = BadgeDrawable.create(holder.itemView.context)
badgeDrawable.number = 10
badgeDrawable.badgeGravity = BadgeDrawable.TOP_END
badgeDrawable.backgroundColor = holder.itemView.context.getColor(R.color.colorAccent)
holder.itemView.home_cardview.overlay.add(badgeDrawable)
badgeDrawable.updateBadgeCoordinates(holder.itemView.home_cardview, null)

这种方法也不起作用：

BadgeUtils.attachBadgeDrawable(badgeDrawable, anchor, null);

顺便说一下，在新版本中 compatBadgeParent 是必填字段

Answer 1

您可以使用以下布局将BadgeDrawable应用于MaterialCardView或MaterialButton ：

<FrameLayout
    android:id="@+id/layout"
    android:clipChildren="false"
    android:clipToPadding="false"
    ..>

        <com.google.android.material.card.MaterialCardView
            android:id="@+id/card"
            .../>

</FrameLayout>

然后只需使用方法BadgeUtils.attachBadgeDrawable 。

例如使用CardView ：

    MaterialCardView cardview = findViewById(R.id.card);
    cardview.setClipToOutline(false);  //Important with a CardView

    cardview.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            BadgeDrawable badgeDrawable = BadgeDrawable.create(MainActivity.this);
            badgeDrawable.setNumber(15);
            BadgeUtils.attachBadgeDrawable(badgeDrawable, cardview, findViewById(R.id.layout));

            cardview.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        }
    });

对于Button ：

<FrameLayout
    android:id="@+id/layout"
    android:clipChildren="false"
    android:clipToPadding="false">

  <com.google.android.material.button.MaterialButton
      android:id="@+id/button"
      ../>

</FrameLayout>

然后是类似的代码：

    button.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            BadgeDrawable badgeDrawable = BadgeDrawable.create(MainActivity.this);
            badgeDrawable.setNumber(7);
            badgeDrawable.setBackgroundColor(......);
            badgeDrawable.setVerticalOffset(20);
            badgeDrawable.setHorizontalOffset(15);

            BadgeUtils.attachBadgeDrawable(badgeDrawable, button, findViewById(R.id.layout));

            button.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        }
    });

Answer 2

这是@0X0nosugar在我的问题上发布的解决方案，所以请 go 查看他的答案并给他竖起大拇指。 链接放在上面，谢谢！

BottomNavigationView.getOrCreateBadge()不仅将BadgeDrawable指定为前景 Drawable，而且还设置了可绘制边界。 如果没有这一步，它们将停留在 (0,0,0,0)，因此没有什么可绘制的。

为了设置边界，让我们为 BadgeDrawable 引入扩展BadgeDrawable

/**
 * Inspired by BadgeUtils in com.google.android.material library
 *
 * Sets the bounds of a BadgeDrawable 
 */
private fun BadgeDrawable.setBoundsFor(@NonNull anchor: View, @NonNull parent: FrameLayout){
    val rect = Rect()
    parent.getDrawingRect(rect)
    this.setBounds(rect)
    this.updateBadgeCoordinates(anchor, parent)
}

将此 function 与您的 BadgeDrawable 一起用于 FrameLayout：

private fun setFindShiftBadge(state: HomeState) {
    val findShiftsBadge = BadgeDrawable.create(this)
    // configure the badge drawable
    findShiftsBadge.badgeGravity = BadgeDrawable.TOP_END
    findShiftsBadge.backgroundColor = resources.getColor(R.color.colorWhite)
    findShiftsBadge.badgeTextColor = resources.getColor(R.color.colorPrimary)
    findShiftsBadge.number = state.availableShifts.size
    // set bounds inside which it will be drawn
    findShiftsBadge.setBoundsFor(btn_badge, home_framelayout)
    // assign as foreground drawable
    home_framelayout.foreground = findShiftsBadge
}

Answer 3

您可以在Kotlin方式中使用以下不带FrameLayout的 function ：

view是您要放置通知徽章的组件！

@SuppressLint("UnsafeExperimentalUsageError")
    private fun initBadge(view : View, nbrNotification : Int) {

        if(nbrNotification == 0) return // Don't show the badge

        view.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {

            override fun onGlobalLayout() {

                BadgeDrawable.create(requireContext()).apply {
                    number = nbrNotification
                    verticalOffset = 70
                    horizontalOffset = 70
                    //badgeDrawable.setBackgroundColor() #to change the background color
                    BadgeUtils.attachBadgeDrawable(this, view)
                }

                view.viewTreeObserver.removeOnGlobalLayoutListener(this)
            }
        })
    }

Answer 4

验证您使用的版本，我正在使用：

com.google.android.材料：材料：1.1.0-beta01

试试这个：

bottomNavigationView.getOrCreateBadge(R.id.menu_item_notifications).apply {
            backgroundColor = resources.getColor(R.color.red)
            badgeTextColor = resources.getColor(R.color.white)
            maxCharacterCount = 3
            number = 10 //should be change
            isVisible = true
        }

Answer 5

我遇到了同样的问题。 这可能是徽章库中的错误。 这是工作：

        badgeDrawable = BadgeDrawable.create(frameLayoutContainer.getContext());
        frameLayoutContainer.setForeground(badgeDrawable);
        frameLayoutContainer.addOnLayoutChangeListener((v, left, top, right, bottom, oldLeft, oldTop, oldRight, oldBottom) -> {
            //
            badgeDrawable.updateBadgeCoordinates(frameLayoutContainer, frameLayoutContainer);
        });

frameLayoutContainer 是一个 FrameLayout，它将 BadgeDrawable 设置为其前景。

Answer 6

    BadgeDrawable badgeDrawable = BadgeDrawable.create(this);
    badgeDrawable.setNumber(15);

    FrameLayout frameLayout = findViewById(R.id.framelayout);

    ImageView imageView = findViewById(R.id.iv_center);

    //core code
    frameLayout.setForeground(badgeDrawable);
    frameLayout.addOnLayoutChangeListener((v, left, top, right, bottom, oldLeft, oldTop, oldRight, oldBottom) -> {


        //either of the following two lines of code  work
        //badgeDrawable.updateBadgeCoordinates(imageView, frameLayout);
        BadgeUtils.attachBadgeDrawable(badgeDrawable, imageView, frameLayout);
    });





    <FrameLayout
        android:id="@+id/framelayout"
        android:layout_width="150dp"
        android:layout_height="150dp">

        <ImageView
            android:layout_gravity="center"
            android:id="@+id/iv_center"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:scaleType="fitXY"
            android:src="@drawable/ic_beard" />
    </FrameLayout>

Answer 7

在这里，我使用带有BadgeUtils样式的 BadgeUtils 实现了BadgeDrawable ，以在 Button 上添加徽章。

private fun setBadgeCount(count: Int) {
        BadgeDrawable.createFromResource(this, R.xml.badge_style).apply {
            number = count
            BadgeUtils.attachBadgeDrawable(this, binding.buttonContact)
        }
    }

徽章样式.xml：

<badge xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/Widget.MaterialComponents.Badge"
    app:backgroundColor="#FF0000"
    app:badgeTextColor="#FFFFFF"
    app:horizontalOffset="6dp"
    app:maxCharacterCount="2"
    app:verticalOffset="8dp" />

Output：

参考：

1. https://material.io/develop/android/supporting/badge
2. https://developer.android.com/reference/com/google/android/material/badge/package-summary