真·富文本编辑器的演进之路-Span开胃菜

共 68455字,需浏览 137分钟

 ·

2021-03-03 12:27

Span的基础性概念分析

国际惯例,官网镇楼,这是对Span最好的全局概览。

https://developer.android.com/guide/topics/text/spans

Span种类

Span通常按照下面两个区别进行分类,即根据Span修改Text外观或者尺寸和Span影响的Text范围来进行分类,在Android中,默认提供了20多种Span。

0_3qvv1i8lbceOxq0P

影响Text的外观和尺寸

Span可以对Text的部分外观进行修改,例如修改文字颜色、背景色、删除线、下划线等等。这样的Span都是继承自CharacterStyle,例如UnderlineSpan。

val string = SpannableString("Text with underline span")
string.setSpan(UnderlineSpan(), 10, 19, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)    

仅影响Text外观的Span会触发重新绘制Text,单是不会触发重新计算布局。这些Span会实现UpdateAppearance并扩展CharacterStyle,CharacterStyle子类通过提供更新TextPaint的设置来定义如何重新绘制文本。

Span还可以对Text的尺寸进行修改,例如RelativeSizeSpan,将Text的尺寸进行修改,代码如下所示。

val string = SpannableString("Text with relative size span")
string.setSpan(RelativeSizeSpan(1.5f), 10, 24, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE) 

影响文本尺寸的Span会导致TextView重新测量文本,以实现正确的布局和渲染,例如,更改文本大小可能会导致字词显示在不同的行上。所以需要触发重新测量、重新计算文本布局,以及重新绘制文本。

这些Span通常会扩展MetricAffectingSpan,该类为抽象类,它允许子类通过提供对TextPaint的访问权限来定义Span影响文本测量的方式。由于MetricAffectingSpan是继承自CharacterSpan,因此子类也会影响字符级别的文本外观。

preview

影响Text的范围

有些Span只会影响单个字符,类似于UnderlineSpan的行为,你可以控制其作用于有限的字符,例如BackgroundColorSpan。

val string = SpannableString("Text with a background color span")
string.setSpan(BackgroundColorSpan(color), 12, 28, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

还有些Span可以直接作用在整个Paragraph上,例如QuoteSpan。

val textString = SpannableStringBuilder("xuyisheng android群英传 flutter")
textString.setSpan(QuoteSpan(Color.RED), 0, textString.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)

在 Android 中,段落是基于换行符 (\n) 定义的

preview

常用的Span流水账

系统提供了非常多的Span种类,大部分时候,这些Span都可以满足我们的开发需求了,即使不满足,也可以通过研究其源码,来修改实现一个类似的效果,这里简单的记录下这些基础Span的常规用法和功能,仅仅是流水账而已,为了保证文章的完整性而写的,有基础的开发者可以直接跳过这部分。

  • BackgroundColorSpan 修改背景色
val string = SpannableString("Text with a background color span")
string.setSpan(BackgroundColorSpan(Color.RED), 12, 28, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
  • ClickableSpan 设置点击事件
SpannableString("XXXXXXXX").setSpan(object : ClickableSpan() {
    override fun onClick(widget: View) {}
}, 0, 8, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.movementMethod = LinkMovementMethod.getInstance()

如果你想及设置点击又设置颜色或下划线的话,ClickableSpan也提供了updateDrawState来设置颜色下划线等属性

  • ForegroundColorSpan 文本颜色(前景色)
val span = ForegroundColorSpan()
val spannableString = SpannableString("CONTENT")
spannableString.setSpan(span, 0, spannableString.length / 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = spannableString
  • DrawableMarginSpan  文本开头插入Drawable
val drawable = getDrawable(R.mipmap.ic_launcher)
val span = SpannableString("xxxxxxxxxx")
span.setSpan(DrawableMarginSpan(drawable!!), 0, span.length, 0)
  • MaskFilterSpan 修饰效果,如模糊(BlurMaskFilter)、浮雕(EmbossMaskFilter)
// Blur a character
span = MaskFilterSpan(BlurMaskFilter(density * 2, BlurMaskFilter.Blur.NORMAL))
// Emboss a character
span = MaskFilterSpan(EmbossMaskFilter(floatArrayOf(1f, 1f, 1f), 0.4f, 6, 3.5f))
  • StrikethroughSpan 删除线(中划线)
val span = StrikethroughSpan()
val spannableString = SpannableString("CONTENT")
spannableString.setSpan(span, 0, spannableString.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = spannableString
  • UnderlineSpan 下划线
val span = UnderlineSpan()
val spannableString = SpannableString("CONTENT")
spannableString.setSpan(span, 0, spannableString.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = spannableString
  • QuoteSpan   段落前引用
val span = QuoteSpan(Color.RED)
val spannableString = SpannableString("CONTENT")
spannableString.setSpan(span, 0, 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = spannableString
  • BulletSpan:段落前圆点
val span = BulletSpan(15, Color.RED)
val spannableString = SpannableString("CONTENT")
spannableString.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = spannableString
  • AbsoluteSizeSpan 字体绝对大小(文本字体)
val string = SpannableString("Text with absolute size span")
string.setSpan(AbsoluteSizeSpan(55, true), 10, 23, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
  • ImageSpan 图片
val span = ImageSpan(this, R.mipmap.ic_launcher)
val spannableString = SpannableString("CONTENT")
spannableString.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = spannableString
  • IconMarginSpan   IconMarginSpan与DrawableMarginSpan类似,只是参数是类型不同
val bmp = BitmapFactory.decodeResource(resources, R.mipmap.ic_launcher)
val span = SpannableString("xxxxxxxxx")
span.setSpan(IconMarginSpan(bmp), 0, span.length, 0)
span.setSpan(IconMarginSpan(bmp, 20), 0, span.length, 0)
  • RelativeSizeSpan 字体相对大小(文本字体)
val span = RelativeSizeSpan(2.0f)
val spannableString = SpannableString("CONTENT")
spannableString.setSpan(span, 0, spannableString.length / 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = spannableString
  • ScaleXSpan 基于X轴缩放
val span = ScaleXSpan(2.0f)
val spannableString = SpannableString("CONTENT")
spannableString.setSpan(span, 0, spannableString.length / 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = spannableString
  • StyleSpan 字体样式:粗体、斜体等
val string = SpannableString("Bold and italic text")
string.setSpan(StyleSpan(Typeface.BOLD), 0, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
string.setSpan(StyleSpan(Typeface.ITALIC), 9, 15, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
  • SubscriptSpan 下标
val span = SubscriptSpan()
val spannableString = SpannableString("CONTENT")
spannableString.setSpan(span, 0, spannableString.length / 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = spannableString
  • SuperscriptSpan 上标(数学公式会用到),甚至可以用来做红点
val span = SuperscriptSpan()
val spannableString = SpannableString("CONTENT")
spannableString.setSpan(span, 0, spannableString.length / 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = spannableString

红点(有点取巧,不推荐)

val textString = SpannableString("你有新消息了●")
textString.apply {
    setSpan(ForegroundColorSpan(Color.RED), textString.length - 1, textString.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
    setSpan(SuperscriptSpan(), textString.length - 1, textString.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
}
text.text = textString
  • TextAppearanceSpan 文本字体、大小、样式和颜色
span = new TextAppearanceSpan(this, R.style.SpecialTextAppearance);
<-- style.xml -->
<style name="SpecialTextAppearance" parent="@android:style/TextAppearance">
  <item name="android:textColor">@color/color1</item>
  <item name="android:textColorHighlight">@color/color2</item>
  <item name="android:textColorHint">@color/color3</item>
  <item name="android:textColorLink">@color/color4</item>
  <item name="android:textSize">28sp</item>
  <item name="android:textStyle">italic</item>
</style>
  • TypefaceSpan 设置文本字体
val myTypeface = Typeface.create(
    ResourcesCompat.getFont(context, R.font.some_font),
    Typeface.BOLD
)
val string = SpannableString("Text with typeface span.")
string.setSpan(TypefaceSpan(myTypeface), 10, 18, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
string.setSpan(TypefaceSpan("monospace"), 19, 22, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
  • URLSpan 文本超链接
val string = SpannableString("Text with a url span")
string.setSpan(URLSpan("http://www.developer.android.com"), 12, 15, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
  • TabStopSpan.Standard:用来将字符串中的"\t"替换成相应的空行,普通情况下"\t"不会进行显示,当使用TabStopSpan可以将"\t"替换成相应长度的空白区域。

  • AlignmentSpan.Standard  文本对齐方式

val string = SpannableString("Text with opposite alignment")
string.setSpan(
    AlignmentSpan.Standard(Layout.Alignment.ALIGN_OPPOSITE), 0,
    string.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
  • LeadingMarginSpan:段落缩进
val ss = SpannableString("xxxxxxxxx")
ss.setSpan(LeadingMarginSpan.Standard(60), 0, ss.length, 0)
ss.setSpan(LeadingMarginSpan.Standard(60, 20), 0, ss.length, 0)
  • LineBackgroundSpan:LineBackgroundSpan是原生Span,它封装了对行对象的Background,其内部有个简单的实现—Standard。如果需要在行上对Background进行修改,那么就可以重写LineBackgroundSpan。
val textString = SpannableString("阅文集团(股票代码:0772.HK)由腾讯文学与原盛大文学整合而成,成立于2015年3月。是数字阅读平台和文学IP培育平台,旗下囊括QQ阅读、起点中文网、新丽传媒等业界品牌。")
textString.setSpan(LineBackgroundSpan.Standard(Color.CYAN), 0, 4, SPAN_INCLUSIVE_INCLUSIVE)
text.text = textString
image-20201224162438448
  • LineHeightSpan:调整行高的Span,可以统一不同字体导致的行高不一致的问题。
textString.append("阅文集团由腾讯文学与原盛大文学整合而成,成立于2015年3月。是数字阅读平台和文学IP培育平台,旗下囊括QQ阅读、起点中文网、新丽传媒等业界品牌。")
textString.setSpan(LineHeightSpan.Standard(90), 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
image-20210207143328992

Span的边界效应

所有的Span在插入时,都需要设置flag,这个flag,就是控制在已有的Span边界插入新的String时的包含行为,通过下面这个例子来进行下演示。

val textString = SpannableStringBuilder("xuyisheng android群英传 flutter")
textString.setSpan(ForegroundColorSpan(Color.RED), 0, 2, Spannable.SPAN_EXCLUSIVE_INCLUSIVE)
textString.insert(2,"shuai")
text.text = textString
  • SPAN_EXCLUSIVE_EXCLUSIVE
image-20201218191533479
  • SPAN_EXCLUSIVE_INCLUSIVE
image-20201218191721125

Span的falg标志位标记了Span是否应该扩展至包含插入文本的开始和结束的点。任何标志位设置以后,只要插入文本的位置位于开始位置和结束位置之间,Span就会自动的扩展。

Span的Flag有下面这些枚举:

  • Spanned.SPAN_EXCLUSIVE_EXCLUSIVE:不包含两端start和end所在的端点,即(a,b)
  • Spanned.SPAN_EXCLUSIVE_INCLUSIVE:不包含端start,但包含end所在的端点,即(a,b]
  • Spanned.SPAN_INCLUSIVE_EXCLUSIVE:包含两端start,但不包含end所在的端点,即[a,b)
  • Spanned.SPAN_INCLUSIVE_INCLUSIVE:包含两端start和end所在的端点,即[a,b]

创建Span的数据结构

当我们使用Span时,主要会使用到下面几个类,SpannedString、SpannableString 或 SpannableStringBuilder。它们的差异可以用官网的这张图来表示。

image-20210128102859410

Span常用方法

Span中有很多函数用来帮助开发者获取Span相关的状态和数据。

  • getSpanStart(Object tag),用来获取一个span开始的位置。

  • getSpanEnd(Object tag),用来获取一个span的结束位置。

  • getSpanFlags(Object tag)用来获取这个span设置的flag。

  • getSpans(int start, int end, Classtype),用来获取从start到end的位置上所有的特定类型的span,这个方法非常有用,它可以获取Text中,指定类型的Span,这在很多场景下都是非常有用的。

  • removeSpan(span),这个方法用来移除指定的Span实例,可以用这个方法来移除Span的展示效果。

  • nextSpanTransition(int start, int limit, Class type),这个方法会在你指定的文本范围内,返回下一个你指定的Span类型的开始位置,与getSpan方法类似,但属于迭代器类型,通过这个方法,我们可以遍历指定的Span类型 ,而且它的效率要比getSpan方法高。

  • TextUtils.dumpSpans,这个方法可以将当前Text下的所有Span实例给dump出来,在调试的时候非常有用。

    TextUtils.dumpSpans(textView.editableText, LogPrinter(Log.DEBUG, "xys"), "spans: ")

getSpans排序问题

Android7.0系统以上getSpans方法会返回乱序的排列数组,这跟它的内部实现有关,所以,在使用getSpans时,如果希望获取顺序的排列数组,那就需要对返回结果进行手动排序,代码如下所示。

inline fun <reified T> getOrderedSpans(textView: TextView): Array<T> {
    val editable: Editable = textView.editableText
    val spans: Array<T> = editable.getSpans(0, textView.toString().length, T::class.java)
    Arrays.sort(spans) { o1, o2 -> editable.getSpanStart(o1) - editable.getSpanStart(o2) }
    return spans
}

但如果使用nextSpanTransition(int start, int limit, Class kind)方法来迭代的话,就不会有这样的问题,它会按照显示顺序进行获取。

setSpan的思考

我们来思考下,Span具体是什么。在setSpan的方法签名里,span的参数类型是一个Any类型,通常我们会这样使用。

spannable.setSpan(ExImageSpan(drawable, DynamicDrawableSpan.ALIGN_BOTTOM), start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

通常情况下,setSpan的方法会传入一个xxxSpan,特别是继承系统的MetricAffectingSpan等,用于修改Span的样式,但实际上,这个参数是个Any类型,你可以给它设置任何一个类,例如:

setSpan(User(id = 1, name = "xys"), 0, length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)

上面我们设置了一个Span,这个Span是个单纯的类实例,所以Span不会有任何样式上的改变,但是这段文本已经被标记为User类型,你可以理解为User类是一个未修改任何样式的Span。

那么这样做的好处是什么呢?

这样的设计方式,实际上是将Span拓展成了一个综合性的拓展平台,不仅仅是附加样式修改,更可以做很多其它的类型标记,这就可以很好的拓展TextView的业务场景了,一段文字中甚至可以包含很多非展示性的业务场景。

自定义Span

通常情况下,我们都可以通过使用Android原生提供的Span来完成开发,但大部分场景下,肯定是需要能够支持自定义Span的,官方文档给出了下面的建议:

  • 在「字符级别」影响文本 -> CharacterStyle
  • 在「段落级别」影响文本 -> ParagraphStyle
  • 影响「文本外观」-> UpdateAppearance
  • 影响「文本尺寸」-> UpdateLayout

不过绝大多数场景下,我们不太会自定义到这么深入的级别,选择合适的已有Span进行拓展,是一个事半功倍的方法。

复合Span效果

例如我们需要实现一个复合效果的Span,它可以以一定的比例增加文本的大小,类似RelativeSizeSpan的效果,同时支持设置文本的颜色,例如ForegroundColorSpan的效果。在这种情况下,我们可以扩展RelativeSizeSpan,通过重写updateMeasureState方法,在绘制状态时设置TextPaint的颜色,从而实现这个复合效果,代码如下所示。

class RelativeSizeColorSpan(
    @ColorInt private val color: Int,
    size: Float
) : RelativeSizeSpan(size) {
    override fun updateDrawState(textPaint: TextPaint?) {
         super.updateDrawState(ds)
         textPaint?.color = color
    }
}

边框标签

ReplacementSpan是自定义Span的最重要角色,后面会详细讲解ReplacementSpan,这里只简单的介绍下通过ReplacementSpan实现自定义Span的一般方式,代码如下所示。

class FrameSpan : ReplacementSpan() {
    private val paint: Paint = Paint()
    private var width = 0F
    override fun getSize(paint: Paint, text: CharSequence?, start: Int, end: Int, fm: Paint.FontMetricsInt?): Int {
        width = paint.measureText(text, start, end)
        return width.toInt()
    }

    override fun draw(canvas: Canvas, text: CharSequence?, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
        canvas.drawRect(x, top.toFloat(), x + width, bottom.toFloat(), this.paint)
        canvas.drawText(text.toString(), start, end, x, y.toFloat(), paint)
    }

    init {
        paint.style = Paint.Style.STROKE
        paint.color = Color.BLUE
        paint.isAntiAlias = true
    }
}

增加段间距

同样是借助ReplacementSpan,但这次是通过重写它的getSize方法来实现增加段间距的效果,代码如下所示。

class BlockSpaceSpan(private val mHeight: Int) : ReplacementSpan() {
    override fun getSize(paint: Paint, text: CharSequence, start: Int, end: Int, fm: FontMetricsInt?): Int {
        if (fm != null) {
            fm.top = -mHeight - paint.getFontMetricsInt(fm)
            fm.ascent = fm.top
            fm.bottom = 0
            fm.descent = fm.bottom
        }
        return 0
    }

    override fun draw(canvas: Canvas, text: CharSequence, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {}
}

使用方式如下所示。

val paragraphFirst = "这是第一段。这是第一段。这是第一段。这是第一段。这是第一段。\n"
val paragraphSecond = "这是第二段。这是第二段。这是第二段。这是第二段。这是第二段。"
val spaceString = "[space]"
val paragraphText = SpannableString(paragraphFirst + spaceString + paragraphSecond)
paragraphText.setSpan(BlockSpaceSpan(10.dp), paragraphFirst.length, paragraphFirst.length + spaceString.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = paragraphText

展示效果如下所示。

image-20210128172444488

Text around Image

借助LeadingMarginSpan2,可以实现Text前的留白,这样就可以实现文字环绕图片的效果。

class TextRoundSpan(private val lines: Int, private val margin: Int) : LeadingMarginSpan2 {

    override fun getLeadingMargin(first: Boolean): Int {
        return if (first) {
            margin
        } else {
            0
        }
    }

    override fun drawLeadingMargin(c: Canvas?, p: Paint?, x: Int, dir: Int, top: Int, baseline: Int, bottom: Int, text: CharSequence?, start: Int, end: Int, first: Boolean, layout: Layout?) {}

    override fun getLeadingMarginLineCount(): Int = lines
}

使用时,只需要根据Image计算好TextView需要留出的行数和边距即可,代码如下所示。

textString.append("阅文集团由腾讯文学与原盛大文学整合而成,成立于2015年3月。是数字阅读平台和文学IP培育平台,旗下囊括QQ阅读、起点中文网、新丽传媒等业界品牌。")
textString.setSpan(TextRoundSpan(3, 200), 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = textString

展示效果如图。

image-20210207142326675

有了这样的空白,就可以很方便的在这里插入Image了,从而实现文字环绕的效果。

CharacterStyle、UpdateAppearance

前面介绍了官方推荐的自定义Span方式,下面就以一个简单的例子来演示下,如何在「字符级别」修改「文字外观」,代码如下所示。

private class RainbowSpan(val textLength: Int) : CharacterStyle(), UpdateAppearance {

    override fun updateDrawState(paint: TextPaint) {
        paint.style = Paint.Style.FILL
        val shader: Shader = LinearGradient(
            0F, 0F, paint.textSize * textLength, 0F,
            Color.RED, Color.BLUE, Shader.TileMode.CLAMP
        )
        paint.shader = shader
    }
}

展示效果如图所示。

image-20210119141854079

Span进阶

Span是一个非常强大的概念,前面对Span的了解,只能说是九牛一毛,对于富文本来说,Span还有很多需要进一步探索的内容,下面这部分,我们将更深入的了解Span的一些富文本特性。

SpanWatcher

SpanWatcher类似TextWatcher,他们都是对文本变化的监听回调,对一个Spannable对象设置SpanWatcher之后,在它范围内的Span如果发生变化,则会通知到该SpanWatcher。

SpanWatcher继承自NoCopySpan,在TextView的setText方法中,会基于传入的文本创建一个新的Spannable对象,在这个过程中SpanWatcher不会被复制到新的Spannable对象上,所以需要先设置TextView的文本,再从TextView取出Spannale对象调用下面这个方法:

setSpan(xxxSpanWatcher, 0, text.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE | Spanned.SPAN_PRIORITY)

或者使用Spannable.Factory()来进行设置。

Selection

Selection用于在Edittext中执行选中功能,在开发富文本编辑器的时候,这是必不可少的的部分,而且Selection独立于EditText,可以在不使用EditText的情况下,操作光标的选中。

  • selectionStart表示在选择过程中不变的光标位置
  • selectionEnd表示在选择过程中移动的位置

这一点很重要,Start和End并不是指光标的起始位置和结束位置,而是在一次操作下,移动和固定的光标位置。

  • Selection状态具有起点(start)和终点(end),而start与end反映在文本中,其实是两个NoCopySpan: START, END

  • 光标是一种特殊的选中状态,start与end在同一位置

所以知道了selectionStart/selectionEnd,以及光标的移动方向之后,就可以得出下面几种场景:

selectionEnd > selectionStartselectionEnd光标移动方向结果
true左移选中左边
false左移取消选中右边
true右移选中右边
false右移取消选中左边

对于Selection.setSelection(Spannable text, int start, int stop)方法来说,如果start != stop,那么start表示选择过程中不变的光标,stop表示变化的光标

Span最佳实践

为现有Text创建Span

当TextView调用setText之后,TextView中的文本将变为不可变类型,这时候如果要修改文本或者为现有文本创建Span,就必须重新构建Spannable对象并再次调用setText,而这就会重新触发渲染和布局,在这种场景下,会造成Spannable的资源浪费,这时候,就可以使用BufferType.SPANNABLE的方式来创建Spannable。

val textString = "xuyisheng android群英传 flutter"
text.setText(textString, TextView.BufferType.SPANNABLE)
val spannableText = text.text as Spannable
spannableText.setSpan(ForegroundColorSpan(Color.RED), 3, spannableText.length, SPAN_INCLUSIVE_INCLUSIVE)

通过这种方式,就可以让TextView在创建Spannable对象时,将内容标记为可变类型,这样后续再更新Span就不会再造成资源浪费,在更新后,TextView会自动更新Span的修改。

当修改了已有Span的属性后,需要调用invalidate或者requestLayout进行刷新。

KTX拓展

KTX中,Kotlin封装了很多对Span的语法糖,大家可以参考官方的链接,了解更多的关于Span的KTX拓展。

https://developer.android.google.cn/kotlin/ktx/extensions-list#androidxcoretext

富文本重点Span的分析

ImageSpan

ImageSpan是富文本中的核心成员,通过ImageSpan,理论上可以实现各种富文本效果的,虽然有些场景的效果差强人意,但足以体现出它的强大,所以,掌握ImageSpan,是掌握富文本的重中之重。下面通过一些场景来分析ImageSpan的核心逻辑和使用方式。

直接使用资源文件

这是ImageSpan的最基本使用方法,代码如下所示。

val textString = SpannableStringBuilder("阅文集团由腾讯文学与原盛大文学整合而成,成立于2015年3月。是数字阅读平台和文学IP培育平台,旗下囊括QQ阅读、起点中文网、新丽传媒等业界品牌。")
textString.setSpan(ImageSpan(this, R.drawable.emoji, DynamicDrawableSpan.ALIGN_BOTTOM), 1, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = textString

使用Drawable文件

通过Drawable,可以通过设置bounds来控制ImageSpan的展示大小,除了通过资源文件来转换Drawable,也可以使用Android API中的各种Drawable。

val textString = SpannableStringBuilder("阅文集团由腾讯文学与原盛大文学整合而成,成立于2015年3月。是数字阅读平台和文学IP培育平台,旗下囊括QQ阅读、起点中文网、新丽传媒等业界品牌。")
val drawable = ContextCompat.getDrawable(this, R.drawable.emoji)
drawable?.let {
    drawable.setBounds(0, 0, 48.dp, 48.dp)
    textString.setSpan(ImageSpan(drawable), 5, 9, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
}
text.text = textString

ImageSpan要是有这么简单,就没有这篇文章了

在使用ImageSpan时,经常会遇到对齐的问题,在插入的Image和文字大小在不同的场景下,对齐的效果是不同的,这也是ImageSpan的各种坑的来源,下面通过几个例子来看下。

ImageSpan高度小于文字高度的场景

当Image高度小于文字高度时,可以通过ImageSpan的verticalAlignment属性来控制其对齐方式,即设置DynamicDrawableSpan.ALIGN_BOTTOM、DynamicDrawableSpan.ALIGN_BASELINE、DynamicDrawableSpan.ALIGN_CENTER。

上面的代码,可以设置为:

drawable.setBounds(0, 0, 8.dp, 8.dp)
textString.setSpan(ImageSpan(drawable, DynamicDrawableSpan.ALIGN_BOTTOM), 5, 9, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

效果如下所示。

图片尺寸设置小一点,能更好的看出差异

ALIGN_BOTTOM:

image-20201223170740938

ALIGN_BASELINE:

image-20201223172005652

ALIGN_CENTER:

image-20201223172127772

在这些情况下,ImageSpan的表现跟设计基本一致,所以,解决ImageSpan的各种坑最简单的方式,就是让ImageSpan的bounds小于文字的高度。

ImageSpan高度大于文字高度的场景

当ImageSpan高度大于文字高度的时候,ALIGN_CENTER就会失效,导致ImageSpan始终是ALIGN_BOTTOM的效果。测试代码如下所示。

drawable.setBounds(0, 0, 40.dp, 40.dp)
textString.setSpan(ImageSpan(drawable, DynamicDrawableSpan.ALIGN_BOTTOM), 5, 9, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
image-20201223174512111

ALIGN_BASELINE:

image-20201223174639558

在这种场景下,要实现ImageSpan的居中对齐,就需要对文字的排版进行修改。

第一种方式:不修改getSize函数,在draw的时候,对内容进行偏移:

override fun draw(canvas: Canvas, text: CharSequence, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
    val b = getCachedDrawable()
    b?.let {
        val fm = paint.fontMetricsInt
        val transY = (y + fm.descent + y + fm.ascent) / 2 - b.bounds.bottom / 2
        canvas.save()
        canvas.translate(x, transY.toFloat())
        b.draw(canvas)
        canvas.restore()
    }
}

y + fm.descent得到字体的descent的Y坐标,y + fm.ascent得到字体的ascent的Y坐标,除以2后获得其中线的Y坐标,而b.bounds.bottom / 2。得到的是Image的中线坐标,相减后获得Image绘制的顶点坐标。

image-20201223193529495

这种方式在ImageSpan尺寸不是很大的时候,是可以的,其原理就是对ImageSpan进行偏移,但是文字的行高是没有发生改变的,也就是像图中这样,多行文本的行高并未发生改变,但是ImageSpan实现居中的效果。

第二种方式,就是将文本的行高属性做修改,也就是让ImageSpan尺寸小于行高,动态将原本文字的行高,改为ImageSpan的尺寸,甚至更大一点,这样ImageSpan自然就可以居中了。

image-20201223193837018

用这种方式处理后,文字和ImageSpan会在新的行参数中整体居中,这种效果应该是比较具有拓展性的,不像第一种会在ImageSpan过大的时候,遮挡下一行的文字。拓展的代码其实很简单,首先在getSize中修改行高,再在draw中对图像偏移,示例代码如下所示。

class ExImageSpan(drawable: Drawable, verticalAlignment: Int) : ImageSpan(drawable, verticalAlignment) {

    private var drawableRef: WeakReference<Drawable>? = null

    override fun getSize(paint: Paint, text: CharSequence?, start: Int, end: Int, fm: Paint.FontMetricsInt?): Int {
        val d = getCachedDrawable()
        d?.let {
            val rect = d.bounds
            if (fm != null) {
                val fmPaint = paint.fontMetricsInt
                val textHeight = fmPaint.descent - fmPaint.ascent
                val imageHeight = rect.bottom - rect.top
                if (imageHeight > textHeight && verticalAlignment == ALIGN_CENTER) {
                    fm.ascent = fmPaint.ascent - (imageHeight - textHeight) / 2
                    fm.top = fmPaint.ascent - (imageHeight - textHeight) / 2
                    fm.bottom = fmPaint.descent + (imageHeight - textHeight) / 2
                    fm.descent = fmPaint.descent + (imageHeight - textHeight) / 2
                } else {
                    fm.ascent = -rect.bottom
                    fm.descent = 0
                    fm.top = fm.ascent
                    fm.bottom = 0
                }
            }
            return rect.right
        }
        return 0
    }

    override fun draw(canvas: Canvas, text: CharSequence?, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
        when (verticalAlignment) {
            ALIGN_CENTER -> {
                canvas.save()
                val fmPaint = paint.fontMetricsInt
                val fontHeight = fmPaint.descent - fmPaint.ascent
                val centerY = y + fmPaint.descent - fontHeight / 2
                val transY = centerY - (drawable.bounds.bottom - drawable.bounds.top) / 2
                canvas.translate(x, transY.toFloat())
                drawable.draw(canvas)
                canvas.restore()
            }
            else -> {
                canvas.save()
                val transY: Int = top + paint.fontMetricsInt.ascent - paint.fontMetricsInt.top
                canvas.translate(x, transY.toFloat())
                d.draw(canvas)
                canvas.restore()
            }
        }
    }

    private fun getCachedDrawable(): Drawable? {
        val wr: WeakReference<Drawable>? = drawableRef
        var d: Drawable? = null
        if (wr != null) {
            d = wr.get()
        }
        if (d == null) {
            d = drawable
            drawableRef = WeakReference<Drawable>(d)
        }
        return d
    }
}

这种方案实际上是从DynamicDrawableSpan源码中得到的,这也是ImageSpan的基类,在这里就找到原生的ImageSpan是如何处理偏移的,参考它的实现,我们只在getSize里面对传入的ImageSpan尺寸>文字高度且对齐方式为ALIGN_CENTER时,才修改其尺寸,这样就做到了在任何尺寸、任何对齐方式下,都可以得到比较完美的对齐效果。

draw里面的其它处理,是为了处理换行和设置setLineSpacing为非默认值的场景。

加载网络图

ImageSpan除了加载本地资源文件外,最常用的还是加载网络图片,借助TextView的TextView.BufferType.SPANNABLE特性,可以很方便的实现网络图的加载刷新,代码如下所示。

const val imageUrl = "https://qdclient-resources-1252317822.cos.ap-chengdu.myqcloud.com/Android/test/maomao1.jpeg"

val textString = SpannableStringBuilder("阅文集团由腾讯文学与原盛大文学整合而成,成立于2015年3月,是数字阅读平台和文学IP培育平台,旗下囊括QQ阅读,起点中文网,新丽传媒等业界品牌。")
val drawable = ContextCompat.getDrawable(this, R.drawable.emoji)

text.setText(textString, TextView.BufferType.SPANNABLE)
val spannableText = text.text as Spannable
drawable?.let {
    drawable.setBounds(0, 0, 48.dp, 48.dp)
    spannableText.setSpan(ImageSpan(drawable), 5, 9, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
}

Glide.with(this).asBitmap().load(imageUrl).into(object : SimpleTarget<Bitmap>() {
    override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
        Handler().postDelayed({
            val bitmapDrawable: Drawable = BitmapDrawable(resources, resource)
            bitmapDrawable.setBounds(0, 0, 200.dp, 200.dp)
            spannableText.setSpan(ImageSpan(bitmapDrawable), 5, 9, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
        }, 3000)
    }
})

这里做了一个默认展位图,并通过延迟,模拟了网络加载耗时的过程。

拓展

在了解了修改ImageSpan的原理之后,再对展示效果做一些拓展,思路就很清晰了,例如增加一个「修改左右边距」的需求,只需要在getSize中增加边距即可,示例代码如下所示。

class MarginImageSpan @JvmOverloads constructor(d: Drawable, verticalAlignment: Int, private val marginLeft: Int, private val marginRight: Int, private val imageWidth: Int = 0) : ImageSpan(d, verticalAlignment) {

    override fun getSize(paint: Paint, text: CharSequence?, start: Int, end: Int, fm: FontMetricsInt?): Int {
        return if (marginLeft != 0 || marginRight != 0) {
            super.getSize(paint, text, start, end, fm)
            imageWidth + marginLeft + marginRight
        } else {
            super.getSize(paint, text, start, end, fm)
        }
    }

    override fun draw(canvas: Canvas, text: CharSequence, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
        canvas.save()
        super.draw(canvas, text, start, end, x + marginLeft, top, y, bottom, paint)
        canvas.restore()
    }
}

调用代码和基本的ImageSpan类似,代码如下。

val drawable = ContextCompat.getDrawable(this, R.drawable.emoji)
drawable?.let {
    drawable.setBounds(0, 0, 48.dp, 48.dp)
    textString.setSpan(MarginImageSpan(drawable, DynamicDrawableSpan.ALIGN_BOTTOM, 20.dp, 20.dp, 48.dp), 1, 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
}

展示效果如图所示。

image-20210128171912615

前面说了很多复杂的富文本样式,都可以通过ImageSpan来实现,下面提供了两种生成ImageSpan的方式,拓展大家的思路。

fun createDrawable(editText: EditText, source: CharSequence): Drawable {
    val editLayout = editText.layout
    val width = editLayout.width
    var layout = DynamicLayout(
        SpannableStringBuilder(),
        editLayout.paint,
        editLayout.width,
        editLayout.alignment,
        editLayout.spacingMultiplier,
        editLayout.spacingAdd,
        true
    )
    val builder = layout.text as SpannableStringBuilder
    builder.clear()
    builder.append(source)
    val want = editLayout.paint.measureText(builder, 0, builder.length).toInt()
    if (want != layout.width) {
        layout = DynamicLayout(
            builder,
            layout.paint,
            min(want, width),
            layout.alignment,
            layout.spacingMultiplier,
            layout.spacingAdd,
            true
        )
    }
    val bitmap = Bitmap.createBitmap(layout.width, layout.height, Bitmap.Config.ARGB_8888)
    val rect = Rect(0, 0, bitmap.width, bitmap.height)
    layout.draw(Canvas(bitmap))
    return BitmapDrawable(bitmap).apply { bounds = rect }
}

通过这个函数,可以很方便的将文本生成Bitmap插入到EditText中。

下面这个函数,则是将一个View转化为Bitmap,再作为ImageSpan进行插入。

fun convertViewToDrawableNew(view: View): Bitmap {
    val spec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
    view.measure(spec, spec)
    view.layout(0, 0, view.measuredWidth, view.measuredHeight)
    val bitmap = Bitmap.createBitmap(view.measuredWidth, view.measuredHeight, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(bitmap)
    val background = view.background
    background?.draw(canvas)
    view.draw(canvas)
    return bitmap
}

通过这个函数,可以很方便自己构造复杂的Layout,再转化为ImageSpan。

ClickableSpan

ClickableSpan是对Span添加交互功能的重要手段,也是富文本处理必不可少的一环。

最基本使用

首先来看下ClickableSpan的最基本使用,代码如下所示。

val textString = SpannableStringBuilder("阅文集团由腾讯文学与原盛大文学整合而成,成立于2015年3月,是数字阅读平台和文学IP培育平台,旗下囊括QQ阅读,起点中文网,新丽传媒等业界品牌。")
textString.setSpan(object : ClickableSpan() {
    override fun onClick(widget: View) {
        Toast.makeText(this@MainActivity, "ClickableSpan1", Toast.LENGTH_SHORT).show()
    }
}, 4, 9, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.highlightColor = Color.LTGRAY
text.text = textString
text.movementMethod = LinkMovementMethod.getInstance()

效果如图所示。

image-20201224112255887

ClickableSpan的点击一定要设置movementMethod才能触发点击效果。

原生的ClickableSpan和ImageSpan一样,几乎不能开箱即用,我们可以发现这样几个常见问题:

  • 选中有默认高亮
  • 有下划线

对于默认选中的高亮效果,可以通过设置highlightColor来解决,这是TextView的默认逻辑,要去掉高亮,只需要将highlightColor设置为透明即可。

text.highlightColor = Color.TRANSPARENT

对于下划线,可以通过修改updateDrawState来实现。

class ExClickableSpan(val onSpanClick: () -> Unit) : ClickableSpan() {

    override fun onClick(widget: View) {
        onSpanClick()
    }

    override fun updateDrawState(ds: TextPaint) {
        ds.color = Color.parseColor("#5790DF")
        ds.isUnderlineText = false
    }
}

展示效果如下。

image-20201224135835188

如果要在ClickableSpan中获取Span中的文字,是不能直接通过getText获取的,还需要对上面的代码进行下改造。

class ExClickableSpan(val onSpanClick: (String) -> Unit) : ClickableSpan() {

    override fun onClick(widget: View) {
        val tv = widget as TextView
        val s = tv.text as Spanned
        val start = s.getSpanStart(this)
        val end = s.getSpanEnd(this)
        onSpanClick(s.subSequence(start, end).toString())
    }

    override fun updateDrawState(ds: TextPaint) {
        ds.color = Color.parseColor("#5790DF")
        ds.isUnderlineText = false
    }
}

// 使用
textString.setSpan(ExClickableSpan {
    Toast.makeText(this@MainActivity, "ClickableSpan1 $it", Toast.LENGTH_SHORT).show()
}, 4, 9, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

响应点击事件

接下来继续添加多个ClickableSpan,同时给Text整体也加上点击事件,代码如下所示。

val textString = SpannableStringBuilder("阅文集团由腾讯文学与原盛大文学整合而成,成立于2015年3月,是数字阅读平台和文学IP培育平台,旗下囊括QQ阅读,起点中文网,新丽传媒等业界品牌。")
textString.setSpan(ExClickableSpan {
    Toast.makeText(this@MainActivity, "ClickableSpan1 $it", Toast.LENGTH_SHORT).show()
}, 4, 9, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
textString.setSpan(ExClickableSpan {
    Toast.makeText(this@MainActivity, "ClickableSpan2 $it", Toast.LENGTH_SHORT).show()
}, 11, 15, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.setOnClickListener {
    Toast.makeText(this@MainActivity, "Text", Toast.LENGTH_SHORT).show()
}
text.highlightColor = Color.LTGRAY
text.text = textString
text.movementMethod = LinkMovementMethod.getInstance()

这时候,我们给TextView设置点击事件,同时给TextView中的两个不同的Span设置点击事件,这时候再点击,就会发现ClickableSpan的一个新的问题,那就是在点击ClickableSpan的时候,TextView如果设置了点击事件,则也会响应,也就是说,点击ClickableSpan区域,会触发两次点击事件。

针对这个问题,解决方案一般有两种。

外层解决法

这种方式一般会在TextView外面套一层用于处理点击事件的Container,例如FrameLayout,将整体的点击事件设置在FrameLayout中,ClickableSpan的事件依然在ClickableSpan中设置,同时,修改movementMethod。

object MyLinkedMovementMethod : LinkMovementMethod() {
    override fun onTouchEvent(widget: TextView, buffer: Spannable, event: MotionEvent): Boolean {
        val isConsume = super.onTouchEvent(widget, buffer, event)
        if (!isConsume && event.action == MotionEvent.ACTION_UP) {
            val parent = widget.parent
            if (parent is ViewGroup) {
                parent.performClick()
            }
        }
        return isConsume
    }
}

调用时,将整体的点击事件设置给外层Container,代码如下所示。

val textString = SpannableStringBuilder("阅文集团由腾讯文学与原盛大文学整合而成,成立于2015年3月,是数字阅读平台和文学IP培育平台,旗下囊括QQ阅读,起点中文网,新丽传媒等业界品牌。")
textString.setSpan(ExClickableSpan {
    Toast.makeText(this@MainActivity, "ClickableSpan1 $it", Toast.LENGTH_SHORT).show()
}, 4, 9, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
textString.setSpan(ExClickableSpan {
    Toast.makeText(this@MainActivity, "ClickableSpan2 $it", Toast.LENGTH_SHORT).show()
}, 11, 15, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
container.setOnClickListener {
    Toast.makeText(this@MainActivity, "Text", Toast.LENGTH_SHORT).show()
}
text.highlightColor = Color.TRANSPARENT
text.text = textString
text.movementMethod = MyLinkedMovementMethod

这其中主要有两个修改:

  • 整体的点击事件移交给外层
  • movementMethod修改为自定义的

内层解决法

这种方式直接修改LinkMovementMethod,借助其功能,直接通过托管onTouchEvent来实现,代码如下所示。

object ExLinkMovementMethod : LinkMovementMethod() {
    override fun onTouchEvent(widget: TextView, buffer: Spannable, event: MotionEvent): Boolean {
        val action = event.action
        if (action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_DOWN) {
            var x = event.x.toInt()
            var y = event.y.toInt()
            x -= widget.totalPaddingLeft
            y -= widget.totalPaddingTop
            x += widget.scrollX
            y += widget.scrollY
            val layout = widget.layout
            val line = layout.getLineForVertical(y)
            var off = layout.getOffsetForHorizontal(line, x.toFloat())
            var xLeft = layout.getPrimaryHorizontal(off)
            if (xLeft < x) {
                if (off < widget.length() - 1) {
                    off += 1
                }
            } else {
                if (off > 0) {
                    off -= 1
                }
            }
            val links = buffer.getSpans(off, off, ClickableSpan::class.java)
            if (links.isNotEmpty()) {
                val span = links[0]
                val spanStartOffset = buffer.getSpanStart(span)
                val spanEndOffset = buffer.getSpanEnd(span)
                xLeft = layout.getPrimaryHorizontal(spanStartOffset)
                val bound = Rect()
                val offsetOfLine = layout.getLineForOffset(off)
                layout.getLineBounds(offsetOfLine, bound)
                if (y < bound.top || y > bound.bottom) {
                    return false
                }
                val xRight = layout.getPrimaryHorizontal(spanEndOffset - 1)
                if (xRight > xLeft && (x > xRight || x < xLeft)) {
                    return false
                }
                if (action == MotionEvent.ACTION_UP) {
                    links[0].onClick(widget)
                } else if (action == MotionEvent.ACTION_DOWN) {
                    Selection.setSelection(
                        buffer,
                        buffer.getSpanStart(links[0]),
                        buffer.getSpanEnd(links[0])
                    )
                }
                return true
            } else {
                Selection.removeSelection(buffer)
            }
        }
        return false
    }
}

这种修改的关键点,实际上就是最后的返回值,由return super.onTouchEvent(widget, buffer, event);改为了return false,从而打断传递链。

这种修改方式是当前比较普遍的处理方式,大部分的文章解决ClickableSpan的点击问题,都是采用的这种方式。

val textString = SpannableStringBuilder("阅文集团由腾讯文学与原盛大文学整合而成,成立于2015年3月,是数字阅读平台和文学IP培育平台,旗下囊括QQ阅读,起点中文网,新丽传媒等业界品牌。")
textString.setSpan(ExClickableSpan {
    Toast.makeText(this@MainActivity, "ClickableSpan1 $it", Toast.LENGTH_SHORT).show()
}, 4, 9, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
textString.setSpan(ExClickableSpan {
    Toast.makeText(this@MainActivity, "ClickableSpan2 $it", Toast.LENGTH_SHORT).show()
}, 11, 15, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.setOnClickListener {
    Toast.makeText(this@MainActivity, "Text", Toast.LENGTH_SHORT).show()
}
text.setOnTouchListener { _, event ->
    ExLinkMovementMethod.onTouchEvent(
        text,
        Spannable.Factory.getInstance().newSpannable(text.text), event
    )
}
text.highlightColor = Color.TRANSPARENT
text.text = textString

其中主要的修改点是:

  • 去掉了movementMethod的调用,直接托管onTouchEvent
  • 整体的点击事件和ClickableSpan的点击事件可以同时设置

最佳解决方案

国际惯例,复杂的不一定是最好的,上面的处理都比较复杂,对于我们了解其工作原理来说,还是不错的,但是还有更简单的方法来避免点击冲突的问题,代码如下所示。

text.setOnClickListener {
    if (text.selectionStart == -1 && text.selectionEnd == -1) {
        Toast.makeText(this@MainActivity, "Text", Toast.LENGTH_SHORT).show()
    }
}

通过这种方式,不用做其它设置,只需要在TextView的click事件上增加一层判断即可。因为当点击ClickableSpan时,TextView的selectionStart和selectionEnd会改变,这时候就不用处理TextView的点击事件了,经过这层过滤,就实现了TextView和ClickableSpan的互斥点击。我们可以封装TextView的setOnClickListener方法,增加一层逻辑即可,这样不用修改其它任何逻辑,应该是处理这个问题,最佳的解决方案。

拓展

ClickableSpan是实现Span交互的重要手段,例如我们可以借助ClickableSpan来实现「点击选中句子」的功能,代码如下所示。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val textString = SpannableStringBuilder("阅文集团由腾讯文学与原盛大文学整合而成,成立于2015年3月,是数字阅读平台和文学IP培育平台,旗下囊括QQ阅读,起点中文网,新丽传媒等业界品牌。")
        val indices = getIndices(textString.toString(), ',')

        var start = 0
        var end: Int
        for (i in 0..indices.size) {
            val clickSpan: ClickableSpan = getClickableSpan()
            end = if (i < indices.size) indices[i] else textString.length
            textString.setSpan(
                clickSpan, start, end,
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
            )
            start = end + 1
        }
        text.highlightColor = Color.CYAN
        text.text = textString
        text.movementMethod = LinkMovementMethod.getInstance()
    }

    private fun getClickableSpan(): ClickableSpan {
        return object : ClickableSpan() {
            override fun onClick(widget: View) {
                val tv = widget as TextView
                tv.text.subSequence(
                    tv.selectionStart,
                    tv.selectionEnd
                ).toString()
            }

            override fun updateDrawState(ds: TextPaint) {
                ds.isUnderlineText = false
            }
        }
    }

    private fun getIndices(text: String, char: Char): MutableList<Int> {
        var pos = text.indexOf(char, 0)
        val indices: MutableList<Int> = mutableListOf()
        while (pos != -1) {
            indices.add(pos)
            pos = text.indexOf(char, pos + 1)
        }
        return indices
    }
}

点击不同的句子,会触发ClickableSpan的效果,如下所示。

image-20201224104928030

其原理就是设置ClickableSpan的点击色为Cyan,同时对整个文案进行断句,按句设置ClickableSpan,这样就实现了点击选中的功能。

ReplacementSpan

ReplacementSpan是个抽象类,主要提供了两个抽象方法getSize和draw,getSize返回当前span需要的宽度,draw用来绘制span到Canvas,有了Canvas后,就可以使用Canvas的API来实现各种绘制功能了,这也是ReplacementSpan的强大之处。

ReplacementSpan的draw函数会在TextView绘制时调用,我们可以借助其返回的这些参数来帮助我们进行绘制

下面这个代码,就演示了ReplacementSpan的基本使用方式。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val textString = SpannableString("阅文集团(股票代码:0772.HK)由腾讯文学与原盛大文学整合而成,成立于2015年3月。是数字阅读平台和文学IP培育平台,旗下囊括QQ阅读、起点中文网、新丽传媒等业界品牌。")
        textString.setSpan(RoundRectBackGroundSpan(Color.BLACK, Color.CYAN, 16F), 0, 4, SPAN_INCLUSIVE_INCLUSIVE)
        text.text = textString
    }
}

class RoundRectBackGroundSpan(private val colorText: Int, private val colorBg: Int, private val radius: Float) : ReplacementSpan() {
    private var spanSize = 0

    override fun getSize(paint: Paint, text: CharSequence?, start: Int, end: Int, fm: Paint.FontMetricsInt?): Int {
        spanSize = (paint.measureText(text, start, end) + 2 * radius).toInt()
        return spanSize
    }

    override fun draw(canvas: Canvas, text: CharSequence?, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
        paint.apply {
            color = colorBg
            isAntiAlias = true
        }
        val rect = RectF(x, y + paint.ascent(), x + spanSize, y + paint.descent())
        canvas.drawRoundRect(rect, radius, radius, paint)
        paint.color = colorText
        canvas.drawText(text.toString(), start, end, x + radius, y.toFloat(), paint)
    }
}
image-20201222153629569

ReplacementSpan是最常用的自定义Span方式,借助它,你可以将文本中的特定字符,修改为新的Span,同时,借助Canvas,你可以非常轻松的设置各种样式。

ReplacementSpan的使用场景非常多,毕竟可以完全掌握绘制能力,下面通过几个常用的使用场景,来演示下ReplacementSpan的使用步骤。

除了ReplacementSpan之外,DynamicDrawableSpan也是一个很常用的拓展基类。

常用场景-添加标签

这是一个比较常用的使用场景,我们可以在要添加标签的文字前,拼上一个默认的占位字符,再通过ReplacementSpan来替换占位字符,从而实现标签的绘制,代码如下所示。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val textString = SpannableStringBuilder(" ")
        textString.append("阅文集团由腾讯文学与原盛大文学整合而成,成立于2015年3月。是数字阅读平台和文学IP培育平台,旗下囊括QQ阅读、起点中文网、新丽传媒等业界品牌。")
        textString.setSpan(RoundBackgroundColorSpan(Color.RED, Color.WHITE, 8, "彩彩彩"), 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
        text.text = textString
    }
}

class RoundBackgroundColorSpan(private val bgColor: Int, private val textColor: Int, private val radius: Int, private val textString: String) : ReplacementSpan() {

    private var spanWidth = 0

    override fun getSize(paint: Paint, text: CharSequence?, start: Int, end: Int, fm: FontMetricsInt?): Int {
        return ((paint.measureText(textString, 0, textString.length) + 2 * radius).toInt()).also { spanWidth = it }
    }

    override fun draw(canvas: Canvas, text: CharSequence?, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
        val originalColor = paint.color
        paint.color = bgColor
        paint.isAntiAlias = true
        val rectF = RectF(x, y + paint.ascent(), x + spanWidth, y + paint.descent())
        canvas.drawRoundRect(rectF, radius.toFloat(), radius.toFloat(), paint)
        paint.color = textColor
        canvas.drawText(textString, x + radius, y.toFloat(), paint)
        paint.color = originalColor
    }
}

效果如图所示。

image-20201222174750825

在知道原理后,就可以很方便的绘制各种效果,例如渐变、边框等等,下面以渐变为例。

class RoundBackgroundColorSpan(private val bgColor: Int, private val textColor: Int, private val radius: Int, private val textString: String) : ReplacementSpan() {

    private var spanWidth = 0

    override fun getSize(paint: Paint, text: CharSequence?, start: Int, end: Int, fm: Paint.FontMetricsInt?): Int {
        return ((paint.measureText(textString, 0, textString.length) + 2 * radius).toInt()).also { spanWidth = it }
    }

    override fun draw(canvas: Canvas, text: CharSequence?, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
        val newPaint = Paint().apply {
            isAntiAlias = true
            color = textColor
            textSize = paint.textSize
        }
        val rectF = RectF(x, y + paint.ascent(), x + spanWidth, y + paint.descent())
        val linearGradient = LinearGradient(
                0f, 0f, rectF.right, rectF.bottom,
                Color.RED,
                Color.BLUE,
                Shader.TileMode.CLAMP)
        newPaint.shader = linearGradient
        canvas.drawRoundRect(rectF, radius.toFloat(), radius.toFloat(), newPaint)
        newPaint.shader = null
        canvas.drawText(textString, x + radius, y.toFloat(), newPaint)
    }
}

展示效果如图所示。

image-20210205163918758

需要注意的是,在混合使用多个Span时,由于ReplacementSpan会改变Span的宽度,所以一般需要最先设置ReplacementSpan,再设置其它Span,避免由于调整尺寸后导致坐标的变化,出现例如ClickableSpan点击错位的问题。


向大家推荐下我的网站 https://xuyisheng.top/  点击原文一键直达

专注 Android-Kotlin-Flutter 欢迎大家访问


浏览 64
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报