自定義RadiusBackgroundSpan在textview設置tag

1. ReplacementSpan介紹
   android.text.style.ReplacementSpan是一個super span類，您能夠擴展它以建立自定義的span類。您能夠在自定義span類中繪製任何內容，而後使用它來替換TextView字符串中的指定字符。好比加粗、改變顏色、加鏈條、下劃線等。
2. 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;
}
複製代碼

3. 業務需求：文字加上圓角紅色文案。

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);
    }
}
複製代碼

網友的實現對比

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）