自定义RadiusBackgroundSpan在textview设置tag

时间 2019-11-16

标签自定义 radiusbackgroundspan textview 设置 tag 繁體版

原文原文链接

ReplacementSpan介绍
android.text.style.ReplacementSpan是一个super span类，您能够扩展它以建立自定义的span类。您能够在自定义span类中绘制任何内容，而后使用它来替换TextView字符串中的指定字符。好比加粗、改变颜色、加链条、下划线等。
ReplacementSpan类方法介绍
getSize方法返回值是int，指的是自定义span的宽度，高度呢？高度是已知的。本来显示的TextView的高度。事实上也是能够改变Span的高度，getSize方法中的参数有Paint.FontMetricsInt，经过改变 Paint. Font MetricsInt的asent和desent。参考DynamicDrawableSpan。

//计算span的大小
public abstract int getSize(@NonNull Paint paint, CharSequence text,
                    @IntRange(from = 0) int start, @IntRange(from = 0) int end,
                    @Nullable Paint.FontMetricsInt fm);
复制代码

//span绘制到canvas
public abstract void draw(@NonNull Canvas canvas, CharSequence text,
                          @IntRange(from = 0) int start, @IntRange(from = 0) int end, float x,
                          int top, int y, int bottom, @NonNull Paint paint);
复制代码

@Override
public int getSize(Paint paint, CharSequence text,
                     int start, int end,
                     Paint.FontMetricsInt fm) {
    Drawable d = getCachedDrawable();
    Rect rect = d.getBounds();

    if (fm != null) {
        fm.ascent = -rect.bottom; 
        fm.descent = 0; 

        fm.top = fm.ascent;
        fm.bottom = 0;
    }

    return rect.right;
}
复制代码

业务需求：文字加上圆角红色文案。

import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.text.style.ReplacementSpan;

/**
 * Created by guokun on 2018/5/24.
 * 书籍和节目详情目录：title 加上 精品等tag。使用RadiusBackgroundSpan能够使用一个TextView，避免打开后重绘致使闪动tag的bug.
 */

public class RadiusBackgroundSpan extends ReplacementSpan {

    private int mSize;
    private int mColor;
    private int mRadius;
    private float mTextSize;
    private int mTextColor;
    private int mTextMargin;
    private int mTopMargin;
    private int mDivide;

    /**
     *
     * @param color
     * @param radius
     * @param textSize
     * @param textColor
     * @param textMargin
     * @param topMargin
     * @param divide
     */
    public RadiusBackgroundSpan(int color, int radius, int textSize, int textColor, int textMargin, int topMargin, int divide) {
        mColor = color;
        mRadius = radius;
        mTextSize = textSize;
        mTextColor = textColor;
        mTextMargin = textMargin;
        mTopMargin = topMargin;
        mDivide = divide;
    }

    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
        float oldTextSize = paint.getTextSize();
        paint.setTextSize(mTextSize);  //更改字体大小，从新测试宽度
        mSize = (int) (paint.measureText(text, start, end) + 2 * mRadius + 2 * mTextMargin);
        //mSize就是span的宽度，span有多宽，开发者能够在这里随便定义规则
        //个人规则：这里text传入的是SpannableString，start，end对应setSpan方法相关参数
        //能够根据传入起始截至位置得到截取文字的宽度，最后加上左右两个圆角的半径获得span宽度
        paint.setTextSize(oldTextSize);
        return mSize;
    }

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        float oldTextSize = paint.getTextSize();  //保存文字大小
        int color = paint.getColor();//保存文字颜色

        //x移动mDivide
        x = x + mDivide;
        paint.setTextSize(mTextSize); //设置字体大小
        paint.setColor(mColor);//设置背景颜色
        paint.setAntiAlias(true);// 设置画笔的锯齿效果

        //oval就是文字背景矩形。这里在宽度为mSize，高度为bottom-top的矩形内新建了一个文字须要的矩形
        //mTextSize为文字高度，这里加上了字体周围间距mRadius,mTextMargin,mTopMargin
        RectF oval = new RectF(x, (top + bottom - mTextSize - mRadius - mTopMargin) / 2, x + mSize,
                (top + bottom + mTextSize + mRadius + mTopMargin) / 2);
        canvas.drawRoundRect(oval, mRadius, mRadius, paint);//绘制圆角矩形，第二个参数是x半径，第三个参数是y半径

        paint.setColor(mTextColor);//设置画笔的文字颜色

        //根据oval大小和字体，将文字绘制在oval居中位置
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        float topTx = fontMetrics.top;//为基线到字体上边框的距离
        float bottomTx = fontMetrics.bottom;//为基线到字体下边框的距离
        int baseLineY = (int) (oval.centerY() - topTx / 2 - bottomTx / 2);//基线中间点的y轴计算公式

        canvas.drawText(text, start, end, x + mRadius + mTextMargin, baseLineY, paint);//绘制文字

        //恢复paint字体大小和颜色
        paint.setTextSize(oldTextSize);
        paint.setColor(color);
    }
}
复制代码

网友的实现对比android

public class RadiusBackgroundSpan extends ReplacementSpan {
    private int mBgColor;
    private int mRadius;
    private int mTextColor;
    private int mTextSize;
    private int mPaddingHorizontal;
    private String mText;
    private int mMarginLeft;
    private int mMarginRight;

    public RadiusBackgroundSpan(int bgColor, int radius, int textColor, int textSize, int paddingHorizontal, String text){
        mBgColor = bgColor;
        mRadius = radius;
        mTextColor = textColor;
        mTextSize = textSize;
        mPaddingHorizontal = paddingHorizontal;
        mText = text;
        mMarginLeft = UIUtil.dpToPx(4);
        mMarginRight = UIUtil.dpToPx(4);
    }

    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
        paint.setTextSize(mTextSize);
        return (int) paint.measureText(mText) + 2*mPaddingHorizontal + mMarginLeft + mMarginRight;
    }

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        final int offsetToTop = UIUtil.dpToPx(2);
        paint.setTextSize(mTextSize);
        paint.setAntiAlias(true);
        RectF rect = new RectF();
        rect.left = (int) x + mMarginLeft;
        Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt();
        int marginVertical = (bottom - top - fontMetrics.descent + fontMetrics.top)/2;
        rect.top = top + marginVertical - offsetToTop; //视觉感受偏下了，往上一点点
        rect.bottom = bottom - marginVertical;
        rect.right = rect.left + (int) paint.measureText(mText) + 2*mPaddingHorizontal;

        paint.setColor(mBgColor);
        canvas.drawRoundRect(rect, mRadius, mRadius, paint);

        paint.setColor(mTextColor);
        float fontShouldOffsetTop = ((fontMetrics.descent - fontMetrics.ascent)/2+fontMetrics.ascent)/2 - offsetToTop/2;
        canvas.drawText(mText,x+mPaddingHorizontal+mMarginLeft,y + fontShouldOffsetTop,paint);
    }
}
复制代码

参考资料

教你自定义android中span
Android字符串进阶之三：字体属性及测量（FontMetrics）canvas