一篇揭秘如何实现“徽标”效果的好文，速看！
某一天，开发部的小白又接到了新需求：要在按钮的右上角显示徽标红点，告知用户有待处理的消息或新内容。小白翻遍了设计器，也没有找到徽标控件，再次抱起了前端大佬的大腿。
大佬表示，这都不是事，给小白发来了使用徽标功能的秘诀。
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
一篇揭秘如何实现“徽标”效果的好文，速看！
某一天，开发部的小白又接到了新需求：要在按钮的右上角显示徽标红点，告知用户有待处理的消息或新内容。小白翻遍了设计器，也没有找到徽标...
点击下载文档文档为doc格式
声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
上一篇
已经是第一篇
