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方法进行重写,绘制小红点、数字角标。如下:
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
下一篇: 新媒体渠道如何引流?软文推广、站外推广