Skip to content

Badge

徽章角标

设计与 API 文档

使用徽章

Badge带数字的Badge带最大字符数的Badge
badge_iconbadge_with_number_99badge_with_999+

⭐ 注意

此组件仍在开发中,可能不支持 Material Android 组件通常支持的全部自定义范围,例如主题属性。

BadgeDrawable 代表动态信息,例如在 BottomNavigationViewTabLayout中的待处理请求数量。

用法

API 和源代码:

通过调用 create(Context)createFromAttributes(Context, AttributeSet, int, int) 创建 BadgeDrawable 的实例。

在 API 级别上,添加和显示 BadgeDrawable 的方法取决于 API 级别:

在 API 18 及以上(支持 ViewOverlay 的 API)

  1. BadgeDrawable 添加为所需锚视图的 ViewOverlay

  2. 使用 #updateBadgeCoordinates(View) 根据锚视图更新 BadgeDrawable 的坐标(中心和边界)。

这两个步骤已封装在一个工具方法中:

java
BadgeUtils.attachBadgeDrawable(badgeDrawable, anchor);

在 API 18 以下

  1. BadgeDrawable 设置为锚视图的 FrameLayout 祖先的前景。
  2. 根据锚视图的坐标相对其 FrameLayout 祖先的坐标空间,更新 BadgeDrawable 的坐标(中心和边界)。

选项 1: BadgeDrawable 将动态创建并包装锚视图在一个 FrameLayout 中,然后将 FrameLayout 插入到视图层次结构中的原始锚视图位置。 语法与 API 18 及以上相同。

java
BadgeUtils.attachBadgeDrawable(badgeDrawable, anchor);

选项 2:如果您不希望 BadgeDrawable 修改视图层次结构,可以指定一个 FrameLayout 来显示徽章。

java
BadgeUtils.attachBadgeDrawable(badgeDrawable, anchor, anchorFrameLayoutParent);

Gravity 模式

BadgeDrawable 提供两种 Gravity 模式来控制徽章与锚视图的对齐方式。 默认情况下(TOP_END),徽章与锚的顶部和末尾边缘对齐(带有一些偏移)。 另外,您可以使用 TOP_START 将徽章与锚的顶部和起始边缘对齐。 请注意,BOTTOM_STARTBOTTOM_END 已被弃用,不建议使用。

位置和偏移

默认情况下,BadgeDrawable 与其锚视图的顶部和末尾边缘对齐(如果 offsetAlignmentModelegacy,则带有一些偏移)。 调用 setBadgeGravity(int) 可以将其更改为其他支持的模式。 要根据锚的中心调整徽章的偏移量,请使用 setHorizontalOffset(int)setVerticalOffset(int)

无论偏移量如何,徽章会自动移动到其第一个不会裁剪其子视图的祖先视图的边界内,以确保在有足够空间时徽章不会被裁剪。

属性

特性相关属性
颜色app:backgroundColor
app:badgeTextColor
宽度app:badgeWidth
app:badgeWithTextWidth
高度app:badgeHeight
app:badgeWithTextHeight
形状app:badgeShapeAppearance
app:badgeShapeAppearanceOverlay
app:badgeWithTextShapeAppearance
app:badgeWithTextShapeAppearanceOverlay
标签app:badgeText (用于文本)
app:number (用于数字)
标签长度app:maxCharacterCount (用于所有文本)
app:maxNumber (仅用于数字)
标签文本颜色app:badgeTextColor
标签文本外观app:badgeTextAppearance
徽章重力app:badgeGravity
偏移对齐app:offsetAlignmentMode
水平内边距app:badgeWidePadding
垂直内边距app:badgeVerticalPadding
大字体垂直偏移app:largeFontVerticalOffsetAdjustment
徽章固定边缘app:badgeFixedEdge

⭐ 注意

如果同时指定了 app:badgeTextapp:number,徽章标签将为 app:badgeText

Talkback 支持

BadgeDrawable 提供了一个获取其内容描述的方法,该描述基于显示的数字或文本(如果有)。 为了指定内容描述,开发者可以使用以下方法:

  • setContentDescriptionForText(CharSequence)
  • setContentDescriptionQuantityStringsResource(@PluralsRes int)
  • setContentDescriptionExceedsMaxBadgeNumberStringResource(@StringRes int)
  • setContentDescriptionNumberless(CharSequence)