Android 给应用程序的icon添加未读消息个数提示(红圈内数字)

最近在做一个可以查看未读消息的功能,需要在界面中的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, 0, iconBitmap.getWidth(), iconBitmap.getHeight());
  Rect dst = new Rect(0, 0, iconBitmap.getWidth(), 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,
     null, mineDrawable);//这里就是设置背景,自行发挥。
  } else {//隐藏
   Drawable defaultDrawable = getResources().getDrawable(
     R.drawable.icon_mine);
   mineButton.setCompoundDrawablesWithIntrinsicBounds(null, null,
     null, defaultDrawable);
  } 

注:

1.count是未读消息的数量。

2.setCompoundDrawablesWithIntrinsicBounds(Drawable left, Drawable top, Drawable right, Drawable bottom)可以在上、下、左、右设置图标,如果不想在某个地方显示,则设置为null。图标的宽高将会设置为固有宽高,既自动通过getIntrinsicWidth和getIntrinsicHeight获取。该方法是和在xml中设置 Android:drawableTop="@drawable/icon_mine"的效果一样。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

(0)

相关推荐

  • Android仿QQ滑动弹出菜单标记已读、未读消息

    在上一篇<Android仿微信滑动弹出编辑.删除菜单效果.增加下拉刷新功能>里,已经带着大家学习如何使用SwipeMenuListView这一开源库实现滑动列表弹出菜单,接下来,将进一步学习,如何为不同的list item呈现不同的菜单,此处我们做一个实例:Android 高仿QQ滑动弹出菜单标记已读.未读消息,看下效果图: 1. 创建项目,并导入SwipeMenuListView类库 2. 创建消息实体bean: public class Msg { public int id; publi

  • Android 桌面图标右上角显示未读消息数字

    背景: 在Android原生系统中,众所周知不支持桌面图标显示未读消息提醒的数字,虽然第三方控件BadgeView可以实现应用内的数字提醒.但对于系统的图标,特别是app的logo图标很难实现数字标志,即使是绘图的方式不断修改,但这种方式天生弊端,实用性很差.但幸运的是,一些强大的手机厂商(小米,三星,索尼)提供了私有的API,但也带来了难度,API的不同就意味着代码量的增加和兼容性问题更加突出. 现在我们来看看他们是如何实现的: 实现原理: 首先我们要明白 并不是应用本身处理对启动图标进行修改

  • Android贝塞尔曲线初步学习第二课 仿QQ未读消息气泡拖拽黏连效果

    上一节初步了解了Android端的贝塞尔曲线,这一节就举个栗子练习一下,仿QQ未读消息气泡,是最经典的练习贝塞尔曲线的东东,效果如下 附上github源码地址:https://github.com/MonkeyMushroom/DragBubbleView 欢迎star~ 大体思路就是画两个圆,一个黏连小球固定在一个点上,一个气泡小球跟随手指的滑动改变坐标.随着两个圆间距越来越大,黏连小球半径越来越小.当间距小于一定值,松开手指气泡小球会恢复原来位置:当间距超过一定值之后,黏连小球消失,气泡小球

  • Android仿微信底部菜单栏功能显示未读消息数量

    底部菜单栏很重要,我看了一下很多应用软件都是用了底部菜单栏,这里使用了tabhost做了一种通用的(就是可以像微信那样显示未读消息数量的,虽然之前也做过但是layout下的xml写的太臃肿,这里去掉了很多不必要的层,个人看起来还是不错的,所以贴出来方便以后使用). 先看一下做出来之后的效果: 以后使用的时候就可以换成自己项目的图片和字体了,主框架不用变哈哈, 首先是要布局layout下xml文件 main.xml: <?xml version="1.0" encoding=&qu

  • Android 未读消息的红点显示

    在很多APP里面,经常会看到未读消息的小红点,如下图: 这个功能用到的是一个控件,叫做BadgeView. BadgeView的用法很简单,直接把jar文件导入包中就可以使用,使用也很简单, badgeView = new BadgeView(this); //btn是控件 badgeView.setTargetView(btn); //设置相对位置 badgeView.setBadgeMargin(0, 5, 15, 0); //设置显示未读消息条数 badgeView.setBadgeCou

  • Android仿QQ未读消息--红点拖拽删除【源代码】

    本Demo是一款仿qq未读消息拖拽删除的例子,继承RelativeLayout的WaterDrop实现了圆形图标功能.继承ImageView的CircleImageView圆形图片功能.效果非常不错.很适合有圆形设计的哥们.效果图片如下 CircleImageView核心代码 private void updateShaderMatrix() { float scale; float dx = 0; float dy = 0; mShaderMatrix.set(null); if (mBitm

  • Android 给应用程序的icon添加未读消息个数提示(红圈内数字)

    最近在做一个可以查看未读消息的功能,需要在界面中的Tab页的标签icon的右上角添加一个未读消息提示的功能. 先上个效果图出来,比较直观明白需求: 思路上似乎有两种:  1. 直接把底图和红圆圈的图片用相对布局进行排列,在代码中动态更改红圆中的TextView的数字,并且识别一下各种情况下红圆的显示或者隐藏.这种方法比较直观.  2. 采用canvas画出圆和数字. 由于项目采用的是Tab页的形式,其中的RadioButton不适合采用相对布局.故我采用了第二种方式.将绘制的过程写成了工具方法.

  • Android仿QQ微信未读消息小红点BadgeHelper

    Android 小红点 未读消息功能 BadgeHelper 因为最近的项目需求,翻遍github上的未读消息红点开源库, 发现大部分 不能适配不同情况的布局, 所以我写了一个能兼容全部的 ! 网上的写法是 继承TextView然后生成一个小红点drawable,设置到背景中去, 然后把目标view外层加一层FrameLayout,然后把小红点添加进去 但这样做的问题来了, 小红点与目标View 会叠起来!, 挡住文字,!!! 看得我瞎了~~~ 而且 他们提供的setOffsetX setpad

  • Android实现未读消息小红点显示实例

    目录 代码实现 小红点实现 总结 使用 fragmentLayout 实现,可以把小红点添加到任意 view 上. 效果 添加小红点到 textview 上 添加小红点到 imageview 上 代码实现 首先定义一个圆形 drawable import android.graphics.Canvas; import android.graphics.ColorFilter; import android.graphics.Paint; import android.graphics.Pixel

  • Android未读消息拖动气泡示例代码详解(附源码)

    前言 拖动清除未读消息可以说在很多应用中都很常见,也被用户广泛接受.本文是一个可以供参考的Demo,希望能有帮助. 提示:以下是本篇文章正文内容,下面案例可供参考 最终效果图及思路 实现关键: 气泡中间的两条边,分别是以ab,cd为数据点,G为控制点的贝塞尔曲线. 步骤: 绘制圆背景以及文本:连接情况绘制贝塞尔曲线:另外端点绘制一个圆 关键代码 1.定义,初始化等 状态:静止.连接.分离.消失 在onSizeChanged中初始化状态,固定气泡以及可动气泡的圆心 代码如下(示例): @Overr

随机推荐