1,使用开源库 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
功能较多。不用在布局写代码就可以给任意一个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