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

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

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

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

**[java]** [view plain](http://blog.csdn.net/crazy1235/article/details/42262369#)[copy](http://blog.csdn.net/crazy1235/article/details/42262369#)[![在CODE上查看代码片](https://code.csdn.net/assets/CODE_ico.png)](https://code.csdn.net/snippets/571341)[![派生到我的代码片](https://code.csdn.net/assets/ico_fork.svg)](https://code.csdn.net/snippets/571341/fork)
  <div>
    <embed id="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_1">
    </embed>
  </div>
</div>

- BadgeView badgeView = <span class="keyword">new</span> com.jauker.widget.BadgeView(<span class="keyword">this</span>);

- badgeView.setTargetView(textView);

- badgeView.setBadgeCount(<span class="number">3</span>);

看一下badgeview中常用的方法：

**[java]** [view plain](http://blog.csdn.net/crazy1235/article/details/42262369#)[copy](http://blog.csdn.net/crazy1235/article/details/42262369#)[![在CODE上查看代码片](https://code.csdn.net/assets/CODE_ico.png)](https://code.csdn.net/snippets/571341)[![派生到我的代码片](https://code.csdn.net/assets/ico_fork.svg)](https://code.csdn.net/snippets/571341/fork)
  <div>
    <embed id="ZeroClipboardMovie_2" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_2">
    </embed>
  </div>
</div>

- badgeView = <span class="keyword">new</span> BadgeView(<span class="keyword">this</span>);

- badgeView.setTargetView(layout);

- badgeView.setBackground(<span class="number">12</span>, Color.parseColor(<span class="string">&#8220;#9b2eef&#8221;</span>));

- badgeView.setText(<span class="string">&#8220;提示&#8221;</span>);

 

**[java]** [view plain](http://blog.csdn.net/crazy1235/article/details/42262369#)[copy](http://blog.csdn.net/crazy1235/article/details/42262369#)[![在CODE上查看代码片](https://code.csdn.net/assets/CODE_ico.png)](https://code.csdn.net/snippets/571341)[![派生到我的代码片](https://code.csdn.net/assets/ico_fork.svg)](https://code.csdn.net/snippets/571341/fork)
  <div>
    <embed id="ZeroClipboardMovie_3" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_3">
    </embed>
  </div>
</div>

- badgeView = <span class="keyword">new</span> BadgeView(<span class="keyword">this</span>);

- badgeView.setTargetView(layout);

- badgeView.setBadgeGravity(Gravity.BOTTOM | Gravity.CENTER);

- badgeView.setBadgeCount(<span class="number">4</span>);

 

**[java]** [view plain](http://blog.csdn.net/crazy1235/article/details/42262369#)[copy](http://blog.csdn.net/crazy1235/article/details/42262369#)[![在CODE上查看代码片](https://code.csdn.net/assets/CODE_ico.png)](https://code.csdn.net/snippets/571341)[![派生到我的代码片](https://code.csdn.net/assets/ico_fork.svg)](https://code.csdn.net/snippets/571341/fork)
  <div>
    <embed id="ZeroClipboardMovie_4" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_4">
    </embed>
  </div>
</div>

- badgeView = <span class="keyword">new</span> BadgeView(<span class="keyword">this</span>);

- badgeView.setTargetView(layout);

- badgeView.setBadgeGravity(Gravity.TOP | Gravity.LEFT);

- badgeView.setTypeface(Typeface.create(Typeface.SANS_SERIF,

- Typeface.ITALIC));


- badgeView.setBadgeCount(<span class="number">2</span>);

 

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

OK。效果实现完毕。

BadgeView下载链接

badgeview.jar下载

DEMO下载

转载：http://blog.csdn.net/crazy1235/article/details/42262369

💬 评论