您的位置:首页 > 移动开发 > 微信开发

类似微信朋友圈动态的数字红点

2015-06-03 17:08 891 查看
简单的自定义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);
    }
}

效果图:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: