码迷,mamicode.com
首页 > 其他好文 > 详细

BadgeView的使用介绍

时间:2016-04-12 19:31:32      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:

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

今天这篇文章,给大家介绍一个开源第三方控件——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(-100000);  
  56.                 anim.setInterpolator(new BounceInterpolator());  
  57.                 // 设置动画的持续时间  
  58.                 anim.setDuration(1000);  
  59.                 // 设置退出的移动动画  
  60.                 TranslateAnimation anim2 = new TranslateAnimation(0, -10000);  
  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();  

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


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

点击下载


BadgeView的使用介绍

标签:

原文地址:http://www.cnblogs.com/wxmdevelop/p/5383511.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!