一、概述

本文使用上一篇文章　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);
        }
    }

三、增加可自定义的方法

方法名	默认值	使用效果
setBadgeTextSize	null	设置角标数字，>=0就显示，没有就不显示
setBadgeTextSize	8sp	设置角标字体大小
setBadgePadding	4dp	设置角标的内边距，最大不能超过布局边距
setBadgeShowShadow	true	角标是否显示阴影
setBadgeColorBackground	Red	设置角标的背景颜色
setBadgeColorBadgeText	White	设置角标的字体颜色
setBadgeOffX	0	设置X偏移量
setBadgeOffY	0	设置Y偏移量
setBadgeExact	true	是否截取字体，默认截取，如 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);
    }
}

转载注意出处：http://www.jianshu.com/p/e09cbe635f1a

Github 地址为，https://github.com/lwcye/BadgeRadioButton
如果觉得喜欢就点star