Skip to content

徽章 (Badges)

源:Badges

徽章在导航项和图标上显示通知、计数或状态信息。

徽章变体

变体对比

  1. Small badge (小徽章): 仅显示一个点,表示有新动态。
  2. Large badge (大徽章): 包含数字或简短文本(如 "99+")。

代码实现

推荐使用 BadgeDrawable 配合 BadgeUtils 或直接在导航组件中使用。

1. 在 BottomNavigationView 中使用

kotlin
val badge = bottomNavigation.getOrCreateBadge(R.id.nav_messages)
badge.isVisible = true
badge.number = 8
kotlin
val badge = bottomNavigation.getOrCreateBadge(R.id.nav_settings)
badge.isVisible = true
// 不设置 number 即为小点

2. 绑定到任意 View

kotlin
val badgeDrawable = BadgeDrawable.create(context)
badgeDrawable.number = 5

// 关键:将徽章附着到某个 View
BadgeUtils.attachBadgeDrawable(badgeDrawable, myIconView)

核心属性

属性描述默认值
app:backgroundColor背景颜色?attr/colorError
app:badgeTextColor文本颜色?attr/colorOnError
app:maxCharacterCount最大字符数4
app:badgeGravity位置 (TOP_END 等)TOP_END

辅助功能 (TalkBack)

徽章会自动合并到其锚定视图的描述中。例如,如果图标描述是“消息”,徽章数字是“5”,TalkBack 会朗读为“消息,5 条新通知”。