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

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

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

先看一下界面效果图

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

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

 // 默认的badge效果
         View target = findViewById(R.id.default_target);
         BadgeView badge = new BadgeView(this, target);
         badge.setText("1");
         badge.show();

         // 设置位置
         btnPosition = (Button) findViewById(R.id.position_target);
         badge1 = new BadgeView(this, btnPosition);
         badge1.setText("12");
         badge1.setBadgePosition(BadgeView.POSITION_BOTTOM_LEFT);
         btnPosition.setOnClickListener(new OnClickListener() {
             @Override
             public void onClick(View v) {
                 badge1.toggle();
             }
         });

         // 设置显示文本/字体颜色/背景颜色
         btnColour = (Button) findViewById(R.id.colour_target);
         badge2 = new BadgeView(this, btnColour);
         badge2.setText("New!");
         badge2.setTextColor(Color.BLUE);
         badge2.setBadgeBackgroundColor(Color.YELLOW);
         badge2.setTextSize(12);
         btnColour.setOnClickListener(new OnClickListener() {
             @Override
             public void onClick(View v) {
                 badge2.toggle();
             }
         });

         // 默认动画效果
         btnAnim1 = (Button) findViewById(R.id.anim1_target);
         badge3 = new BadgeView(this, btnAnim1);
         badge3.setText("84");
         btnAnim1.setOnClickListener(new OnClickListener() {
             @Override
             public void onClick(View v) {
                 badge3.toggle(true);
             }
         });

         // 用户自定义动画
         btnAnim2 = (Button) findViewById(R.id.anim2_target);
         badge4 = new BadgeView(this, btnAnim2);
         badge4.setText("123");
         badge4.setBadgePosition(BadgeView.POSITION_TOP_LEFT);
         badge4.setBadgeMargin(15);
         badge4.setBadgeBackgroundColor(Color.parseColor("#A4C639"));
         btnAnim2.setOnClickListener(new OnClickListener() {
             @Override
             public void onClick(View v) {
                 // 设置进入的移动动画，设置了插值器，可以实现颤动的效果
                 TranslateAnimation anim = new TranslateAnimation(-100, 0, 0, 0);
                 anim.setInterpolator(new BounceInterpolator());
                 // 设置动画的持续时间
                 anim.setDuration(1000);
                 // 设置退出的移动动画
                 TranslateAnimation anim2 = new TranslateAnimation(0, -100, 0, 0);
                 anim2.setDuration(500);
                 badge4.toggle(anim, anim2);
             }
         });

         // 设置用户自定义的背景图片
         btnCustom = (Button) findViewById(R.id.custom_target);
         badge5 = new BadgeView(this, btnCustom);
         badge5.setText("37");
         badge5.setBackgroundResource(R.drawable.badge_ifaux);
         badge5.setTextSize(16);
         btnCustom.setOnClickListener(new OnClickListener() {
             @Override
             public void onClick(View v) {
                 badge5.toggle(true);
             }
         });

         // 在tab上显示一个小红点
         TabWidget tabs = (TabWidget) findViewById(android.R.id.tabs);

         btnTab = (Button) findViewById(R.id.tab_btn);
         badge7 = new BadgeView(this, tabs, 2);
         badge7.setText("5");
         btnTab.setOnClickListener(new OnClickListener() {
             @Override
             public void onClick(View v) {
                 badge7.toggle();
             }
         });

         // 可以被点击的badge
         btnClick = (Button) findViewById(R.id.click_target);
         badge6 = new BadgeView(this, btnClick);
         badge6.setText("click me");
         badge6.setBadgeBackgroundColor(Color.BLUE);
         badge6.setTextSize(16);
         //设置点击事件
         badge6.setOnClickListener(new OnClickListener() {
             @Override
             public void onClick(View v) {
                 Toast.makeText(DemoActivity.this, "clicked badge",
                         Toast.LENGTH_SHORT).show();
             }
         });
         btnClick.setOnClickListener(new OnClickListener() {
             @Override
             public void onClick(View v) {
                 badge6.toggle();
             }
         });

         // 红点数字可以自增长的badge
         btnIncrement = (Button) findViewById(R.id.increment_target);
         badge8 = new BadgeView(this, btnIncrement);
         badge8.setText("0");
         btnIncrement.setOnClickListener(new OnClickListener() {
             @Override
             public void onClick(View v) {
                 if (badge8.isShown()) {
                     badge8.increment(1);
                 } else {
                     badge8.show();
                 }
             }
         });

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

 BadgeView badge;
         View target;

         // *** test linear layout container ***

         target = findViewById(R.id.linear_target);
         badge = new BadgeView(this, target);
         badge.setText("OK");
         badge.show();

         // *** test relative layout container ***

         target = findViewById(R.id.relative_target);
         badge = new BadgeView(this, target);
         badge.setText("OK");
         badge.show();

         // *** test frame layout container ***

         target = findViewById(R.id.frame_target);
         badge = new BadgeView(this, target);
         badge.setText("OK");
         badge.show();

         // *** test table layout container ***

         target = findViewById(R.id.table_target);
         badge = new BadgeView(this, target);
         badge.setText("OK");
         badge.show();

         // *** test linear layout ***

         target = findViewById(R.id.linear_group_target);
         badge = new BadgeView(this, target);
         badge.setText("OK");
         badge.show();

         // *** test relative layout ***

         target = findViewById(R.id.relative_group_target);
         badge = new BadgeView(this, target);
         badge.setText("OK");
         badge.show();

         // *** test frame layout ***

         target = findViewById(R.id.frame_group_target);
         badge = new BadgeView(this, target);
         badge.setText("OK");
         badge.show();

         // *** test table layout ***

         target = findViewById(R.id.tablerow_group_target);
         badge = new BadgeView(this, target);
         badge.setText("OK");
         badge.show();

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

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

点击下载