BadgeDrawable未讀消息數 BadgeDrawable 常用屬性 demo

BadgeDrawable

測試代碼

        TabLayoutMediator(tabBottom,vp2,object:TabLayoutMediator.TabConfigurationStrategy{
            override fun onConfigureTab(tab: TabLayout.Tab, position: Int) {
                tab.setText(tabTitles[position])
                tab.orCreateBadge.apply {
                    maxCharacterCount=3
                    number=if(position==0) 5 else 199
                    this.badgeGravity=BadgeDrawable.TOP_END
                }
            }
        }).attach()

系統代碼裏是和TabLayout關聯的

tab.badge//返回badegDrawable或空
tab.orCreateBadge//沒有的話new一個新的，有的話更新下狀態

常用屬性

1. setBadgeGravity
   上下左右4個方向

 public void setBadgeGravity(@BadgeGravity int gravity)

  @IntDef({
    TOP_END,
    TOP_START,
    BOTTOM_END,
    BOTTOM_START,
  })

2. setNumber
   最小是0，比0小的也當0處理

  public void setNumber(int number) {
    number = Math.max(0, number);

3. setMaxCharacterCount
   最大支持的字符數，算上加號的
   比如上邊我們比99大的一般都寫成99+這樣的。這裏的count就是3

public void setMaxCharacterCount(int maxCharacterCount)

4.其他看名字就知道啥了

public void setBackgroundColor(@ColorInt int backgroundColor) 

 public void setBadgeTextColor(@ColorInt int badgeTextColor)

  /**
   * Sets how much (in pixels) to horizontally move this badge towards the center of its anchor.
   *
   * @param px badge's horizontal offset
   */
  public void setHorizontalOffset(int px)

  /**
   * Sets how much (in pixels) to vertically move this badge towards the center of its anchor.
   *
   * @param px badge's vertical offset
   */
  public void setVerticalOffset(int px)


  /** Resets any badge number so that a numberless badge will be displayed. */
  public void clearNumber()

public void setVisible(boolean visible)

BadgeDrawable是可以給任意控件用的，最簡單的就是調用系統BadgeUtils的方法，可是這個類是private的了

 BadgeUtils.attachBadgeDrawable(dra,anchor,null)

我們可以把這個工具類copy出來用，也可以把這個方法裏的實現代碼copy出來用
這些方法都必須在anchor創建以後才能用，也就是不能在oncreate裏調用這些方法，或者你要view.post調用,保證anchor已經繪製好了

如下

        val badgeDrawable=BadgeDrawable.create(requireContext()).apply {
            number=99
//            horizontalOffset=50
//            verticalOffset=50
            badgeGravity=BadgeDrawable.BOTTOM_END
        }

            val anchor=textview
            val badgeBounds = Rect()
            anchor.getDrawingRect(badgeBounds)
            badgeDrawable.setBounds(badgeBounds)
            badgeDrawable.updateBadgeCoordinates(anchor, null)
            anchor.getOverlay().add(badgeDrawable);

badge默認是在anchor的4個頂點位置，所以你就只能看到一個紅點，也就是badge很小的一般分角
要解決這個有兩種辦法
①badgeDrawable 設置offset，正直就會往anchor中心偏移，這樣就看到了
②父容器或者加上父容器的父容器，設置如下屬性，保證父容器不要裁剪這些超出anchor範圍的內容

 android:clipChildren="false"
        android:clipToPadding="false"

6.實例化方法

public static BadgeDrawable create(@NonNull Context context)

public static BadgeDrawable createFromResource(@NonNull Context context, @XmlRes int id)

demo

如下

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    android:clipToPadding="false"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/btn_test"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#33000000"
        android:gravity="center"
        android:text="hello"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

look

        val badgeDrawable=BadgeDrawable.create(requireContext()).apply {
            number=99
//            horizontalOffset=50
//            verticalOffset=50
            badgeGravity=BadgeDrawable.BOTTOM_END
        }
        btn_test.post {
            val anchor=btn_test
            val badgeBounds = Rect()
            anchor.getDrawingRect(badgeBounds)
            badgeDrawable.setBounds(badgeBounds)
            badgeDrawable.updateBadgeCoordinates(anchor, null)
            anchor.getOverlay().add(badgeDrawable);

        }