通知角标(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