信息更新小红点显示——自定义控件BadgeView的使用介绍

在现在大部分的信息发布类应用，都有这样的一个功能：当后台数据更新，比如有系统消息或者是用户间有互动的时候，通过在控件上显示一个小红点来提示用户有新的信息。一般来说，这种业务需求，我们可以在布局文件中隐藏一个小红点，然后当检测到有数据更新的时候，我们将隐藏的小红点显示即可。但是这种方案，存在一些弊端，比如使用不方便，需要在很多界面添加小红点的布局，而且使用起来不灵活。

今天这篇文章，给大家介绍一个开源第三方控件——BadgeView，来实现相同的功能，而且使用起来非常的方便，非常强大。

先看一下界面效果图

我们可以看到，效果非常棒，各种需求都能满足，而且还可以添加自定义的动画效果，瞬间让你的APP变得高大上！

下面，具体介绍BadgeView的各种效果的使用

// 默认的badge效果  
        View target = findViewById(R.id.default_target);  
new BadgeView(this, target);  
"1");  
        badge.show();  
  
// 设置位置  
        btnPosition = (Button) findViewById(R.id.position_target);  
new BadgeView(this, btnPosition);  
"12");  
        badge1.setBadgePosition(BadgeView.POSITION_BOTTOM_LEFT);  
new OnClickListener() {  
@Override  
public void onClick(View v) {  
                badge1.toggle();  
            }  
        });  
  
// 设置显示文本/字体颜色/背景颜色  
        btnColour = (Button) findViewById(R.id.colour_target);  
new BadgeView(this, btnColour);  
"New!");  
        badge2.setTextColor(Color.BLUE);  
        badge2.setBadgeBackgroundColor(Color.YELLOW);  
12);  
new OnClickListener() {  
@Override  
public void onClick(View v) {  
                badge2.toggle();  
            }  
        });  
  
// 默认动画效果  
        btnAnim1 = (Button) findViewById(R.id.anim1_target);  
new BadgeView(this, btnAnim1);  
"84");  
new OnClickListener() {  
@Override  
public void onClick(View v) {  
true);  
            }  
        });  
  
// 用户自定义动画  
        btnAnim2 = (Button) findViewById(R.id.anim2_target);  
new BadgeView(this, btnAnim2);  
"123");  
        badge4.setBadgePosition(BadgeView.POSITION_TOP_LEFT);  
15);  
"#A4C639"));  
new OnClickListener() {  
@Override  
public void onClick(View v) {  
// 设置进入的移动动画，设置了插值器，可以实现颤动的效果  
new TranslateAnimation(-100, 0, 0, 0);  
new BounceInterpolator());  
// 设置动画的持续时间  
1000);  
// 设置退出的移动动画  
new TranslateAnimation(0, -100, 0, 0);  
500);  
                badge4.toggle(anim, anim2);  
            }  
        });  
  
// 设置用户自定义的背景图片  
        btnCustom = (Button) findViewById(R.id.custom_target);  
new BadgeView(this, btnCustom);  
"37");  
        badge5.setBackgroundResource(R.drawable.badge_ifaux);  
16);  
new OnClickListener() {  
@Override  
public void onClick(View v) {  
true);  
            }  
        });  
  
// 在tab上显示一个小红点  
        TabWidget tabs = (TabWidget) findViewById(android.R.id.tabs);  
  
        btnTab = (Button) findViewById(R.id.tab_btn);  
new BadgeView(this, tabs, 2);  
"5");  
new OnClickListener() {  
@Override  
public void onClick(View v) {  
                badge7.toggle();  
            }  
        });  
  
// 可以被点击的badge  
        btnClick = (Button) findViewById(R.id.click_target);  
new BadgeView(this, btnClick);  
"click me");  
        badge6.setBadgeBackgroundColor(Color.BLUE);  
16);  
//设置点击事件  
new OnClickListener() {  
@Override  
public void onClick(View v) {  
this, "clicked badge",  
                        Toast.LENGTH_SHORT).show();  
            }  
        });  
new OnClickListener() {  
@Override  
public void onClick(View v) {  
                badge6.toggle();  
            }  
        });  
  
// 红点数字可以自增长的badge  
        btnIncrement = (Button) findViewById(R.id.increment_target);  
new BadgeView(this, btnIncrement);  
"0");  
new OnClickListener() {  
@Override  
public void onClick(View v) {  
if (badge8.isShown()) {  
1);  
else {  
                    badge8.show();  
                }  
            }  
        });

上面的代码是用来实现第一张效果图的效果的，下面是第三张效果图的实现

BadgeView badge;  
        View target;  
  
// *** test linear layout container ***  
  
        target = findViewById(R.id.linear_target);  
new BadgeView(this, target);  
"OK");  
        badge.show();  
  
// *** test relative layout container ***  
  
        target = findViewById(R.id.relative_target);  
new BadgeView(this, target);  
"OK");  
        badge.show();  
  
// *** test frame layout container ***  
  
        target = findViewById(R.id.frame_target);  
new BadgeView(this, target);  
"OK");  
        badge.show();  
  
// *** test table layout container ***  
  
        target = findViewById(R.id.table_target);  
new BadgeView(this, target);  
"OK");  
        badge.show();  
  
// *** test linear layout ***  
  
        target = findViewById(R.id.linear_group_target);  
new BadgeView(this, target);  
"OK");  
        badge.show();  
  
// *** test relative layout ***  
  
        target = findViewById(R.id.relative_group_target);  
new BadgeView(this, target);  
"OK");  
        badge.show();  
  
// *** test frame layout ***  
  
        target = findViewById(R.id.frame_group_target);  
new BadgeView(this, target);  
"OK");  
        badge.show();  
  
// *** test table layout ***  
  
        target = findViewById(R.id.tablerow_group_target);  
new BadgeView(this, target);  
"OK");  
        badge.show();

其实都大同小异，使用方式基本一样。

最后直接给出下载链接吧，自己看最明白~

点击下载