教你自定义android中span

 

在客户端开发中，我们往往需要对一个TextView的文字的部分内容进行特殊化处理，比如加粗、改变颜色、加链接、下划线等。iOS为我们提供了AttributedString,而Android则提供了SpannableString。今天我们就来看看SpannableString的主角span。

在Android的android.text.style包下为我们提供了各种各样的span，如：ForegroundColorSpan、ImageSpan、ClickableSpan等等。网上已经有着很多使用这些span的教程了，所以没必要在这里继续探讨这些基础使用了。今天主要分析的是一个可以高度自定义化的span：ReplacementSpan。

为何要自定义化？这是因为在实际需求上，已存在的组件很多时候不能满足设计的需求。比如我们需要把TextView中一些词汇变为带圆角标签的tag；又比如我们要给一段文字分段，但是段间距要精确到像素而不能简简单单用\n解决。遇到这种需求时，当然我们可以把它拆分成很多个子view去完成，但是我们也可以选择优雅的用自定义span去完成。

为何ReplacementSpan? ReplacementSpan是系统提供给我们的一个抽象类。通过名字我们可以知道其实用于是用于替换。指示我们可以把文本的某一部分替换成我们想要的内容。这也许是我们想要的。

Relpacement的定义很简单：

public abstract class ReplacementSpan extends MetricAffectingSpan {

    public abstract int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm);
    public abstract void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint);

    public void updateMeasureState(TextPaint p) { }

    public void updateDrawState(TextPaint ds) { }
}

我们在继承它的时候，需要实现两个方法getSize和draw。通过方法名，我们也许能够知道其作用：getSize用于确定span的大小，draw用于绘制我们想要的内容。

但是问题来了，这些方法的传参是什么？为何getSize只返回了一个int值？

了解了这两个问题，就基本弄懂了自定义span。来回答这两个问题前，我们首先要明确的一件事情是：span是用于SpannableString中，并且最终被用于TextView中。所以在定义span时，我们的大小、绘制内容都应该依赖于使用时的环境。我们假设自定义span使用的环境为A,那么A将包换一些信息，例如：baseline、Paint、FontMetricsInt等信息。

那我们现在来看看getSize方法。getSize的返回值是int，其实这个值指的是自定义span的宽度，那它的高度呢？其实高度是已知的，那就是外界环境A带来的字的高度。但我某些情况我们希望改变span的高度，我们该怎么做呢？ 如果对Android上字体绘制有一定了解的同学会知道，一个字的高度取决于绘制这个子的Paint.FontMetricsInt,而Paint.FontMetricsInt又有asent和desent来表示字体baseline以上的高度和以下的高度。如果对字体绘制与测量不清楚的同学可以看看这篇博文：http://mikewang.blog.51cto.com/3826268/871765 。 而getSize方法的参数中有Paint.FontMetricsInt，那我们是否就可以通过改变传入的Paint.FontMetricsInt的asent和desent来达到改变高度的目的呢？答案是可行的。我们可以来看看官方ImageSpan（ImageSpan继承自DynamicDrawableSpan，而DynamicDrawableSpan继承自Replacement,下面的方法由DynamicDrawableSpan实现的）的实现：

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;
}

我们可以看到ImageSpan就是用这种做法改变高度，这也可以代表官方的做法了。

知道size之后那我们来看看如何绘制了。draw方法有一堆的参数，但源码并没有给出各个参数的作用，这里我直接指出：

• CharSequence text, int start, int end: 这三个用来指示想要替换的原文本text、替换的起始位置start和结束为止end。
• float x: 替换文本的起始坐标位置。
• int y: 作用环境A的baseline。
• int top, int bottom: 这个与上一步getSize有关，指示span可绘制区域的top和bottom。

在知道这些参数之后，我们就可以根据业务需求实现想要的span,下面给出自己在业务上使用的圆角tag型的span:

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);
    }
}