Android UI 新消息提醒_BadgeView Plus

直接上图：废话少说：



这就是效果图，什么小红点，消息数目，甚至是图片，表情，要什么有什么堪称强大！我们暂且称它为BadgeView Plus ！

BP的调用很简单：

首先引入BudgeView的lib库；

然后再要实现消息提醒的类中实现IAnimationListener动画监听（如果需要消息变化内容的动画）

最后调用BudgetView中AnimationSet的add方法就可以了！

简单例子如下：

badgeView = (BadgeView) findViewById(R.id.badge_view);
btnsContainer = findViewById(R.id.btns_container);

findViewById(R.id.btn_add).setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
badgeView.setValue(++value);
}
});

findViewById(R.id.btn_sub).setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
badgeView.setValue(--value);
}
});

final int duration = 300;

badgeView.postDelayed(new Runnable() {
@Override public void run() {

new BadgeView.AnimationSet(badgeView)
.add("2", duration)
.add("1", duration)
.add("0", duration)
.add("Text sample! ", duration)
.play(SampleActivity.this);
}
}, 1000);

下面我们要深入研究下，BadgeView 底层是如何实现的呢？

原来它爹是AbstractBadgeView，主要的背景改变切换大小都是在这里实现的(ChangeLayoutSizeAnimation)。

进入BadgeView ，看看初始化实现了什么东东：

public BadgeView(Context context) {
super(context);
this.config();
}
//配置画布
private void config() {
this.configTextPaint();
//设置画布位置，画笔颜色等
//applyDimension 转化长度对应的形状
this.textPaint.setTextSize(TypedValue.applyDimension(2, 18.0F, this.getResources().getDisplayMetrics()));
this.textPaint.setColor(-1);
this.valueCenter = new TextValue(" ", this.textPaint);
this.valueTop = new TextValue(" ", this.textPaint);
this.valueBottom = new TextValue(" ", this.textPaint);
}
//初始化的时候传参，初始化就用handleAttributes方法传递数据
//这个方法里主要是针对数据初始化，一个数组TypedArray
//回收 TypedArray,用于后续调用时可复用之。当调用该方法后，不能再操作该变量。
//bitmapResource,哈哈，就是这里支持传递图片
private void handleAttributes(Context context, AttributeSet attrs) {
TypedArray array = getContext().obtainStyledAttributes(attrs, R.styleable.BadgeView);
CharSequence text = array.getText(R.styleable.BadgeView_badgeText);
textPaint.setTextSize(array.getDimension(R.styleable.BadgeView_badgeTextSize, DEFAULT_TEXT_SIZE));
textPaint.setColor(array.getColor(R.styleable.BadgeView_badgeTextColor, DEFAULT_TEXT_COLOR));
int bitmapResource = array.getResourceId(R.styleable.BadgeView_badgeBitmap, -1);
array.recycle();

if (text != null && bitmapResource != -1) {
throw new IllegalArgumentException("Trying to pass badgeText and badgeBitmap attrs simultaneously.");
} else if (text != null) {
valueCenter = new TextValue(text, textPaint);
} else if (bitmapResource != -1) {
valueCenter = new BitmapValue(BitmapFactory.decodeResource(context.getResources(), bitmapResource));
}
}
//接下来是TextValue、BitmapValue这两个都是继承自IValue，里面有计算显示高度，画图形的方法实现
public TextValue(@NonNull CharSequence value, Paint paint) {
this.paint = paint;
setValue(value);
}
//Background类设置相关背景
public void draw(Canvas canvas) {
path.reset();
float radius = Math.min(bounds.width(), bounds.height()) / 2;
path.addRoundRect(bounds, radius, radius, Path.Direction.CW);
canvas.drawPath(path, fillPaint);
}

很多需要自定义的东西还需仔细研读源码，定制自己App的BadgeView！

干货代码Demo在下面哈：

Demo

点击下载