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

最新推荐文章于 2021-05-29 06:33:57 发布

原创最新推荐文章于 2021-05-29 06:33:57 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何使用自定义View在Android应用中实现类似微信朋友圈的动态数字红点效果，通过重写onDraw方法来绘制动态数字，并提供设置数字和大小的函数。实现过程包括画圆、绘制数字以及适配不同尺寸屏幕。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的自定义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);
    }
}

效果图：