BadgeRadioButton -- 带角标的RadioButton

于 2021-07-15 23:50:05 发布
阅读量322 收藏
点赞数
分类专栏： UI效果
原文链接：https://www.jianshu.com/p/e09cbe635f1a
版权

一、概述

本文使用上一篇文章　DrawCenterTextView　的一些知识，如果想要理解，请查看后再看本文
在首页导航菜单栏中，大多数都会有角标表示消息的数量，在网上找了一下，有角标的要么无法实现点击事件，要么就是一个角标样式的 TextView，并没有一个简单的RadioButton的角标设置，决定自定义一个简单的 BadgeRadioButton ,目前仅支持 drawableTop 的按钮，实现的效果如下：

在这里插入图片描述

二、实现原理

在 onDraw 方法中，根据 DrawableTop 图标的位置，选择右上角为中心进行绘制圆角背景及绘制数字，很简单的一个思路，核心代码如下：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    if (null != mDrawableBackground && null != mBadgeText) {
        showShadowImpl(mBadgeShowShadow, mBadgeBackgroundPaint);
        if (mBadgePadding > getOffSize()) {
            mBadgePadding = (int) getOffSize();
        }
        if (mBadgeText.length() == 0) {
            canvas.drawCircle((getWidth() + mDrawableBackground.getIntrinsicWidth()) / 2 + mBadgeOffX, mFontHeight / 2 + mBadgeOffY, mFontHeight / 2 + mBadgePadding, mBadgeBackgroundPaint);
        } else if (mBadgeText.length() <= 1) {
            canvas.drawCircle((getWidth() + mDrawableBackground.getIntrinsicWidth()) / 2 + mBadgeOffX, mFontHeight / 2 + mBadgeOffY, mFontHeight / 2 + mBadgePadding, mBadgeBackgroundPaint);
        } else {
            mBadgeBackgroundRect.left = (getWidth() + mDrawableBackground.getIntrinsicWidth()) / 2 - mFontWidth / 2 - mBadgePadding + mBadgeOffX;
            mBadgeBackgroundRect.right = (getWidth() + mDrawableBackground.getIntrinsicWidth()) / 2 + mFontWidth / 2 + mBadgePadding + mBadgeOffX;
            mBadgeBackgroundRect.top = -mBadgePadding + mBadgeOffY;
            mBadgeBackgroundRect.bottom = mFontHeight + mBadgePadding + mBadgeOffY;
            canvas.drawRoundRect(mBadgeBackgroundRect, mFontHeight / 2 + mBadgePadding, mFontHeight / 2 + mBadgePadding, mBadgeBackgroundPaint);
        }
        canvas.drawText(mBadgeText, (getWidth() + mDrawableBackground.getIntrinsicWidth()) / 2 - mFontWidth / 2 + mBadgeOffX, mFontHeight + mBadgeOffY, mBadgeTextPaint);
    }
}

三、增加可自定义的方法

方法名默认值使用效果
setBadgeTextSizenull设置角标数字，>=0就显示，没有就不显示
setBadgeTextSize8sp设置角标字体大小
setBadgePadding4dp设置角标的内边距，最大不能超过布局边距
setBadgeShowShadowtrue角标是否显示阴影
setBadgeColorBackgroundRed设置角标的背景颜色
setBadgeColorBadgeTextWhite设置角标的字体颜色
setBadgeOffX0设置X偏移量
setBadgeOffY0设置Y偏移量
setBadgeExacttrue是否截取字体，默认截取，如 100 -> 99+

四、BadgeRadioButton

直接上代码以供复制：

**
 * <p>带标记的 RadioButton，目前仅支持 drawableTop 的按钮 right的没测试</p><br>
 *
 * @author - lwc
 * @date - 2017/6/14
 * @note -
 * 使用时直接 setBadgeNum
 * setBadgeTextSize -- 设置字体颜色
 * setBadgePadding -- 设置内边距
 * setBadgeShowShadow -- 设置是否显示阴影
 * setBadgeColorBackground -- 设置背景颜色
 * setBadgeColorBadgeText -- 设置字体颜色
 * setBadgeExact -- 设置是否截取图标
 * setBadgeOffX -- 设置X的偏移量
 * setBadgeOffY -- 设置Y的偏移量
 * -------------------------------------------------------------------------------------------------
 * @modified -
 * @date -
 * @note -
 */
public class BadgeRadioButton extends DrawableCenterRadioButton {
    /** 字体高度 */
    private float mFontHeight;
    /** 字体宽度 */
    private float mFontWidth;
    /** 位图集合 */
    private Drawable[] mDrawables;
    /** 位图 */
    private Drawable mDrawableBackground;
    /** 背景画笔 */
    private Paint mBadgeBackgroundPaint;
    /** 数字画笔 */
    private Paint mBadgeTextPaint;
    /** 数字字体大小 默认8sp */
    private float mBadgeTextSize;
    /** 内边距 默认4dp */
    private int mBadgePadding;
    /** x偏移量 */
    private int mBadgeOffX;
    /** Y偏移量 */
    private int mBadgeOffY;
    /** 数字 */
    private int mBadgeNumber;
    /** 数字文本 */
    private String mBadgeText;
    /** 是否存在阴影 默认存在 */
    private boolean mBadgeShowShadow;
    /** 背景颜色 默认红色 */
    private int mBadgeColorBackground;
    /** 字体颜色 默认白色 */
    private int mBadgeColorBadgeText;
    /** 是否截取数字 */
    private boolean mBadgeExact;
    /** 背景矩形 */
    private RectF mBadgeBackgroundRect;

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

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

    public BadgeRadioButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (null != mDrawableBackground && null != mBadgeText) {
            showShadowImpl(mBadgeShowShadow, mBadgeBackgroundPaint);
            float maxPadding = getOffSize();
            if (mBadgePadding > maxPadding) {
                mBadgeOffY = (int) (mBadgePadding - maxPadding);
            }
            if (mBadgeText.length() == 0) {
                canvas.drawCircle((getWidth() + mDrawableBackground.getIntrinsicWidth()) / 2 + mBadgeOffX, mFontHeight / 2 + mBadgeOffY, mFontHeight / 2 + mBadgePadding, mBadgeBackgroundPaint);
            } else if (mBadgeText.length() <= 1) {
                canvas.drawCircle((getWidth() + mDrawableBackground.getIntrinsicWidth()) / 2 + mBadgeOffX, mFontHeight / 2 + mBadgeOffY, mFontHeight / 2 + mBadgePadding, mBadgeBackgroundPaint);
            } else {
                mBadgeBackgroundRect.left = (getWidth() + mDrawableBackground.getIntrinsicWidth()) / 2 - mFontWidth / 2 - mBadgePadding + mBadgeOffX;
                mBadgeBackgroundRect.right = (getWidth() + mDrawableBackground.getIntrinsicWidth()) / 2 + mFontWidth / 2 + mBadgePadding + mBadgeOffX;
                mBadgeBackgroundRect.top = -mBadgePadding + mBadgeOffY;
                mBadgeBackgroundRect.bottom = mFontHeight + mBadgePadding + mBadgeOffY;
                canvas.drawRoundRect(mBadgeBackgroundRect, mFontHeight / 2 + mBadgePadding, mFontHeight / 2 + mBadgePadding, mBadgeBackgroundPaint);
            }
            canvas.drawText(mBadgeText, (getWidth() + mDrawableBackground.getIntrinsicWidth()) / 2 - mFontWidth / 2 + mBadgeOffX, mFontHeight + mBadgeOffY, mBadgeTextPaint);
        }
    }

    /**
     * 设置显示数字
     *
     * @param badgeNumber 标记数字
     */
    public BadgeRadioButton setBadgeNumber(int badgeNumber) {
        mBadgeNumber = badgeNumber;
        if (mBadgeNumber < 0) {
            mBadgeText = null;
        } else if (mBadgeNumber > 99) {
            mBadgeText = mBadgeExact ? String.valueOf(mBadgeNumber) : "99+";
        } else if (mBadgeNumber > 0 && mBadgeNumber <= 99) {
            mBadgeText = String.valueOf(mBadgeNumber);
        } else if (mBadgeNumber == 0) {
            mBadgeText = "";
        }
        if (!TextUtils.isEmpty(mBadgeText)) {
            measureText();
        }
        invalidate();
        return this;
    }

    /**
     * 测量文本高度和宽度
     */
    private void measureText() {
        mFontHeight = Math.abs(mBadgeTextPaint.getFontMetrics().descent + mBadgeTextPaint.getFontMetrics().ascent);
        mFontWidth = mBadgeTextPaint.measureText(mBadgeText);
    }

    /**
     * 为画笔设置阴影
     *
     * @param showShadow 是否显示
     * @param badgeBackgroundPaint 画笔
     */
    private void showShadowImpl(boolean showShadow, Paint badgeBackgroundPaint) {
        int x = dp2px(1);
        int y = dp2px(1.5f);
        badgeBackgroundPaint.setShadowLayer(showShadow ? dp2px(2f) : 0, x, y, 0x33000000);
    }

    @Override
    void init() {
        super.init();
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);

        mBadgeTextSize = dp2px(10);
        mBadgePadding = dp2px(4);
        mBadgeShowShadow = true;
        mBadgeColorBackground = Color.RED;
        mBadgeColorBadgeText = Color.WHITE;
        mBadgeOffX = 0;
        mBadgeOffY = 0;
        mFontWidth = 0;
        mFontHeight = 0;
        mBadgeBackgroundRect = new RectF(0, 0, 0, 0);

        //目前只支持drawableTop的RadioButton
        mDrawables = getCompoundDrawables();
        if (null != mDrawables[1]) {
            mDrawableBackground = mDrawables[1];
        }
        /* 理论上可以支持drawableRight，但是没测试
       else if (null != mDrawables[2]) {
            mDrawableBackground = mDrawables[2];
        }*/

        mBadgeTextPaint = new TextPaint();
        mBadgeTextPaint.setAntiAlias(true);
        mBadgeTextPaint.setSubpixelText(true);
        mBadgeTextPaint.setFakeBoldText(true);
        mBadgeTextPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        mBadgeTextPaint.setTypeface(Typeface.DEFAULT_BOLD);
        mBadgeTextPaint.setDither(true);
        mBadgeTextPaint.setColor(mBadgeColorBadgeText);
        mBadgeTextPaint.setTextSize(mBadgeTextSize);

        mBadgeBackgroundPaint = new Paint();
        mBadgeBackgroundPaint.setAntiAlias(true);
        mBadgeBackgroundPaint.setStyle(Paint.Style.FILL);
        mBadgeBackgroundPaint.setDither(true);
        mBadgeBackgroundPaint.setColor(mBadgeColorBackground);
        showShadowImpl(mBadgeShowShadow, mBadgeBackgroundPaint);
    }

    /**
     * 设置字体大小，默认8dp
     *
     * @param badgeTextSize 内边距
     */
    public BadgeRadioButton setBadgeTextSize(float badgeTextSize) {
        mBadgeTextSize = badgeTextSize;
        mBadgeTextPaint.setTextSize(mBadgeTextSize);
        return setBadgeNumber(mBadgeNumber);
    }

    /**
     * 设置内边距，默认4dp
     *
     * @param badgePadding 内边距
     */
    public BadgeRadioButton setBadgePadding(int badgePadding) {
        mBadgePadding = badgePadding;
        return setBadgeNumber(mBadgeNumber);
    }

    /**
     * 设置是否显示阴影，默认显示
     *
     * @param badgeShowShadow true - 显示
     */
    public BadgeRadioButton setBadgeShowShadow(boolean badgeShowShadow) {
        mBadgeShowShadow = badgeShowShadow;
        return setBadgeNumber(mBadgeNumber);
    }

    /**
     * 设置背景颜色，默认红色
     *
     * @param badgeColorBackground 背景颜色
     */
    public BadgeRadioButton setBadgeColorBackground(@ColorInt int badgeColorBackground) {
        mBadgeColorBackground = badgeColorBackground;
        mBadgeBackgroundPaint.setColor(mBadgeColorBackground);
        return setBadgeNumber(mBadgeNumber);
    }

    /**
     * 设置标记字体颜色，默认白色
     *
     * @param badgeColorBadgeText 字体颜色
     */
    public BadgeRadioButton setBadgeColorBadgeText(int badgeColorBadgeText) {
        mBadgeColorBadgeText = badgeColorBadgeText;
        mBadgeTextPaint.setColor(mBadgeColorBadgeText);
        return setBadgeNumber(mBadgeNumber);
    }

    /**
     * 设置X偏移量
     *
     * @param badgeOffX x偏移量
     */
    public BadgeRadioButton setBadgeOffX(int badgeOffX) {
        mBadgeOffX = badgeOffX;
        return setBadgeNumber(mBadgeNumber);
    }

    /**
     * 设置Y偏移量
     *
     * @param badgeOffY Y偏移量
     */
    public BadgeRadioButton setBadgeOffY(int badgeOffY) {
        mBadgeOffY = badgeOffY;
        return setBadgeNumber(mBadgeNumber);
    }

    /**
     * 是否截取字体，默认截取，如 100 -> 99+
     *
     * @param badgeExact true - 截取
     */
    public BadgeRadioButton setBadgeExact(boolean badgeExact) {
        mBadgeExact = badgeExact;
        return setBadgeNumber(mBadgeNumber);
    }

    /**
     * dp转px
     *
     * @param dpValue dp值
     * @return px值
     */
    public int dp2px(float dpValue) {
        final float scale = getContext().getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}

Github 地址为，https://github.com/lwcye/BadgeRadioButton

圣剑Jay
关注
专栏目录
radiobutton 带小圆点_RadioButton小红点、数字角标的实现
weixin_39816362的博客
12-21 556
RadioButton通常作为RadioGroup的子布局嵌套在里面，单独使用不太常用，本文实现RadioButton小红点、数字角标，主要是利用onDraw方法进行重写，绘制小红点、数字角标。如下： public class AppRadioButton extends AppCompatRadioButton {private Paint mPaint;private boolean is...
RadioButton仿QQ底部标签（有右上角数字）
10-22
用RadioGroup 和radioButton实现底部导航功能并在RadioButton上添加数字
BadgeView 图标上显示提醒的小控件
weixin_34168880的博客
11-11 138
2019独角兽企业重金招聘Python工程师标准>>> ...
带角标的RadioButton
xiaoerbuyu1233的博客
04-13 313
import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; import android.text.TextUtils; import android.util.AttributeSet; import androidx.annotation.NonNu.
android radiobutton
11-18
android 自定义radiobutton图片样式
我的Android成长之路（15）----TabHost+BadgeRadioButton实现主页面消息提醒
cuper_的博客
08-15 723
最近项目想要做消息提醒功能，从图标提醒到导航栏到里边的模块图标每一级都要有提醒，桌面图标提醒比较容易，详细的模块需要自己定制，这里主要说说主页面的消息提醒如何实现，先看看效果图： 首先是用TabHost实现主页面，这种方式的好处在于每个页面用的是activity而不是fragment，操作起来更加方便。 主页面xml &lt;?xml version="1.0" encoding="u...
AtCoder-Submission-RadioButton-crx插件
04-04
语言:日本語 添加一个按钮以进行提交表单 有时可以在不同的问题中提交，因此可以轻松选择和易于查看。 从这里提交并没有太多？ 由于有时候我提交一个包含不同问题的文件时，它更容易选择和查看。...
Android-RadioButton-Example
06-25
在Android-RadioButton-Example-master这个项目中，你可以找到具体的代码实现，包括XML布局文件和对应的Java代码，这将帮助你更好地理解和运用RadioButton。通过学习和实践这个示例，你将能够熟练地在Android应用中...
Android 动态添加RadioGroup的RadioButton-IT计算机-毕业设计.zip
04-05
- 创建RadioButton对象：`RadioButton radioButton = new RadioButton(context);` - 设置RadioButton属性，如文本、ID等：`radioButton.setText("文本");` - 添加RadioButton到RadioGroup：`radioGroup.addView...
vue-radiobutton
02-16
测试电台 Radio button component 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
自定义android RadioButton样式
03-17
自定义android RadioButton样式，代码说明地址：http://blog.csdn.net/jason_996/article/details/62889374
RadioButton小红点、数字角标的实现
一杯清泉
07-26 1628
RadioButton通常作为RadioGroup的子布局嵌套在里面，单独使用不太常用，本文实现RadioButton小红点、数字角标，主要是利用onDraw方法进行重写，绘制小红点、数字角标。如下： public class AppRadioButton extends AppCompatRadioButton { private Paint mPaint; private boolean isShowDot; private boolean isShowNumbe..
RadioButton与BadgeView结合使用！
聪哥的专栏
09-14 3789
BadgeView对象可以结合其他kongjian
RadioButton右上角添加红点提醒
顾_小白的博客
06-16 6782
今天一同学遇到了一个需求设计类似下图的效果，很多人会说简单啊一个framelayout布局就解决了，没错是可以实现该功能需求。但是如果是以前的老项目，运用的RadioGroup就会有一个问题，导航栏根本就不存在布局。所以这里会谈到另一种解决方案。 该方法运用的是GitHub上一个开源的工具类BadgeView，在RadioGroup的布局之上覆盖一层透明的LinearLayout用于消息提示
android 自定义radiobutton 样式,Android编程实现自定义PopupMenu样式示例【显示图标与设置RadioButton图标】...
weixin_34563472的博客
05-25 496
Android编程实现自定义PopupMenu样式示例【显示图标与设置RadioButton图标】发布时间：2020-10-04 06:21:31来源：脚本之家阅读：188作者：books1958本文实例讲述了Android编程实现自定义PopupMenu样式。分享给大家供大家参考，具体如下：PopupMenu是Android中一个十分轻量级的组件。与PopupWindow相比，PopupMenu...
vue实现消息badge 标记_基于elmentui实现button点击/切换出现【Badge 】标记 效果 随手一记！...
weixin_39872044的博客
12-20 1619
实现效果：HTML：v-for="(item,index) in order_nav_list":key="item.index":name="item.status":count="item.count">{{item.name}}把el-tabs和el-badge结合 通过具名slot来实现自定义标签页的内容methods：handleClick (tab) {const statu...
badgeview 和 radiobutton结合使用导致点击无响应解决办法
小崔的博客
04-15 9086
如果不添加badgeview 点击是没有问题，如果添加了就点击不好使可以添加透明得button具体可以参考<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match
android底部导航（带小红点提示）
HuiTaiLang_1988的专栏
10-29 5178
[color=#FF0000][size=24px]本帖只实现了底部导航（带小红点提示）的前台布局和tab切换功能，后续会把小红点动态显示与隐藏即根据新数据来控制底部提示的功能加上。[/size][/color] 实现原理TabHost+RadioButton，底部提示角标（小红点）使用FrameLayout布局。 布局代码： [code=java]     android
自定义RadioButton实现右上角有小圆点和未读数字条数
furtureWithYou的博客
09-29 2419
自定义RadioButton
Android开发：UI控件详解-单选与复选
"单选与复选按钮是Android UI设计中不可或缺的基本控件，包括CheckBox和RadioButton。它们都继承自CompoundButton，用于实现用户的选择交互。CheckBox用于多选，而RadioButton则用于单选操作。在实际应用中，需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值