Android中的SpannableString,Spans以及TextView绘制原理

前言

前段时间看过一篇 实现类似新浪微博帖子显示(2)——话题、@好友、表情解析工具类类似这种富文本的显示我们一般首先就会想到SpannableString,原作者也是这样实现的,就想着整理一下 相关知识.

SpannableString与SpannableStringBuilder

从名称来看一个是 builder, 一个是 string,很好理解.关于 SpannableString,SpannableStringBuilder及String的区别可以看这里
SpannableString与SpannableStringBuilder,SpannableStringBuilder可以通过append()方法来动态改变其内部的值,与String不同的是前两者都可以通过span来添加额外的信息.

SetSpan方法

方法声明如下:

void setSpan (Object what, int start, int end, int flags);

参数说明:

• what ： 文本格式，可以设置成前景色，背景色，下划线，中划线，模糊等
• start ： 字符串设置格式的起始下标
• end ： 字符串设置格式结束下标
• flags ： 标识

flags: 包含四种情况,用四个常量控制

• Spanned.SPAN_INCLUSIVE_EXCLUSIVE 从起始下标到结束下标，包括起始下标不包含结束坐标
• Spanned.SPAN_EXCLUSIVE_EXCLUSIVE 从起始下标到结束下标，但都不包括起始下标和结束下标
• Spanned.SPAN_INCLUSIVE_INCLUSIVE 从起始下标到终了下标，同时包括起始下标和结束下标
• Spanned.SPAN_EXCLUSIVE_INCLUSIVE 从起始下标到终了下标，包括结束下标不包含起始坐标

Spans框架

关于Android 平台上的Spans架构,可以查看Spans, a Powerful Concept.
, Spans主要分为四个层次

• 如果一个Span影响字符级的文本格式，则继承CharacterStyle.包括我们常用的ForegroundColorSpan,BackgroundColorSpan.
• 如果一个Span影响段落层次的文本格式，则实现ParagraphStyle.包括了BulletSpan,继承自LeadingMarginSpan
• 如果一个Span修改字符级别的文本外观，则实现UpdateAppearance.包括了ClickableSpan
• 如果一个Span修改字符级文本度量|大小，则实现UpdateLayout.包括了AbsoluteSizeSpan

具体其继承结构可通过查看其Hierarchy

扩展阅读:

• 上面的中文译文: Spans，一个强大的概念

• Android Span 架构介绍:介绍了多种Spans的用法.

工作原理

当你给一个TextView设置文本时，它使用Layout去管理文本的渲染。Layout包含有三个子类.分别是

• BoringLayout:负责显示单行文本,isBoring用于判断是否是单行文本.
• DynamicLayout:负责渲染Spannable,且内部会设置SpanWatcher,有soan的时候会reflow,进而重新计算布局.

• StaticLayout: 单行文本，且非Spannable的时候,不会监听span变化,效率较DynamicLayout高.里面处理了换行.

  • Layout.draw()会负责文本的绘制,其中drawBackground会递归LineBackgroundSpan并调用lineBackgroundSpan.drawBackground来进行背景的绘制.
  • drawText则会首先通过TextLine.obtain()生成TextLine,如果是文本,则调用canvas.drawText绘制,如果包含了Spannble,emoji,则交给TextLine绘制.
  • TextLine#draw()会调用drawRun,进而调用handleRun()进行文本的渲染.
  • TextLayoutCache为了提高效率,在4.0之后加入.
  • 如果想要提升TextView的渲染效率,可以使用StaticLayout.

扩展阅读:

• 关于TextView的一些初步讲解
• android staticlayout使用讲解
• [译]Instagram是如何提升TextView渲染性能的
• TextView预渲染研究

自定义Span

除了上述四类 Span,我们还可以自定义Span,自定义Span如同自定义View一样.可以继承已有的Span(扩展),也可以通过继承抽象了或者接口完全自定义.

• 扩展已有的Span

类似demo中扩展ForegroundColorSpan来实现的ActionBar的淡入效果.这里需要借助属性动画的相关知识.

一般需要复写updateDrawState,getSize或者draw方法.

public void updateDrawState(TextPaint ds){}

updateDrawState方法最终会被TextLine#handleRun()方法调用

public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {}

getSize()方法,返回新的更换Span后的size

@Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        //draw something 
        canvas.drawText(text, start, end, x, y, paint);
    }

draw使用Canvas绘制一些文本之外的东西.可以是 背景..

• 完全自定义

通过源码我们发现CharacterStyle,ParagraphStyle.UpdateAppearance和UpdateLayout都是一个空接口.我们要实现自定义Span,则只有继承自其子类,一般是MetricAffectingSpan,ReplacementSpan,LineBackgroundSpan

比如,如果需要自定义背景则可以继承LineBackgroundSpan,就像Demo中的LetterLineBackgroundSpan

学习demo:flavienlaurent/spans,里面列举了各种Span的用法.

FontMetrics

就是所谓的字体规格,如下图所示

FontMetrics是Paint的内部类,里面包含了一些关于字体的常量.

其中Baseline(基线),ascent（上坡度),descent（下坡度),leading（行间距),这些常量集合canvas使得我们的绘制工作变得更加的自由

而我们绘制文字的时候一般使用的是TextPaint这个继承自Paint的类.

//获取文本宽度
TextPaint textPaint = new TextPaint();
paint.setTextSize(size);//设置字体大小
paint.setTypeface(Typeface.xx);//设置字体
float width = Layout.getDesiredWidth(str,textPaint);

图文混排居中

比如,我们在使用ImageSpan的时候,并且使用了lineSpacingExtra来设置行间距后,会出现图片下沉,即图片和文字不再一条线上,这时候就可以通过FontMetrics来设置改变.如,评论中插入 图像,将span上移即可

• 解决方法

public class EmojiSpan extends ImageSpan {
  public EmojiSpan(Bitmap drawable) {
    super(drawable);
  }

  @Override
  public void draw(@NonNull Canvas canvas, CharSequence text,
      int start, int end, float x,
      int top, int y, int bottom, @NonNull Paint paint) {
    // image to draw
    Drawable b = getDrawable();
    // font metrics of text to be replaced
    Paint.FontMetricsInt fm = paint.getFontMetricsInt();
    int transY = (y + fm.descent + y + fm.ascent) / 2
        - b.getBounds().bottom / 2;

    canvas.save();
    canvas.translate(x, transY);
    b.draw(canvas);
    canvas.restore();
  }
}

扩展阅读

• Android中测量Text的宽度和高度

• 用TextPaint来绘制文字

• Android自定义View使用canvas绘制文字实现居中、自动换行