前言
前段时间看过一篇 实现类似新浪微博帖子显示(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
扩展阅读:
工作原理
当你给一个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.
扩展阅读:
自定义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();
}
}
扩展阅读
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
