想全局统一个小红点样式，总是改了这个忘了其他的，而且小红点格式各样，总是满足不了自己的需求，所以心血来潮自己自定义View onDraw了一个。
可前往查看GitHub源码.
效果就是这样....
BadgeView_preview.gif
一定要记得在attrs.xml 项目中添加
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="BadgeView">
<attr name="iconSrc" format="reference"/>
<attr name="iconWidth" format="dimension"/>
<attr name="iconHeight" format="dimension"/>
<!--若是icon是正方形的,可直接设置这个参数-->
<attr name="iconSize" format="dimension"/>
<attr name="text" format="string"/>
<attr name="textSize" format="dimension"/>
<attr name="textColor" format="color"/>
<attr name="badgeNum" format="integer"/>
<!--是否显示数字, 为false时只显示小红点; 没有数字时,小红点的大小通过badgeSize设置-->
<attr name="showNum" format="boolean"/>
<attr name="badgeBackgroundColor" format="color"/>
<!--限制设置小红点的大小不能超过数字显示模式(代码中也做了限制); 显示在文字模式大小的左下角;-->
<!-- 不显示数字时, 小红点的大小, 不包括边线-->
<attr name="badgeRedSize" format="dimension"/>
<attr name="badgeNumSize" format="dimension"/>
<attr name="badgeNumColor" format="color"/>
<!--若小红点有边缘线,加上边缘线-->
<attr name="badgeBorderColor" format="color"/>
<attr name="badgeBorderWidth" format="dimension"/>
<!--badge相对于主体右上角的相对位置, 重叠的部分的大小; 可以设置负值-->
<!--默认是( badgeHeight/2 ), 正好覆盖一个角-->
<attr name="badgeBottom" format="dimension"/>
<attr name="badgeLeft" format="dimension"/>
<!-- 有些设计要求未读前面加"+", (至少我们设计师这么设计) 显示成 +1/+34/+99-->
<attr name="badgeNumPre" format="string"/>
</declare-styleable>
</resources>
主要代码如下：
public class BadgeView extends View {
////可设置部分 start///////////////////////////////////////////////
// 主体部分的设置 icon
private int iconSrc;
private float iconWidth;
private float iconHeight;
// 没有icon 就是文字描述了; icon的优先级比text高
private String text;
private int textColor;
private float textSize;
// 未读数; 在显示的时候 未读数默认显示形式9/23/99+
private int badgeNum;
private int badgeBackgroundColor;
private int badgeNumColor;
private float badgeNumSize;
// 是否显示数字, 默认显示小红点
private boolean showNum;
// 不显示数字时, 小红点的大小, 不包括边线
private float badgeRedSize;
// 边线, 有些小红点外边有白边, 若是设置了宽度,则会添加边线; 边线算在Badge整个的大小当中
private float badgeBorderWidth;
private int badgeBorderColor;
// 有些设计要求未读前面加"+", (至少我们设计师这么设计) 显示成 +1/+34/+99
private String badgeNumPre;
// badge的左下角 相对于 text/icon 右上角的相对位置,
// 默认是( badgeHeight/2 ), 正好覆盖一个角
private float badgeBottom;
private float badgeLeft;
// 是否自己设置了
private boolean hasBadgeBottomAttr;
private boolean hasBadgeLeftAttr;
// view设置的padding
private float viewPaddingLeft;
private float viewPaddingTop;
private float viewPaddingRight;
private float viewPaddingBootom;
////可设置部分 end///////////////////////////////////////////////
// 小红点真实大小 比 文本 的margin(不包括白边)
private static final int BADGE_TEXT_MARGIN_LEFT = 10;
private static final int BADGE_TEXT_MARGIN_TOP = 6;
private static final int BADGE_TEXT_MARGIN_RIGHT = 10;
private static final int BADGE_TEXT_MARGIN_BOOTOM = 6;
// 可以设置padding
private static final int VIEW_PADDING = 0;
////以下是辅助变量///////////////////////////////////////////////
// 整个View的真实大小
private float viewHeight;
private float viewWidth;
// 内容所占的大小, 内容居中
private float viewMinHeight;
private float viewMinWidth;
// 小红点有向右突出部分,为保证主体部分水平居中, 需要设置两边的margin
private float mainMarginHorizontal;
// 小红点有向上突出部分,就算没有未读数,也需要预留出位置, 设置Top即可
private float mainMarginTop;
// 描述文字或者icon的宽高
private float mainWidth;
private float mainHeight;
// badge的整体宽高
private float badgeHeight;
private float badgeWidth;
// badgeNum/小红点 的真实宽高
private float badgeNumHeight;
private float badgeNumWidth;
// icon
private Bitmap iconBitmap;
// 未读数显示的文案; 未读数默认显示形式9/23/99+
private String showUneadText;
// 画笔
private Paint contentPaint;
private TextPaint textPaint;
private TextPaint badgeNumPaint;
public BadgeView(Context context) {
this(context, null);
}
public BadgeView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
public BadgeView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
private void init(Context context, AttributeSet attrs) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.BadgeView);
iconSrc = array.getResourceId(R.styleable.BadgeView_iconSrc, 0);
float iconSize = array.getDimension(R.styleable.BadgeView_iconSize, dip2px(30));
iconWidth = array.getDimension(R.styleable.BadgeView_iconWidth, iconSize);
iconHeight = array.getDimension(R.styleable.BadgeView_iconHeight, iconSize);
text = array.getString(R.styleable.BadgeView_text);
if (TextUtils.isEmpty(text)) {
text = "Hello World";
}
textColor = array.getColor(R.styleable.BadgeView_textColor, Color.BLACK);
textSize = array.getDimension(R.styleable.BadgeView_textSize, sp2px(16));
badgeNum = array.getInteger(R.styleable.BadgeView_badgeNum, 0);
badgeBackgroundColor = array.getColor(R.styleable.BadgeView_badgeBackgroundColor, Color.rgb(0xFF, 0x76, 0x90));
badgeNumColor = array.getColor(R.styleable.BadgeView_badgeNumColor, Color.WHITE);
badgeNumSize = array.getDimension(R.styleable.BadgeView_badgeNumSize, sp2px(10));
badgeNumSize = array.getDimension(R.styleable.BadgeView_badgeNumSize, sp2px(10));
showNum = array.getBoolean(R.styleable.BadgeView_showNum, true);
badgeRedSize = array.getDimension(R.styleable.BadgeView_badgeRedSize, dip2px(8));
badgeBorderColor = array.getColor(R.styleable.BadgeView_badgeBorderColor, Color.WHITE);
badgeBorderWidth = array.getDimension(R.styleable.BadgeView_badgeBorderWidth, 0);
if (badgeBorderWidth < 0) {
badgeBorderWidth = 0;
}
badgeNumPre = array.getString(R.styleable.BadgeView_badgeNumPre);
// 初始化badgeNum的画笔
badgeNumPaint = new TextPaint();
badgeNumPaint.setAntiAlias(true);
badgeNumPaint.setColor(badgeNumColor);
badgeNumPaint.setTextSize(badgeNumSize);
badgeNumPaint.setTextAlign(Paint.Align.CENTER);
// 计算 未读数的高度
String minBadge = getUnreadText(0);
Rect minBadgeRect = new Rect();
badgeNumPaint.getTextBounds(minBadge, 0, minBadge.length(), minBadgeRect);
// 计算badge的高度
badgeNumHeight = minBadgeRect.height();
badgeHeight = badgeNumHeight + BADGE_TEXT_MARGIN_TOP + BADGE_TEXT_MARGIN_BOOTOM + badgeBorderWidth * 2;
// 限制设置小红点的大小不能超过数字显示模式; 显示在文字模式大小的左下角
if (badgeRedSize > badgeNumHeight + BADGE_TEXT_MARGIN_TOP + BADGE_TEXT_MARGIN_BOOTOM) {
badgeRedSize = badgeNumHeight + BADGE_TEXT_MARGIN_TOP + BADGE_TEXT_MARGIN_BOOTOM;
}
// 获取位置
hasBadgeBottomAttr = array.hasValue(R.styleable.BadgeView_badgeBottom);
hasBadgeLeftAttr = array.hasValue(R.styleable.BadgeView_badgeLeft);
badgeBottom = array.getDimension(R.styleable.BadgeView_badgeBottom, 0);
badgeLeft = array.getDimension(R.styleable.BadgeView_badgeLeft, 0);
//关闭清空TypedArray
array.recycle();
// 初始化主体文字描述的画笔
textPaint = new TextPaint();
textPaint.setAntiAlias(true);
textPaint.setColor(textColor);
textPaint.setTextSize(textSize);
textPaint.setTextAlign(Paint.Align.CENTER);
contentPaint = new Paint();
contentPaint.setAntiAlias(true);
}
public void setBadgeNum(int badgeNum) {
this.badgeNum = badgeNum;
}
public void setShowNum(boolean isShow) {
this.showNum = isShow;
}
public void setIconSrc(int res) {
this.iconSrc = res;
}
public void setBadgeLocation(float bottom, float left) {
this.badgeBottom = bottom;
this.badgeLeft = left;
hasBadgeBottomAttr = true;
hasBadgeLeftAttr = true;
}
/**
* 重新计算绘制这个View
*/
public void redraw() {
// 需要重新计算高宽,所以用这个
requestLayout();
// invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (viewWidth != viewMinWidth || viewHeight != viewMinHeight) {
canvas.save();
// 若是设置的高宽大于所需要的高宽, 对画布进行操作
float paddingLeft = viewPaddingLeft + (viewWidth - viewPaddingLeft - viewPaddingRight - viewMinWidth) / 2;
float paddingTop = viewPaddingTop + (viewHeight -viewPaddingTop -viewPaddingBootom - viewMinHeight) / 2;
// 移动布局, 改变原点
canvas.translate(paddingLeft, paddingTop);
}
onDrawContent(canvas);
if (viewWidth != viewMinWidth || viewHeight != viewMinHeight) {
canvas.restore();
}
}
/**
* 绘制整个内容
* @param canvas
*/
private void onDrawContent(Canvas canvas) {
if (iconSrc != 0) {
// 画icon
canvas.drawBitmap(iconBitmap, mainMarginHorizontal + (mainWidth - iconWidth) / 2, mainMarginTop + (mainHeight - iconHeight) / 2, contentPaint);
} else {
// 写text, 文字是居中的
canvas.drawText(text, viewMinWidth / 2, viewMinHeight, textPaint);
}
if (badgeNum > 0) {
canvas.save();
// 移动布局, 改变原点
canvas.translate(viewMinWidth - badgeWidth, 0);
oDrawBadge(canvas);
canvas.restore();
}
}
private void oDrawBadge(Canvas canvas) {
// 若有小红点有边缘线, 画边缘线
if (badgeBorderWidth > 0) {
contentPaint.setStyle(Paint.Style.STROKE);
contentPaint.setColor(badgeBorderColor);
contentPaint.setStrokeWidth(badgeBorderWidth);
if (!showNum) {
// 不显示数字
canvas.drawCircle(badgeWidth / 2, badgeHeight - badgeRedSize / 2 - badgeBorderWidth, badgeRedSize / 2, contentPaint);
} else if (badgeWidth == badgeHeight) {
// 显示是字符串长度为1时, 为正圆
canvas.drawCircle(badgeWidth / 2, badgeHeight / 2, badgeWidth / 2, contentPaint);
} else {
// 椭圆
Path borderPath = new Path();
borderPath.addArc(new RectF(0, 0, badgeHeight, badgeHeight), 90, 180);
borderPath.lineTo(badgeWidth - badgeHeight / 2, 0);
borderPath.addArc(new RectF(badgeWidth - badgeHeight, 0, badgeWidth, badgeHeight), 270, 180);
borderPath.lineTo(badgeHeight / 2, badgeHeight);
canvas.drawPath(borderPath, contentPaint);
}
}
contentPaint.setColor(badgeBackgroundColor);
contentPaint.setStyle(Paint.Style.FILL);
if (showNum) {
// 绘制红色背景图
Path path = new Path();
path.addArc(new RectF(badgeBorderWidth, badgeBorderWidth, badgeHeight - badgeBorderWidth, badgeHeight - badgeBorderWidth), 90, 180);
path.lineTo(badgeWidth - badgeHeight / 2 + badgeBorderWidth, badgeBorderWidth);
path.addArc(new RectF(badgeWidth - badgeHeight + badgeBorderWidth, badgeBorderWidth, badgeWidth - badgeBorderWidth, badgeHeight - badgeBorderWidth), 270, 180);
path.lineTo(badgeHeight / 2 - badgeBorderWidth, badgeHeight - badgeBorderWidth);
canvas.drawPath(path, contentPaint);
// 写上数字
canvas.drawText(showUneadText, badgeWidth / 2, badgeHeight - BADGE_TEXT_MARGIN_BOOTOM - badgeBorderWidth, badgeNumPaint);
} else {
// 画实心圆
canvas.drawCircle(badgeRedSize / 2 + badgeBorderWidth, badgeHeight - badgeRedSize / 2 - badgeBorderWidth, badgeRedSize / 2, contentPaint);
}
}
private void intParams() {
// 初始化主体的一些数据
if (iconSrc != 0) {
mainHeight = iconHeight;
mainWidth = iconWidth;
if (iconBitmap == null) {
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), iconSrc);
// 缩放图片
int width = bitmap.getWidth();
int height = bitmap.getHeight();
// 保证icon的scaleType="fitCenter"
// 获取图片的长边
float length = width > height ? width : height;
// 获取外框的最小边
float size = iconWidth > iconHeight ? iconHeight : iconWidth;
// 让图片按照长边进行缩放
float scale = size / length;
Matrix matrix = new Matrix();
matrix.postScale(scale, scale);
iconBitmap = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
}
// 因为icon是fitCenter, 所以有真实大小
iconWidth = iconBitmap.getWidth();
iconHeight = iconBitmap.getHeight();
} else {
// 字符描述文字的大小
Rect descRect = new Rect();
textPaint.getTextBounds(text, 0, text.length(), descRect);
mainWidth = descRect.width();
mainHeight = descRect.height();
}
// 初始化Badge的数据
if (showNum) {
showUneadText = getUnreadText(badgeNum);
Rect badgeRect = new Rect();
badgeNumPaint.getTextBounds(showUneadText, 0, showUneadText.length(), badgeRect);
badgeNumWidth = badgeRect.width();
if (showUneadText.length() == 1) {
// 当长度为1的时候,显示正圆
badgeWidth = badgeHeight;
} else {
badgeWidth = badgeNumWidth + BADGE_TEXT_MARGIN_LEFT + BADGE_TEXT_MARGIN_RIGHT + badgeBorderWidth * 2;
}
} else {
badgeWidth = badgeRedSize + badgeBorderWidth * 2;
}
// badgeHeight在构造方法中初始化了, 全部使用数字模式的高度
// Badge位置设置的范围做一个限制
if (!hasBadgeLeftAttr || badgeLeft > mainWidth) {
badgeLeft = getBadgeDefaultLocation();
}
if (!hasBadgeBottomAttr || badgeBottom > mainHeight) {
badgeBottom = getBadgeDefaultLocation();
}
// 计算整体内容的大小
mainMarginHorizontal = badgeWidth - badgeLeft;
mainMarginTop = badgeHeight - badgeBottom;
viewMinWidth = mainWidth + mainMarginHorizontal * 2;
viewMinHeight = mainHeight + mainMarginTop;
}
/**
* 获取默认的位置
* @return
*/
private float getBadgeDefaultLocation() {
// 文字的时候默认往上些, 盖住文字了
return iconSrc != 0 ? (showNum ? badgeHeight / 2 : badgeRedSize / 2 + badgeBorderWidth) : badgeRedSize / 2 + badgeBorderWidth - 3;
}
/**
* 构造未读数显示的文本
* 1) 未读数默认显示形式9/23/99+
* 2) 有些设计要求未读前面加"+", (至少我们设计师这么设计) 显示成 +1/+34/+99, 取配置badgeNumPre
* @param unread
* @return
*/
private String getUnreadText(int unread) {
String text = String.valueOf(unread);
if (TextUtils.isEmpty(badgeNumPre)) {
if (unread > 99) {
text = "99+";
}
} else {
if (unread > 99) {
text = badgeNumPre + "99";
} else if (unread >= 0) {
text = badgeNumPre + unread;
}
}
return text;
}
private int dip2px(int dpValue) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, getResources().getDisplayMetrics());
}
private int sp2px(int spValue) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spValue, getResources().getDisplayMetrics());
}
/**
* android-自定义View解决wrap_content无效的问题
* see https://my.oschina.net/ccqy66/blog/616662
* @param widthMeasureSpec
* @param heightMeasureSpec
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 计算高宽
intParams();
viewPaddingLeft = getPaddingLeft();
viewPaddingTop = getPaddingTop();
viewPaddingRight = getPaddingRight();
viewPaddingBootom = getPaddingBottom();
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
//Measure Width
if (widthMode == MeasureSpec.EXACTLY) {
// 设置的大小不能比内容还小
viewWidth = widthSize < viewMinWidth ? viewMinWidth : widthSize;
} else {
viewWidth = viewMinWidth;
}
viewWidth += viewPaddingLeft + viewPaddingRight;
//Measure Height
if (heightMode == MeasureSpec.EXACTLY) {
// 设置的大小不能比内容还小
viewHeight = heightSize < viewMinHeight ? viewMinHeight : heightSize;
} else {
viewHeight = viewMinHeight;
}
if (viewHeight < viewMinHeight + VIEW_PADDING * 2) {
viewHeight = viewMinHeight + VIEW_PADDING * 2;
}
viewHeight += viewPaddingTop + viewPaddingBootom;
//MUST CALL THIS
setMeasuredDimension((int) Math.ceil(viewWidth), (int) Math.ceil(viewHeight));
}
}
