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

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

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

先看一下界面效果图

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

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

[java]  view plain  copy

 

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

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

[java]  view plain  copy

 

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

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

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

点击下载