看过oschina-app的数字提醒标签BadgeView的使用过程，才发现以前项目中的实现逻辑有问题。以前待的项目组没个牛人，从我干第一个项目就我负责开发设计和管理，可想而知，顶多也就实现功能交工。说到底就是经验不足，所以有时间还是多看看别人的代码。本来是想主要讲oschina-app里面提醒标签的实现逻辑，但我觉得标签控件BadgeView有必要说下。
BadgeView是一个开源的ui项目，其实就一个ui工具类，BadgeView是对TextView的重写，他的代码就不贴了，可以到git上下最新的吧：https://github.com/jgilfelt/android-viewbadger
在这里主要说下他的用法，它可以设置标签的背景、颜色、位置、动画、文字等，对一般的需求足以满足了，先看下git上demo的效果：
默认属性标签代码：
**[java]** [view plain](http://blog.csdn.net/xiangxue336/article/details/21073571#)[copy](http://blog.csdn.net/xiangxue336/article/details/21073571#)[](https://code.csdn.net/snippets/230977)[](https://code.csdn.net/snippets/230977/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>
- <span class="comment">// *** default badge ***</span>
-
- View target = findViewById(R.id.default_target);
- BadgeView badge = <span class="keyword">new</span> BadgeView(<span class="keyword">this</span>, target);
- badge.setText(<span class="string">“1”</span>);
- badge.show();
默认是显示在右上角，红色的背景白色字体，这些个默认属性是可以在BadgeView里面设置的。
设置position代码：
**[java]** [view plain](http://blog.csdn.net/xiangxue336/article/details/21073571#)[copy](http://blog.csdn.net/xiangxue336/article/details/21073571#)[](https://code.csdn.net/snippets/230977)[](https://code.csdn.net/snippets/230977/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>
- <span class="comment">// *** set position ***</span>
-
- btnPosition = (Button) findViewById(R.id.position_target);
- badge1 = <span class="keyword">new</span> BadgeView(<span class="keyword">this</span>, btnPosition);
- badge1.setText(<span class="string">“12”</span>);
- badge1.setBadgePosition(BadgeView.POSITION_CENTER);
- btnPosition.setOnClickListener(<span class="keyword">new</span> OnClickListener() {
- <span class="annotation">@Override</span>
- <span class="keyword">public</span> <span class="keyword">void</span> onClick(View v) {
- badge1.toggle();
- }
- });
toggle方法是控制标签的现实和隐藏的。
在BadgeView中定义了5种显示位置：
**[java]** [view plain](http://blog.csdn.net/xiangxue336/article/details/21073571#)[copy](http://blog.csdn.net/xiangxue336/article/details/21073571#)[](https://code.csdn.net/snippets/230977)[](https://code.csdn.net/snippets/230977/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>
- <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">final</span> <span class="keyword">int</span> POSITION_TOP_LEFT = <span class="number">1</span>;
- <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">final</span> <span class="keyword">int</span> POSITION_TOP_RIGHT = <span class="number">2</span>;
- <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">final</span> <span class="keyword">int</span> POSITION_BOTTOM_LEFT = <span class="number">3</span>;
- <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">final</span> <span class="keyword">int</span> POSITION_BOTTOM_RIGHT = <span class="number">4</span>;
- <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">final</span> <span class="keyword">int</span> POSITION_CENTER = <span class="number">5</span>;
设置字体大小、颜色、背景色：
**[java]** [view plain](http://blog.csdn.net/xiangxue336/article/details/21073571#)[copy](http://blog.csdn.net/xiangxue336/article/details/21073571#)[](https://code.csdn.net/snippets/230977)[](https://code.csdn.net/snippets/230977/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>
- badge2.setTextColor(Color.BLUE);
- badge2.setBadgeBackgroundColor(Color.YELLOW);
- badge2.setTextSize(<span class="number">12</span>);
设置显示边距、显示隐藏动画：
**[java]** [view plain](http://blog.csdn.net/xiangxue336/article/details/21073571#)[copy](http://blog.csdn.net/xiangxue336/article/details/21073571#)[](https://code.csdn.net/snippets/230977)[](https://code.csdn.net/snippets/230977/fork)
<div>
<embed id="ZeroClipboardMovie_5" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_5">
</embed>
</div>
</div>
- badge4.setBadgeMargin(<span class="number">15</span>, <span class="number">10</span>);
- badge4.setBadgeBackgroundColor(Color.parseColor(<span class="string">“#A4C639”</span>));
- btnAnim2.setOnClickListener(<span class="keyword">new</span> OnClickListener() {
- <span class="annotation">@Override</span>
- <span class="keyword">public</span> <span class="keyword">void</span> onClick(View v) {
- TranslateAnimation anim = <span class="keyword">new</span> TranslateAnimation(-<span class="number">100</span>, <span class="number"></span>, <span class="number"></span>, <span class="number"></span>);
- anim.setInterpolator(<span class="keyword">new</span> BounceInterpolator());
- anim.setDuration(<span class="number">1000</span>);
- badge4.toggle(anim, <span class="keyword">null</span>);
- }
- });
toggle(anim, null)方法中，第一个参数是显示时候的动画，第二个参数是隐藏时候的动画。
设置图片背景和点击事件：
**[java]** [view plain](http://blog.csdn.net/xiangxue336/article/details/21073571#)[copy](http://blog.csdn.net/xiangxue336/article/details/21073571#)[](https://code.csdn.net/snippets/230977)[](https://code.csdn.net/snippets/230977/fork)
<div>
<embed id="ZeroClipboardMovie_6" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_6">
</embed>
</div>
</div>
- badge6.setBackgroundResource(R.drawable.badge_ifaux);
- badge6.setOnClickListener(<span class="keyword">new</span> OnClickListener() {
- <span class="annotation">@Override</span>
- <span class="keyword">public</span> <span class="keyword">void</span> onClick(View v) {
- Toast.makeText(DemoActivity.<span class="keyword">this</span>, <span class="string">“clicked badge”</span>, Toast.LENGTH_SHORT).show();
- }
- });
一般背景图片要经过.9处理，因为随着显示数字增大背景图片只是横向拉伸。
标签有时候往往会有点击一次加以的需求，这里也提供了现成的方法
**[java]** [view plain](http://blog.csdn.net/xiangxue336/article/details/21073571#)[copy](http://blog.csdn.net/xiangxue336/article/details/21073571#)[](https://code.csdn.net/snippets/230977)[](https://code.csdn.net/snippets/230977/fork)
<div>
<embed id="ZeroClipboardMovie_7" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_7">
</embed>
</div>
</div>
- btnIncrement.setOnClickListener(<span class="keyword">new</span> OnClickListener() {
- <span class="annotation">@Override</span>
- <span class="keyword">public</span> <span class="keyword">void</span> onClick(View v) {
- <span class="keyword">if</span> (badge8.isShown()) {
- badge8.increment(<span class="number">1</span>);
- } <span class="keyword">else</span> {
- badge8.show();
- }
- }
- );
到此BadgeView的所有使用方法介绍差不多了，别人搞好的东西，使用起来很简单，主要记录下方法他能提供的功能。如果有特殊的需求可以对BadgeView进行改造。下节主要分析下，oschina-app里面对BadgeView的使用逻辑流程。
oschina-app完整源码下载：[http://download.csdn.net/detail/xiangxue336/7023661](http://download.csdn.net/detail/xiangxue336/7023661)
转自：http://blog.csdn.net/xiangxue336/article/details/21073571
相关的git项目地址：
https://github.com/jgilfelt/android-viewbadger
https://github.com/stefanjauker/BadgeView
https://github.com/chenupt/BezierDemo
https://github.com/chenupt/SpringIndicator
💬 评论