GitHub控件之BadgeView（数字提醒）

r囧r小猫 2022-08-02 06:35 140阅读 0赞

转载请注明出处：[http://blog.csdn.net/crazy1235/article/details/42262369][http_blog.csdn.net_crazy1235_article_details_42262369]

数字提醒大家肯定都见识过。QQ、微信等app中如果有消息或者提醒的时候，就会展现给用户一个红点或者带有数字的点。前段时间微信上流行把自己的头像换成带有数字提醒的头像，让那些有强迫症的人真是抓狂。

![SouthEast][]

下面我们就看一下怎么在自己的app中实现这种效果。

开发者当然可以自己用相对布局来实现这样的效果。一个还好，但是多了呢！就会很繁琐。[GitHub][]上有一个开源的第三方控件，叫做[BadgeView][]。使用它可以很方面的实现想要的效果。

先来怎么使用，简单的三行代码就可以实现数字提醒：

**\[java\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  BadgeView badgeView = **new** com.jauker.widget.BadgeView(**this**);  
2.  badgeView.setTargetView(textView);  
3.  badgeView.setBadgeCount(3);

看一下badgeview中常用的方法：

1. setTargetView(View) --> 设置哪个控件显示数字提醒，参数就是一个view对象

2. setBadgeCount(int) --> 设置提醒的数字

3. setBadgeGravity(Gravity) --> 设置badgeview的显示位置

4. setBackgroundColor() --> 设置badgeview的背景色，当然还可以设置背景图片

5. setBackgroundResource() --> 设置背景图片

6. setTypeface() --> 设置显示的字体

7. setShadowLayer() --> 设置字体的阴影

**\[java\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  badgeView = **new** BadgeView(**this**);  
2.          badgeView.setTargetView(layout);  
3.          badgeView.setBackground(12, Color.parseColor("\#9b2eef"));  
4.          badgeView.setText("提示");

**\[java\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  badgeView = **new** BadgeView(**this**);  
2.          badgeView.setTargetView(layout);  
3.          badgeView.setBadgeGravity(Gravity.BOTTOM | Gravity.CENTER);  
4.          badgeView.setBadgeCount(4);

**\[java\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  badgeView = **new** BadgeView(**this**);  
2.          badgeView.setTargetView(layout);  
3.          badgeView.setBadgeGravity(Gravity.TOP | Gravity.LEFT);  
4.          badgeView.setTypeface(Typeface.create(Typeface.SANS\_SERIF,  
5.                  Typeface.ITALIC));  
6.          badgeView.setShadowLayer(2, -1, -1, Color.GREEN);  
7.          badgeView.setBadgeCount(2);

实际上BadgeView这个类就是继承TextView的。很多TextView中设置字体的方法都适用于BadgeView。

OK。效果实现完毕。

[BadgeView下载链接][BadgeView]

[badgeview.jar下载][badgeview.jar]

[DEMO下载][DEMO]

[http_blog.csdn.net_crazy1235_article_details_42262369]: http://blog.csdn.net/crazy1235/article/details/42262369
[SouthEast]: /images/20220731/f582e09ef8d244ceb932c40e66abab26.png
[GitHub]: https://github.com/
[BadgeView]: https://github.com/stefanjauker/BadgeView
[view plain]: http://blog.csdn.net/crazy1235/article/details/42262369#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/571341
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/571341/fork
[badgeview.jar]: http://download.csdn.net/detail/crazy1235/8313527
[DEMO]: http://download.csdn.net/detail/crazy1235/8314565