小松的技术博客

六和敬

若今生迷局深陷,射影含沙。便许你来世袖手天下,一幕繁华。 你可愿转身落座,掌间朱砂,共我温酒煮茶。

教你自定义android中span

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

在Android的android.text.style包下为我们提供了各种各样的span,如:ForegroundColorSpanImageSpanClickableSpan等等。网上已经有着很多使用这些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) { }
}

我们在继承它的时候,需要实现两个方法getSizedraw。通过方法名,我们也许能够知道其作用: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又有asentdesent来表示字体baseline以上的高度和以下的高度。如果对字体绘制与测量不清楚的同学可以看看这篇博文:http://mikewang.blog.51cto.com/3826268/871765 。 而getSize方法的参数中有Paint.FontMetricsInt,那我们是否就可以通过改变传入的Paint.FontMetricsInt的asentdesent来达到改变高度的目的呢?答案是可行的。我们可以来看看官方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);
    }
}
←支付宝← →微信 →
comments powered by Disqus