某一天，开发部的小白又接到了新需求：要在按钮的右上角显示徽标红点，告知用户有待处理的消息或新内容。小白翻遍了设计器，也没有找到徽标控件，再次抱起了前端大佬的大腿。

大佬表示，这都不是事，给小白发来了使用徽标功能的秘诀。

1“徽标”知多少

徽标是一种辅助功能，可以搭配不同的控件，展示为红点、数字或者文字，用于告知用户，该区域的状态变化或者待处理任务的数量。如下图被圈出来的数字：

“徽标”形式一

“徽标”形式二

徽标具有多种效果，每种效果的应用场景也均不相同。如何实现自己想要的徽标效果呢？请听小编继续为您分解。

2 徽标实现方法

2.1 红点型徽标

当用户只需知道大致有内容更新时，应该使用红点型，如：有新的待办消息要提醒用户阅读时。

想要实现上述效果，插件代码应该这样写：

public class Test2Plugin extends AbstractFormPlugin {
  @Override
  public void afterCreateNewData(EventObject e) {
    Button button = this.getView().getControl("kdtest_buttonap");
    button.setBadgeInfo(getBadgeInfo());
  }
  private BadgeInfo getBadgeInfo() {
    BadgeInfo badgeInfo = new BadgeInfo();
    badgeInfo.setDot(true);
    badgeInfo.setCount(1);
    return badgeInfo;
  }
}

2.2 数字型徽标

当用户有必要知晓有多少条内容更新时，应该使用数字型。如：社交中，一对一的消息通知。而数字也有多种效果，如下图：

1. 实现最简单的数字效果，插件代码如下：

public class Test2Plugin extends AbstractFormPlugin {
  @Override
  public void afterCreateNewData(EventObject e) {
    Button button = this.getView().getControl("kdtest_buttonap");
    button.setBadgeInfo(getBadgeInfo());
 }
  private BadgeInfo getBadgeInfo() {
    BadgeInfo badgeInfo = new BadgeInfo();
    badgeInfo.setCount(99);
    return badgeInfo;
  }
}

2. 设置数字上限，超出上限显示“xx+”的效果，插件代码如下：

public class Test2Plugin extends AbstractFormPlugin {
  @Override
  public void afterCreateNewData(EventObject e) {
    Button button = this.getView().getControl("kdtest_buttonap");
    button.setBadgeInfo(getBadgeInfo());
  }
  private BadgeInfo getBadgeInfo() {
    BadgeInfo badgeInfo = new BadgeInfo();
    badgeInfo.setCount(100);
    badgeInfo.setOverflowCount(99);
    return badgeInfo;
  }
}

3. 没有消息时，默认是不显示徽标的。但如果有特殊场景，想实现在没有消息时显示为零的效果，就需用到下述代码：

public class Test2Plugin extends AbstractFormPlugin {
  @Override
  public void afterCreateNewData(EventObject e) {
    Button button = this.getView().getControl("kdtest_buttonap");
    button.setBadgeInfo(getBadgeInfo());
  }
  private BadgeInfo getBadgeInfo() {
    BadgeInfo badgeInfo = new BadgeInfo();
    badgeInfo.setCount(0);
    badgeInfo.setShowZero(true);
    return badgeInfo;
  }
}

2.3 文本型徽标

当用户希望自定义提示内容，可以使用文本型徽标。如下图的效果：

插件代码如下：

public class Test2Plugin extends AbstractFormPlugin {
  @Override
  public void afterCreateNewData(EventObject e) {
    Button button = this.getView().getControl("kdtest_buttonap");
    button.setBadgeInfo(getBadgeInfo());
  }
  private BadgeInfo getBadgeInfo() {
    BadgeInfo badgeInfo = new BadgeInfo();
    badgeInfo.setBadgeText(“NEW”);
    return badgeInfo;
  }
}

2.4 自定义徽标位置

如果不想徽标显示在按钮图标的右上角，想要自定义显示在其他位置，比如居中显示，则可以使用插件代码来修改徽标的位置。

插件代码如下：

public class Test2Plugin extends AbstractFormPlugin {
  @Override
  public void afterCreateNewData(EventObject e) {
    Button button = this.getView().getControl("kdtest_buttonap");
    button.setBadgeInfo(getBadgeInfo());
  }
  private BadgeInfo getBadgeInfo() {
    BadgeInfo badgeInfo = new BadgeInfo();
    badgeInfo.setBadgeText(“NEW”);
    badgeInfo.setOffset(['15px', '96px']);
    return badgeInfo;
  }
}

注意：小红点位置固定，仅限数字和文本形式可以修改位置。

2.5 隐藏徽标

如何隐藏徽标，请参考以下插件代码：

public class Test2Plugin extends AbstractFormPlugin {
  @Override
  public void afterCreateNewData(EventObject e) {
    Button button = this.getView().getControl("kdtest_buttonap");
    button.setBadgeInfo(getBadgeInfo());
  }
  private BadgeInfo getBadgeInfo() {
    BadgeInfo badgeInfo = new BadgeInfo();
    badgeInfo.setCount(0);
    return badgeInfo;
  }
}

3 注意事项

1、徽标一般都很简洁, 所以我们在不区分中英文的情况, 文本允许显示的最大长度为4, 超出会被截断。

2、支持徽标的控件: 按钮, 标签, 图片控件, 页签, 工具栏。

3、代码里的BadgeInfo对象方法有以下几种：

上传图片

#往期推荐#

# 玩转设计器之“跨页面复制元数据&运用格式刷”

# 手把手教你使用pc卡片列表方案

# 帮助文本，不仅仅是简单的文本提示

# 苍穹中隐藏的智能协同功能

更多精彩内容，“码”上了解！↓

一篇揭秘如何实现“徽标”效果的好文，速看！

一篇揭秘如何实现“徽标”效果的好文，速看！

恭喜您！