通知角标(1)常用的3种实现方法

1,使用开源库 BadgeView (*推荐)

https://github.com/stefanjauker/BadgeView

      

比较轻巧,功能也够用。不用在布局写代码就可以给任意一个View添加一个通知角标,下面是基本步骤和示例,注意listview的 BagdeView要缓存一个,不要每个item 分配一个,更多示例见源码。

 1    //1,下载 BadgeView https://github.com/stefanjauker/BadgeView
 2     //2,拷贝badgeview.jar到libs目录
 3     //3,构造一个BadgeView
 4     final BadgeView titleBadge = new BadgeView(context);
 5     //4,设置BadgeView要在哪个view上显示通知角标
 6     titleBadge.setTargetView(tabTitle);
 7     //5,设置角标样式
 8     titleBadge.setBackground(3,Color.parseColor("#FFA500"));
 9     titleBadge.setBadgeCount(-5);
10     titleBadge.setBadgeGravity(Gravity.RIGHT | Gravity.BOTTOM);
11     //6,处理角标事件
12     titleBadge.setOnClickListener(new View.OnClickListener() {
13         @Override
14         public void onClick(View v) {
15             titleBadge.incrementBadgeCount(1);
16         }
17     });
18     
19     BadgeView discoveryBadge = new BadgeView(context);
20     discoveryBadge.setTargetView(tabIcon);
21     discoveryBadge.setWidth(20);
22     discoveryBadge.setHeight(20);
23     discoveryBadge.setText("");//只显示一个红圆点

2,使用开源库 android-viewbadger

https://github.com/jgilfelt/android-viewbadger

    

功能较多。不用在布局写代码就可以给任意一个View添加一个通知角标,下面是基本步骤和示例,注意listview的 BagdeView要缓存一个,不要每个item 分配一个,更多示例见源码。

 1     //1,下载 android-viewbadger , https://github.com/jgilfelt/android-viewbadger
 2     //2,拷贝android-viewbadger.jar 到libs目录
 3     //3,构造一个BadgeView,这个构造函数BadgeView(Context context, View target)可以把它与一个view关联
 4     final BadgeView tabBadge = new BadgeView(context,tabIcon);
 5     //4,设置显示参数,如文件,位置等。
 6     tabBadge.setBadgePosition(BadgeView.POSITION_TOP_RIGHT);
 7     tabBadge.setText("9");
 8     tabBadge.setWidth(15);
 9     tabBadge.setHeight(15);
10     tabBadge.setBadgeMargin(10,3);//注意由于是POSITION_TOP_RIGHT,所以是从右边往左4,从上边往下3
11     tabBadge.setBadgeBackgroundColor(Color.parseColor("#CD00CD"));
12     //5,show BadgeView
13     tabBadge.show();
14     //6,处理BadgeView的事件
15     tabBadge.setOnClickListener(new View.OnClickListener() {
16         @Override
17         public void onClick(View v) {
18             tabBadge.hide();
19         }
20     });

3,自定义

不用导入其它工程,但是使用起来麻烦。

下面是一个有通知角标的 ImageView示例

badge_view_layout.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:id="@+id/badge_view"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     android:gravity="center_horizontal" >
 8 
 9     <ImageView
10         android:id="@+id/iv_badge_view_img"
11         android:layout_width="wrap_content"
12         android:layout_height="wrap_content"
13         android:contentDescription="wait scan image"
14         android:src="@drawable/tab_weixin_notice_icon_level" />
15 
16     <ViewStub
17         android:id="@+id/ViewStub_badge_view"
18         android:layout_width="20dp"
19         android:layout_height="20dp"
20         android:layout_alignRight="@+id/iv_badge_view_img"
21         android:inflatedId="@+id/iv_badge_view_count"
22         android:layout="@layout/badge_view_count_layout" />
23     
24 </RelativeLayout>

badge_view_count_layout.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:id="@+id/iv_badge_view_count"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:gravity="center_vertical" >
 7 
 8     <TextView
 9         android:id="@+id/tv_badge_view_number"
10         android:layout_width="match_parent"
11         android:layout_height="match_parent"
12         android:background="@drawable/badge_view_layout_bg"
13         android:gravity="center_vertical|center_horizontal"
14         android:text="5"
15         android:textColor="@android:color/white"
16         android:textSize="13sp" />
17 </RelativeLayout>

badge_view_layout_bg.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 3     <item>
 4         <shape>
 5             <stroke
 6                 android:width="1px"
 7                 android:color="@android:color/holo_red_dark" /> <!-- 边框颜色 -->
 8             <solid android:color="@android:color/holo_red_dark" /> <!-- 填充色 -->
 9             <corners android:radius="15dp" />
10         </shape>
11     </item>
12 </layer-list>

使用代码

 1   private void initNotice(){
 2         View noticeView = tabHost.findViewById(R.id.ViewStub_tab_weixin_notice);
 3         noticeView.setVisibility(View.VISIBLE);
 4         
 5         //下面是设置通知角标的数字,代码应该放在通知角标的事件中
 6         View badge_view_ViewStub = tabHost.findViewById(R.id.ViewStub_badge_view);
 7         badge_view_ViewStub.setVisibility(View.VISIBLE);
 8         //设置角标数字
 9         TextView bvCount = (TextView) tabHost.findViewById(R.id.tv_badge_view_count);
10         bvCount.setText("3");
11         
12     }

4.各效果示例图

 

说明:

  1是自定义的,

  2用的 BadgeView

  3(粉色圆点)和4 用的viewbadger,

  5(红圆点),-6,(New!),用的 BadgeView

 

posted @ 2015-10-27 22:11  f9q  阅读(2320)  评论(0编辑  收藏  举报