Android仿QQ微信未读消息小红点BadgeHelper
Android 小红点 未读消息功能 BadgeHelper
因为最近的项目需求,翻遍github上的未读消息红点开源库, 发现大部分
不能适配不同情况的布局, 所以我写了一个能兼容全部的 !
网上的写法是 继承TextView然后生成一个小红点drawable,设置到背景中去, 然后把目标view外层加一层FrameLayout,然后把小红点添加进去
但这样做的问题来了, 小红点与目标View 会叠起来!, 挡住文字,!!! 看得我瞎了~~~ 而且 他们提供的setOffsetX setpadding 之类的没卵用,你如果想要偏移小红点让它不与下面的View重叠,那是不可能的
所以我的写法是 为了更好的性能,直接继承View然后画小红点背景, 然后把目标view外层加一层LinearLayout 让小红点View放目标的右边,这样就不会重叠
同时 我也支持设置 重叠模式和非重叠模式
这是效果图
由于github账号出问题了,没法上传, 所以写到博客上算了
这只是一个小工具类 供大家学习下我的思路, 就不多说了, 具体实现注释里写的很清楚,不太清楚的可以回复问我
#核心类:
##BadgeHelper .java
package com.truescend.gofit.views;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.annotation.IntDef;
import android.support.design.widget.TabLayout;
import android.util.Log;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.reflect.Field;
/**
* 作者:东芝(2018/8/23).
* 支持 重叠目标模式 和 放目标右上角但不重叠的模式 两种模式 通过setOverlap 设置, 默认为false=不重叠
*/
public class BadgeHelper extends View {
private static final String TAG = "BadgeHelper";
private float density;
private Paint mTextPaint;
private Paint mBackgroundPaint;
private String text = "0";
private int number;
@Type
private int type = Type.TYPE_POINT;
private boolean isOverlap;
private final RectF rect = new RectF();
private int badgeColor = 0xFFD3321B; //默认的小红点颜色
private int textColor = 0xFFFFFFff;
private float textSize;
private int w;
private int h;
private boolean isSetup;
private boolean mIgnoreTargetPadding;
private boolean isCenterVertical;
private int leftMargin;
private int topMargin;
private int rightMargin;
private int bottomMargin;
@IntDef({Type.TYPE_POINT, Type.TYPE_TEXT})
@Retention(RetentionPolicy.SOURCE)
public @interface Type {
int TYPE_POINT = 0;
int TYPE_TEXT = 1;
}
public BadgeHelper(Context context) {
super(context);
}
private void init(@Type int type, boolean isOverlap) {
this.type = type;
this.isOverlap = isOverlap;
density = getResources().getDisplayMetrics().density;
switch (type) {
case Type.TYPE_POINT:
mBackgroundPaint = new Paint();
mBackgroundPaint.setStyle(Paint.Style.FILL);
mBackgroundPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
mBackgroundPaint.setColor(badgeColor);
//计算小红点无文本情况下的小红点大小, 按屏幕像素计算, 如果你有你自己认为更好的算法, 改这里即可
w = h = Math.round(density * 7f);
break;
case Type.TYPE_TEXT:
mBackgroundPaint = new Paint();
mBackgroundPaint.setStyle(Paint.Style.FILL);
mBackgroundPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
mBackgroundPaint.setColor(badgeColor);
mTextPaint = new Paint();
mTextPaint.setStyle(Paint.Style.FILL);
mTextPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setColor(textColor);//文本颜色
if (textSize == 0) {
mTextPaint.setTextSize(density * 10);//文本大小按屏幕像素 计算, 没写死是为了适配各种屏幕, 但如果你有你认为更合理的计算方式 你可以改这里
} else {
mTextPaint.setTextSize(textSize);//使用自定义大小
}
//计算小红点有文本情况下的小红点大小, 按文本宽高计算, 如果你有你自己认为更好的算法, 改这里即可
float textWidth = getTextWidth("99", mTextPaint);
w = h = Math.round(textWidth * 1.4f);//让背景比文本大一点
break;
}
}
/**
* 设置Margin 可用于做偏移
* @param left
* @param top
* @param right
* @param bottom
* @return
*/
public BadgeHelper setBadgeMargins(int left, int top, int right, int bottom) {
leftMargin = left;
topMargin = top;
rightMargin = right;
bottomMargin = bottom;
return this;
}
/**
* 设置Gravity居中
* @return
*/
public BadgeHelper setBadgeCenterVertical( ) {
isCenterVertical = true;
return this;
}
/**
* 设置小红点类型
*
* @param type
* @return
*/
public BadgeHelper setBadgeType(@Type int type) {
this.type = type;
return this;
}
/**
* 设置小红点大小, 默认自动适配
*
* @param textSize
* @return
*/
public BadgeHelper setBadgeTextSize(int textSize) {
Context c = getContext();
Resources r;
if (c == null) {
r = Resources.getSystem();
} else {
r = c.getResources();
}
this.textSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, textSize, r.getDisplayMetrics());
return this;
}
/**
* 设置小红点文字颜色, 默认白
*
* @param textColor
* @return
*/
public BadgeHelper setBadgeTextColor(int textColor) {
this.textColor = textColor;
return this;
}
/**
* 设置重叠模式, 默认是false(不重叠)
*
* @param isOverlap 是否把小红点重叠到目标View之上
* @return
*/
public BadgeHelper setBadgeOverlap(boolean isOverlap) {
return setBadgeOverlap(isOverlap, false);
}
/**
* 设置重叠模式, 默认是false(不重叠)
*
* @param isOverlap 是否把小红点重叠到目标View之上
* @param isIgnoreTargetPadding 是否忽略目标View的padding
* @return
*/
public BadgeHelper setBadgeOverlap(boolean isOverlap, boolean isIgnoreTargetPadding) {
this.isOverlap = isOverlap;
this.mIgnoreTargetPadding = isIgnoreTargetPadding;
if (!isOverlap && isIgnoreTargetPadding) {
Log.w(TAG, "警告:只有重叠模式isOverlap=true 设置mIgnoreTargetPadding才有意义");
}
return this;
}
/**
* 设置小红点颜色
*
* @param mBadgeColor
* @return
*/
public BadgeHelper setBadgeColor(int mBadgeColor) {
this.badgeColor = mBadgeColor;
return this;
}
/**
* 设置小红点大小
*
* @param w
* @param h
* @return
*/
public BadgeHelper setBadgeSize(int w, int h) {
this.w = w;
this.h = h;
return this;
}
/**
* 是否显示
* @param enable
*/
public void setBadgeEnable(boolean enable) {
setVisibility(enable?VISIBLE:INVISIBLE);
}
/**
* 设置小红点的文字
*
* @param number
*/
public void setBadgeNumber(int number) {
this.number = number;
this.text = String.valueOf(number);
if (isSetup) {
if(number==0){
setVisibility(INVISIBLE);
}else{
setVisibility(VISIBLE);
}
invalidate();
}
}
public void bindToTargetView(TabLayout target, int tabIndex) {
TabLayout.Tab tab = target.getTabAt(tabIndex);
View targetView = null;
View tabView = null;
try {
Field viewField = TabLayout.Tab.class.getDeclaredField("mView");
viewField.setAccessible(true);
targetView = tabView = (View) viewField.get(tab);
} catch (Exception e) {
e.printStackTrace();
}
try {
if (tabView != null) {
Field mTextViewField = tabView.getClass().getDeclaredField("mTextView");//"mIconView"
mTextViewField.setAccessible(true);
targetView = (View) mTextViewField.get(tabView);
}
} catch (Exception e) {
e.printStackTrace();
}
if (targetView != null) {
bindToTargetView(targetView);
}
}
/**
* 绑定小红点到目标View的右上角
*
* @param target
*/
public void bindToTargetView(View target) {
init(type, isOverlap);
if (getParent() != null) {
((ViewGroup) getParent()).removeView(this);
}
if (target == null) {
return;
}
if (target.getParent() instanceof ViewGroup) {
ViewGroup parent = (ViewGroup) target.getParent();
int groupIndex = parent.indexOfChild(target);
parent.removeView(target);
if (isOverlap) {//[小红点与目标View重叠]模式
FrameLayout badgeContainer = new FrameLayout(getContext());
ViewGroup.LayoutParams targetLayoutParams = target.getLayoutParams();
badgeContainer.setLayoutParams(targetLayoutParams);
target.setLayoutParams(new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
parent.addView(badgeContainer, groupIndex, targetLayoutParams);
badgeContainer.addView(target);
badgeContainer.addView(this);
FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) getLayoutParams();
if(isCenterVertical) {
layoutParams.gravity = Gravity.CENTER_VERTICAL ;
}else{
layoutParams.gravity = Gravity.END | Gravity.TOP;
}
if (mIgnoreTargetPadding) {
layoutParams.rightMargin = target.getPaddingRight() - w;
layoutParams.topMargin = target.getPaddingTop() - h / 2;
}
setLayoutParams(layoutParams);
} else {//[小红点放右侧]模式
LinearLayout badgeContainer = new LinearLayout(getContext());
badgeContainer.setOrientation(LinearLayout.HORIZONTAL);
ViewGroup.LayoutParams targetLayoutParams = target.getLayoutParams();
badgeContainer.setLayoutParams(targetLayoutParams);
target.setLayoutParams(new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
parent.addView(badgeContainer, groupIndex, targetLayoutParams);
badgeContainer.addView(target);
badgeContainer.addView(this);
if(isCenterVertical) {
badgeContainer.setGravity(Gravity.CENTER_VERTICAL);
}
}
boolean hasSetMargin = leftMargin>0||topMargin>0||rightMargin>0||bottomMargin>0;
if (hasSetMargin&&getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) getLayoutParams();
p.setMargins(leftMargin, topMargin, rightMargin, bottomMargin);
setLayoutParams(p);
}
isSetup = true;
} else if (target.getParent() == null) {
throw new IllegalStateException("目标View不能没有父布局!");
}
if(number==0){
setVisibility(INVISIBLE);
}else{
setVisibility(VISIBLE);
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (w > 0 && h > 0) {
setMeasuredDimension(w, h);
} else {
throw new IllegalStateException("如果你自定义了小红点的宽高,就不能设置其宽高小于0 ,否则请不要设置!");
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//这里不用解释了 很简单 就是画一个圆形和文字
rect.left = 0;
rect.top = 0;
rect.right = getWidth();
rect.bottom = getHeight();
canvas.drawRoundRect(rect, getWidth() / 2, getWidth() / 2, mBackgroundPaint);
if (type == Type.TYPE_TEXT) {
float textWidth = getTextWidth(text, mTextPaint);
float textHeight = getTextHeight(text, mTextPaint);
canvas.drawText(text, getWidth() / 2 - textWidth / 2, getHeight() / 2 + textHeight / 2, mTextPaint);
}
}
private float getTextWidth(String text, Paint p) {
return p.measureText(text, 0, text.length());
}
private float getTextHeight(String text, Paint p) {
Rect rect = new Rect();
p.getTextBounds(text, 0, text.length(), rect);
return rect.height();
}
}
#使用示例:
public class Main2Activity extends AppCompatActivity {
private TextView mVTypeA;
private TextView mVTypeB;
private TextView mVTypeC;
private TextView mVTypeD;
private ImageView mVTypeE;
private TabLayout mTabLayout;
private void initView() {
mVTypeA = (TextView) findViewById(R.id.vTypeA);
mVTypeB = (TextView) findViewById(R.id.vTypeB);
mVTypeC = (TextView) findViewById(R.id.vTypeC);
mVTypeD = (TextView) findViewById(R.id.vTypeD);
mVTypeE = (ImageView) findViewById(R.id.vTypeE);
mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
initView();
//情况A(有margin时)
new BadgeHelper(this)
.setBadgeType(BadgeHelper.Type.TYPE_POINT)
.setBadgeOverlap(false)
.bindToTargetView(mVTypeA);
//情况B(有padding时)
new BadgeHelper(this)
.setBadgeType(BadgeHelper.Type.TYPE_POINT)
.setBadgeOverlap(true, true)//重叠模式+忽略目标ViewPadding 效果, 什么意思? 你可以把第二个参数写成false看看会发生什么
.bindToTargetView(mVTypeB);
//情况C(默认情况)
BadgeHelper badgeHelperC = new BadgeHelper(this)
.setBadgeType(BadgeHelper.Type.TYPE_TEXT)
.setBadgeOverlap(false);
badgeHelperC.bindToTargetView(mVTypeC);
badgeHelperC.setBadgeNumber(6);//数字模式
//情况D(有权重时)
new BadgeHelper(this)
.setBadgeColor(0xff0f00ff)//顺便演示下 小红点颜色的设置
.setBadgeType(BadgeHelper.Type.TYPE_POINT)
.setBadgeOverlap(false)
.bindToTargetView(mVTypeD);
//情况E(小红点与图片重叠)+ 数字模式
BadgeHelper badgeHelperE = new BadgeHelper(this)
.setBadgeType(BadgeHelper.Type.TYPE_TEXT)
.setBadgeOverlap(true, true);//注意 isIgnoreTargetPadding=true时 和 setBadgeMargins 不能同时使用
//.setBadgeSize(100,100)//设置小红点的大小, 如果未设置则使用默认宽高, 一般默认就好
//.setBadgeTextSize(15) //设置文本大小, 不设置 则使用默认, 一般默认就好
badgeHelperE.bindToTargetView(mVTypeE);
//任意地方可以刷新数字
badgeHelperE.setBadgeNumber(58);//数字
//情况F(TabLayout兼容)
BadgeHelper badgeHelperF = new BadgeHelper(this)
.setBadgeType(BadgeHelper.Type.TYPE_TEXT)
.setBadgeCenterVertical()//红点居中
.setBadgeMargins(10,0,0,0)//偏移一下
.setBadgeOverlap(false);
badgeHelperF.bindToTargetView(mTabLayout, 0);
badgeHelperF.setBadgeNumber(5);
new BadgeHelper(this)
.setBadgeType(BadgeHelper.Type.TYPE_POINT)
.setBadgeCenterVertical()//红点居中
.setBadgeMargins(10,0,0,0)//偏移一下
.setBadgeOverlap(false)
.bindToTargetView(mTabLayout,1);
}
}
#布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp"
tools:context="com.mx.test12.Main2Activity">
<TextView
android:background="#220000ff"
android:id="@+id/vTypeA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:text="情况A(有margin时)" />
<TextView
android:background="#2200ff00"
android:id="@+id/vTypeB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="30dp"
android:text="情况B(有padding时)" />
<TextView
android:id="@+id/vTypeC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="情况C(默认情况)" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:background="#2200ffff"
android:id="@+id/vTypeD"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="情况D(有权重时)" />
<View
android:layout_width="0dp"
android:layout_height="0dp" />
</LinearLayout>
<ImageView
android:id="@+id/vTypeE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="情况E(与图片重叠)"
android:padding="20dp"
android:src="@mipmap/ic_launcher" />
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="55dp"
app:layout_scrollFlags="scroll"
app:tabIndicatorColor="#057523"
app:tabIndicatorHeight="2.0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#057523"
app:tabTextColor="#ced0d3">
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="聊天列表" />
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="好友列表" />
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="设置" />
</android.support.design.widget.TabLayout>
</LinearLayout>
到此这篇关于Android仿QQ微信未读消息小红点BadgeHelper的文章就介绍到这了,更多相关Android小红点内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
赞 (0)
相关推荐
-
Android未读消息拖动气泡示例代码详解(附源码)
前言 拖动清除未读消息可以说在很多应用中都很常见,也被用户广泛接受.本文是一个可以供参考的Demo,希望能有帮助. 提示:以下是本篇文章正文内容,下面案例可供参考 最终效果图及思路 实现关键: 气泡中间的两条边,分别是以ab,cd为数据点,G为控制点的贝塞尔曲线. 步骤: 绘制圆背景以及文本:连接情况绘制贝塞尔曲线:另外端点绘制一个圆 关键代码 1.定义,初始化等 状态:静止.连接.分离.消失 在onSizeChanged中初始化状态,固定气泡以及可动气泡的圆心 代码如下(示例): @Overr
-
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
-
前端与RabbitMQ实时消息推送未读消息小红点实现示例
目录 引言 RabbitMQ 搭建 1.开启 mqtt 协议 服务端消息发送 1.mqtt 客户端依赖包 2.消息发送者 前端消息订阅 测试 总结 引言 前几天粉丝群里有个小伙伴问过:web 页面的未读消息(小红点)怎么实现比较简单,刚好本周手头有类似的开发任务,索性就整理出来供小伙伴们参考,没准哪天就能用得上呢. 之前在 <springboot + rabbitmq 做智能家居> 中说过可以用 rabbitmq 的 MQTT 协议做智能家居的指令推送,里边还提到过能用 MQTT 协议做 we
-
Android仿QQ微信侧滑删除效果
仿QQ侧滑删除效果图 1.自定义listview public class DragDelListView extends ListView { private boolean moveable=false; private boolean closed=true; private float mDownX,mDownY; private int mTouchPosition,oldPosition=-1; private DragDelItem mTouchView,oldView; priv
-
Android仿QQ微信实时监测网络状态
先简单说一下思路:网络变化时系统会发出广播.所以我们监听这个广播,利用接口回调通知activity做相应的操作就好了. 思路 判断网络状态(写个工具类NetUtil) 写个类继承BroadcastReceiver(不要忘记在清单文件中注册) 需要在清单文件中添加权限 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"> </uses-permission> 回调接口(Ne
-
Android仿QQ滑动弹出菜单标记已读、未读消息
在上一篇<Android仿微信滑动弹出编辑.删除菜单效果.增加下拉刷新功能>里,已经带着大家学习如何使用SwipeMenuListView这一开源库实现滑动列表弹出菜单,接下来,将进一步学习,如何为不同的list item呈现不同的菜单,此处我们做一个实例:Android 高仿QQ滑动弹出菜单标记已读.未读消息,看下效果图: 1. 创建项目,并导入SwipeMenuListView类库 2. 创建消息实体bean: public class Msg { public int id; publi
-
Android仿微信底部菜单栏功能显示未读消息数量
底部菜单栏很重要,我看了一下很多应用软件都是用了底部菜单栏,这里使用了tabhost做了一种通用的(就是可以像微信那样显示未读消息数量的,虽然之前也做过但是layout下的xml写的太臃肿,这里去掉了很多不必要的层,个人看起来还是不错的,所以贴出来方便以后使用). 先看一下做出来之后的效果: 以后使用的时候就可以换成自己项目的图片和字体了,主框架不用变哈哈, 首先是要布局layout下xml文件 main.xml: <?xml version="1.0" encoding=&qu
-
Android贝塞尔曲线初步学习第二课 仿QQ未读消息气泡拖拽黏连效果
上一节初步了解了Android端的贝塞尔曲线,这一节就举个栗子练习一下,仿QQ未读消息气泡,是最经典的练习贝塞尔曲线的东东,效果如下 附上github源码地址:https://github.com/MonkeyMushroom/DragBubbleView 欢迎star~ 大体思路就是画两个圆,一个黏连小球固定在一个点上,一个气泡小球跟随手指的滑动改变坐标.随着两个圆间距越来越大,黏连小球半径越来越小.当间距小于一定值,松开手指气泡小球会恢复原来位置:当间距超过一定值之后,黏连小球消失,气泡小球
-
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 未读消息的红点显示
在很多APP里面,经常会看到未读消息的小红点,如下图: 这个功能用到的是一个控件,叫做BadgeView. BadgeView的用法很简单,直接把jar文件导入包中就可以使用,使用也很简单, badgeView = new BadgeView(this); //btn是控件 badgeView.setTargetView(btn); //设置相对位置 badgeView.setBadgeMargin(0, 5, 15, 0); //设置显示未读消息条数 badgeView.setBadgeCou