最近在做一个可以查看未读消息的功能,需要在界面中的Tab页的标签icon的右上角添加一个未读消息提示的功能。
先上个效果图出来,比较直观明白需求:
思路上似乎有两种:
1. 直接把底图和红圆圈的图片用相对布局进行排列,在代码中动态更改红圆中的TextView的数字,并且识别一下各种情况下红圆的显示或者隐藏。这种方法比较直观。
2. 采用canvas画出圆和数字。
由于项目采用的是Tab页的形式,其中的RadioButton不适合采用相对布局。故我采用了第二种方式。将绘制的过程写成了工具方法。在需要的时候调用。便于以后的技术迁移。
直接上代码:
/** * 绘制图标右上角的未读消息数量显示 * * @param context * 上下文 * @param icon * 需要被添加的icon的资源ID * @param news * 未读的消息数量 * @return drawable */ @SuppressWarnings("unused") public static Drawable displayNewsNumber(Context context,int icon,int news) { // 初始化画布 int iconSize = (int) context.getResources().getDimension( android.R.dimen.app_icon_size); // Bitmap contactIcon = Bitmap.createBitmap(iconSize,iconSize,// Config.ARGB_8888); Bitmap iconBitmap = BitmapFactory.decodeResource( context.getResources(),icon); Canvas canvas = new Canvas(iconBitmap); // 拷贝图片 Paint iconPaint = new Paint(); iconPaint.setDither(true);// 防抖动 iconPaint.setFilterBitmap(true);// 用来对Bitmap进行滤波处理 Rect src = new Rect(0,iconBitmap.getWidth(),iconBitmap.getHeight()); Rect dst = new Rect(0,iconBitmap.getHeight()); canvas.drawBitmap(iconBitmap,src,dst,iconPaint); // 启用抗锯齿和使用设备的文本字距 Paint countPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DEV_KERN_TEXT_FLAG); countPaint.setColor(Color.RED); canvas.drawCircle(iconSize - 13,20,10,countPaint); Paint textPaint = new Paint(); textPaint.setColor(Color.WHITE); // textPaint.setTypeface(Typeface.DEFAULT_BOLD); textPaint.setTextSize(19f); canvas.drawText(String.valueOf(news),iconSize - 18,27,textPaint); return new BitmapDrawable(iconBitmap); }
调用语句:
if (count > 0) {//显示右上角未读消息提示 Drawable mineDrawable = BitmapUtil.displayNewsNumber(this,R.drawable.icon_mine,count); mineButton.setCompoundDrawablesWithIntrinsicBounds(null,null,mineDrawable);//这里就是设置背景,自行发挥。 } else {//隐藏 Drawable defaultDrawable = getResources().getDrawable( R.drawable.icon_mine); mineButton.setCompoundDrawablesWithIntrinsicBounds(null,defaultDrawable); }
注:
1.count是未读消息的数量。
2.setCompoundDrawablesWithIntrinsicBounds(Drawable left,Drawable top,Drawable right,Drawable bottom)
可以在上、下、左、右设置图标,如果不想在某个地方显示,则设置为null。图标的宽高将会设置为固有宽高,既自动通过getIntrinsicWidth和getIntrinsicHeight获取。该方法是和在xml中设置 Android:drawabletop="@drawable/icon_mine
"的效果一样。