欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

RadioButton小红点、数字角标的实现

程序员文章站 2022-07-08 09:54:36
RadioButton通常作为RadioGroup的子布局嵌套在里面,单独使用不太常用,本文实现RadioButton小红点、数字角标,主要是利用onDraw方法进行重写,绘制小红点、数字角标。如下: public class AppRadioButton extends AppCompatRadioButton { private Paint mPaint; private boolean isShowDot; private boolean isShowNumbe.....

 

RadioButton通常作为RadioGroup的子布局嵌套在里面,单独使用不太常用,本文实现RadioButton小红点、数字角标,主要是利用onDraw方法进行重写,绘制小红点、数字角标。如下:

RadioButton小红点、数字角标的实现   RadioButton小红点、数字角标的实现

public class AppRadioButton extends AppCompatRadioButton {

    private Paint mPaint;
    private boolean isShowDot;
    private boolean isShowNumberDot;

    //小红点半径
    private final int circleDotRadius = UIUtils.dp2px(4);
    //icon的尺寸,高 == 宽
    private final int drawableSize = UIUtils.dp2px(22);
    //小红点距离icon的padding
    private final int drawablePadding = UIUtils.dp2px(2);
    //矩形角标数字左右padding
    private final int rectFPaddingX = UIUtils.dp2px(4);
    //矩形角标数字上下padding
    private final int rectFPaddingY = UIUtils.dp2px(3);
    //角标矩形背景
    private int rectFRadius = UIUtils.dp2px(8);
    //圆点和角标颜色
    private final int PAINT_COLOR_DEFAULT = Color.parseColor("#FD481E");

    private String numberText;

    /**
     * 圆点和未读消息的坐标
     */
    private float pivotX;
    private float pivotY;

    public AppRadioButton(Context context) {
        super(context);
        init();
    }

    public AppRadioButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    private void init() {
        mPaint = new Paint();
        mPaint.setStrokeWidth(2);
        mPaint.setAntiAlias(true);
        mPaint.setColor(PAINT_COLOR_DEFAULT);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(getScrollX(), 0);
        pivotX = getWidth() / 2 + drawableSize / 2 + drawablePadding;
        pivotY = getHeight() / 2 - drawableSize / 2 - drawablePadding;
        if (isShowDot) {
            canvas.drawCircle(pivotX, pivotY, circleDotRadius, mPaint);
        } else if (isShowNumberDot && !TextUtils.isEmpty(numberText)) {
            if (Integer.parseInt(numberText) > 99) {
                numberText = "99+";
            }
            if (numberText.length() == 1) {
                rectFRadius = UIUtils.dp2px(6);
            }
            mPaint.setColor(PAINT_COLOR_DEFAULT);
            mPaint.setTextSize(UIUtils.dp2px(12));
            float textWidth = mPaint.measureText(numberText);
            Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
            float textHeight = Math.abs((fontMetrics.top + fontMetrics.bottom));
            RectF rect = new RectF(pivotX - UIUtils.dp2px(4), pivotY - textHeight / 2 - rectFPaddingY, pivotX + textWidth + rectFPaddingX * 2, pivotY + textHeight / 2 + rectFPaddingY);
            canvas.drawRoundRect(rect, rectFRadius, rectFRadius, mPaint);
            mPaint.setColor(Color.parseColor("#ffffff"));
            float baseline = (rect.bottom + rect.top - fontMetrics.bottom - fontMetrics.top) / 2 - UIUtils.dp2px(1);
            mPaint.setTextAlign(Paint.Align.CENTER);
            //绘制文本
            canvas.drawText(numberText, pivotX + textWidth / 2 + rectFPaddingX - UIUtils.dp2px(4) / 2, baseline, mPaint);
        }
    }

    /**
     * `
     * 设置是否显示小圆点
     */
    public void setShowSmallDot(boolean isShowDot) {
        this.isShowDot = isShowDot;
        invalidate();
    }

    /**
     * 设置是否显示数字
     */
    public void setNumberDot(boolean isShowNumberDot, @NonNull String text) {
        this.isShowNumberDot = isShowNumberDot;
        this.numberText = text;
        if (isShowNumberDot) {
            isShowDot = false;
        }
        invalidate();
    }
}

实现原理如上标注,效果很不错,如果有特殊需求,上下左右显示不同的样式显示也可以在onDraw上面修改。

 

 

 

本文地址:https://blog.csdn.net/yoonerloop/article/details/107589057