類似微信朋友圈動態的數字紅點

簡單的自定義View，實現類似微信朋友圈動態的數字紅點。還可以再健壯一些。主要重寫了自定義View的onDraw方法。

public class RedCircleNumber extends View{

    //圓的半徑
    private int mRadius = 30;
    //顯示數字的大小
    private int mNumberSize = 40;
    //具體顯示的數字
    private String mNumber = "8";

    //設置具體數字函數
    public void setShowNumber(String mNumber) {
        this.mNumber = mNumber;
        invalidate();
    }

    //設置數字大小函數
    public void setShowNumberSize(int mNumberSize) {
        this.mNumberSize = mNumberSize;
        invalidate();
    }

    public RedCircleNumber(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public RedCircleNumber(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RedCircleNumber(Context context) {
        this(context, null);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //畫圓
        canvas.drawColor(Color.TRANSPARENT);
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeWidth(3);
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, mRadius, paint);
        //取得具體數字的寬高
        paint.setTextSize(mNumberSize);
        paint.setColor(Color.WHITE);
        Rect mBounds = new Rect();
        paint.getTextBounds(mNumber, 0, mNumber.length(), mBounds);
        float mTextWidth = mBounds.width();
        float mTextHeight = mBounds.height();
        //畫數字
        canvas.drawText(mNumber, getWidth() / 2 - mTextWidth / 2, getHeight() / 2 + mTextHeight / 2, paint);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    public void setLayoutParams(ViewGroup.LayoutParams params) {
        params.width = 2 * mRadius;
        params.height = 2 * mRadius;
        super.setLayoutParams(params);
    }
}

效果圖：