Android 带角标的ImageView（微博，QQ消息提示）

上周项目需要写了个简单的小View，带角标的图片按钮
思路很简单，直接继承ImageView,然后在右上角绘制一块角标

角标绘制过程：用画笔量出一个字符的宽度作为角标背景的半径（R），然后判断传入字符串的总长度
如果只有一位字符：那么就以 R 为半径，画一个圆，然后在圆中写上数字
如果有两位以上的字符，就不能单纯用一个圆了，用画笔测量字符串的完整长度( len )，然后在右上角画一个圆，在这个圆的圆心左边 len 长度的位置 作为圆心再画一个圆，最后以这个两个圆的上下顶点（一共四个）构成一个矩形，进行填充

效果如下：

使用方法：

//设置角标内容，和角标字号(sp)mCornerImageView .setCornerText(item.category_number, 12);mCornerImageView .setCornerLocation(0, 50);//设置角标距离右上角偏移量top、right(默认紧贴右上角，有需要特殊位置可以调这两个参数)

代码：

public class CornerImageView extends ImageView {    private Paint mCirclePaint;//角标画笔    private Paint mTextPaint;//角标数字画笔    private String cornerText = "";//角标需要显示的内容    private float textWidth;//字体单位宽度    private float textSize = 50;//字体大小    private float cornerTop = 0;//角标位置top距离    private float cornerRight = 0;//角标位置right距离    public CornerImageView(Context context) {        super(context);        init();    }    public CornerImageView(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    private void init() {        mCirclePaint = new Paint();        mCirclePaint.setAntiAlias(true);        mCirclePaint.setStrokeWidth(1);        mCirclePaint.setColor(ContextCompat.getColor(getContext(), R.color.orange));        mTextPaint = new Paint();        mTextPaint.setAntiAlias(true);        mTextPaint.setTextSize(textSize);        mTextPaint.setColor(ContextCompat.getColor(getContext(), R.color.white));    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //如果角标无内容则不显示角标        if (TextUtils.isEmpty(cornerText))            return;        //如果只有一位字符，只需要一个圆        float circleCenterX = getWidth() - textWidth - getPaddingRight() - cornerRight;//圆心X        float circleCenterY = textWidth + getPaddingTop() + cornerTop;//圆心Y        if (cornerText.length() == 1) {            canvas.drawCircle(circleCenterX, circleCenterY, textWidth, mCirclePaint);            canvas.drawText(cornerText, circleCenterX - textWidth / 2, circleCenterY + textWidth / 2, mTextPaint);        } else {//如果超过两位字符 绘制两个圆，圆之间用矩形填充            //文字宽度            float width = mTextPaint.measureText(cornerText);            //第一个圆            canvas.drawCircle(circleCenterX, circleCenterY, textWidth, mCirclePaint);            //第二个圆            float circle2CenterX = circleCenterX - width + textWidth;//圆心X            canvas.drawCircle(circle2CenterX, circleCenterY, textWidth, mCirclePaint);            //矩形填充            canvas.drawRect(circle2CenterX, 0, circleCenterX, circleCenterY + textWidth, mCirclePaint);            canvas.drawText(cornerText, circle2CenterX - textWidth / 2, circleCenterY + textWidth / 2, mTextPaint);        }    }    /**     * 设置角标文字     *     * @param text 角标内容     * @param size 字体大小（SP）     */    public void setCornerText(String text, float size) {        //角表内容        if (!TextUtils.isEmpty(text))            this.cornerText = text;        //设置画笔字号        textSize = sp2px(getContext(), size);        mTextPaint.setTextSize(textSize);        //角标高度，取第一个字符的高度        if (!TextUtils.isEmpty(cornerText))            textWidth = mTextPaint.measureText(cornerText.substring(0, 1));    }    /**     * 设置角标文字     *     * @param text      角标内容     * @param size      字体大小（SP）     * @param bgColor   角标背景颜色id     * @param textColor 字体颜色id     */    public void setCornerText(String text, float size, int bgColor, int textColor) {        //画笔颜色        mCirclePaint.setColor(ContextCompat.getColor(getContext(), bgColor));        mTextPaint.setColor(ContextCompat.getColor(getContext(), textColor));        invalidate();    }    public void setCornerLocation(float top, float right) {        this.cornerTop = top;        this.cornerRight = right;    }    /**     * 将sp值转换为px值，保证文字大小不变     *     * @param spValue     * @return     */    public static int sp2px(Context context, float spValue) {        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;        return (int) (spValue * fontScale + 0.5f);    }}