android 自定义span_教你自定义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);

}

}