BadgeView的使用介绍

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

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

先看一下界面效果图

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

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

1. // 默认的badge效果
2. View target = findViewById(R.id.default_target);
3. BadgeView badge = new BadgeView(this, target);
4. badge.setText("1");
5. badge.show();
6. // 设置位置
7. btnPosition = (Button) findViewById(R.id.position_target);
8. badge1 = new BadgeView(this, btnPosition);
9. badge1.setText("12");
10. badge1.setBadgePosition(BadgeView.POSITION_BOTTOM_LEFT);
11. btnPosition.setOnClickListener(new OnClickListener() {
12. @Override
13. public void onClick(View v) {
14. badge1.toggle();
15. }
16. });
17. // 设置显示文本/字体颜色/背景颜色
18. btnColour = (Button) findViewById(R.id.colour_target);
19. badge2 = new BadgeView(this, btnColour);
20. badge2.setText("New!");
21. badge2.setTextColor(Color.BLUE);
22. badge2.setBadgeBackgroundColor(Color.YELLOW);
23. badge2.setTextSize(12);
24. btnColour.setOnClickListener(new OnClickListener() {
25. @Override
26. public void onClick(View v) {
27. badge2.toggle();
28. }
29. });
30. // 默认动画效果
31. btnAnim1 = (Button) findViewById(R.id.anim1_target);
32. badge3 = new BadgeView(this, btnAnim1);
33. badge3.setText("84");
34. btnAnim1.setOnClickListener(new OnClickListener() {
35. @Override
36. public void onClick(View v) {
37. badge3.toggle(true);
38. }
39. });
40. // 用户自定义动画
41. btnAnim2 = (Button) findViewById(R.id.anim2_target);
42. badge4 = new BadgeView(this, btnAnim2);
43. badge4.setText("123");
44. badge4.setBadgePosition(BadgeView.POSITION_TOP_LEFT);
45. badge4.setBadgeMargin(15);
46. badge4.setBadgeBackgroundColor(Color.parseColor("#A4C639"));
47. btnAnim2.setOnClickListener(new OnClickListener() {
48. @Override
49. public void onClick(View v) {
50. // 设置进入的移动动画，设置了插值器，可以实现颤动的效果
51. TranslateAnimation anim = new TranslateAnimation(-100, 0, 0, 0);
52. anim.setInterpolator(new BounceInterpolator());
53. // 设置动画的持续时间
54. anim.setDuration(1000);
55. // 设置退出的移动动画
56. TranslateAnimation anim2 = new TranslateAnimation(0, -100, 0, 0);
57. anim2.setDuration(500);
58. badge4.toggle(anim, anim2);
59. }
60. });
61. // 设置用户自定义的背景图片
62. btnCustom = (Button) findViewById(R.id.custom_target);
63. badge5 = new BadgeView(this, btnCustom);
64. badge5.setText("37");
65. badge5.setBackgroundResource(R.drawable.badge_ifaux);
66. badge5.setTextSize(16);
67. btnCustom.setOnClickListener(new OnClickListener() {
68. @Override
69. public void onClick(View v) {
70. badge5.toggle(true);
71. }
72. });
73. // 在tab上显示一个小红点
74. TabWidget tabs = (TabWidget) findViewById(android.R.id.tabs);
75. btnTab = (Button) findViewById(R.id.tab_btn);
76. badge7 = new BadgeView(this, tabs, 2);
77. badge7.setText("5");
78. btnTab.setOnClickListener(new OnClickListener() {
79. @Override
80. public void onClick(View v) {
81. badge7.toggle();
82. }
83. });
84. // 可以被点击的badge
85. btnClick = (Button) findViewById(R.id.click_target);
86. badge6 = new BadgeView(this, btnClick);
87. badge6.setText("click me");
88. badge6.setBadgeBackgroundColor(Color.BLUE);
89. badge6.setTextSize(16);
90. //设置点击事件
91. badge6.setOnClickListener(new OnClickListener() {
92. @Override
93. public void onClick(View v) {
94. Toast.makeText(DemoActivity.this, "clicked badge",
95. Toast.LENGTH_SHORT).show();
96. }
97. });
98. btnClick.setOnClickListener(new OnClickListener() {
99. @Override
100. public void onClick(View v) {
101. badge6.toggle();
102. }
103. });
104. // 红点数字可以自增长的badge
105. btnIncrement = (Button) findViewById(R.id.increment_target);
106. badge8 = new BadgeView(this, btnIncrement);
107. badge8.setText("0");
108. btnIncrement.setOnClickListener(new OnClickListener() {
109. @Override
110. public void onClick(View v) {
111. if (badge8.isShown()) {
112. badge8.increment(1);
113. } else {
114. badge8.show();
115. }
116. }
117. });

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

1. BadgeView badge;
2. View target;
3. // *** test linear layout container ***
4. target = findViewById(R.id.linear_target);
5. badge = new BadgeView(this, target);
6. badge.setText("OK");
7. badge.show();
8. // *** test relative layout container ***
9. target = findViewById(R.id.relative_target);
10. badge = new BadgeView(this, target);
11. badge.setText("OK");
12. badge.show();
13. // *** test frame layout container ***
14. target = findViewById(R.id.frame_target);
15. badge = new BadgeView(this, target);
16. badge.setText("OK");
17. badge.show();
18. // *** test table layout container ***
19. target = findViewById(R.id.table_target);
20. badge = new BadgeView(this, target);
21. badge.setText("OK");
22. badge.show();
23. // *** test linear layout ***
24. target = findViewById(R.id.linear_group_target);
25. badge = new BadgeView(this, target);
26. badge.setText("OK");
27. badge.show();
28. // *** test relative layout ***
29. target = findViewById(R.id.relative_group_target);
30. badge = new BadgeView(this, target);
31. badge.setText("OK");
32. badge.show();
33. // *** test frame layout ***
34. target = findViewById(R.id.frame_group_target);
35. badge = new BadgeView(this, target);
36. badge.setText("OK");
37. badge.show();
38. // *** test table layout ***
39. target = findViewById(R.id.tablerow_group_target);
40. badge = new BadgeView(this, target);
41. badge.setText("OK");
42. badge.show();

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

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

点击下载