- 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);
}
}
複製程式碼
網友的實現對比
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）