真·富文本編輯器的演進(jìn)之路-Span開(kāi)胃菜

Span的基礎(chǔ)性概念分析

國(guó)際慣例，官網(wǎng)鎮(zhèn)樓，這是對(duì)Span最好的全局概覽。

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

Span種類

Span通常按照下面兩個(gè)區(qū)別進(jìn)行分類，即根據(jù)Span修改Text外觀或者尺寸和Span影響的Text范圍來(lái)進(jìn)行分類，在Android中，默認(rèn)提供了20多種Span。

影響Text的外觀和尺寸

Span可以對(duì)Text的部分外觀進(jìn)行修改，例如修改文字顏色、背景色、刪除線、下劃線等等。這樣的Span都是繼承自CharacterStyle，例如UnderlineSpan。

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

僅影響Text外觀的Span會(huì)觸發(fā)重新繪制Text，單是不會(huì)觸發(fā)重新計(jì)算布局。這些Span會(huì)實(shí)現(xiàn)UpdateAppearance并擴(kuò)展CharacterStyle，CharacterStyle子類通過(guò)提供更新TextPaint的設(shè)置來(lái)定義如何重新繪制文本。

Span還可以對(duì)Text的尺寸進(jìn)行修改，例如RelativeSizeSpan，將Text的尺寸進(jìn)行修改，代碼如下所示。

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

影響文本尺寸的Span會(huì)導(dǎo)致TextView重新測(cè)量文本，以實(shí)現(xiàn)正確的布局和渲染，例如，更改文本大小可能會(huì)導(dǎo)致字詞顯示在不同的行上。所以需要觸發(fā)重新測(cè)量、重新計(jì)算文本布局，以及重新繪制文本。

這些Span通常會(huì)擴(kuò)展MetricAffectingSpan，該類為抽象類，它允許子類通過(guò)提供對(duì)TextPaint的訪問(wèn)權(quán)限來(lái)定義Span影響文本測(cè)量的方式。由于MetricAffectingSpan是繼承自CharacterSpan，因此子類也會(huì)影響字符級(jí)別的文本外觀。

影響Text的范圍

有些Span只會(huì)影響單個(gè)字符，類似于UnderlineSpan的行為，你可以控制其作用于有限的字符，例如BackgroundColorSpan。

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

還有些Span可以直接作用在整個(gè)Paragraph上，例如QuoteSpan。

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

在 Android 中，段落是基于換行符 (\n) 定義的

常用的Span流水賬

系統(tǒng)提供了非常多的Span種類，大部分時(shí)候，這些Span都可以滿足我們的開(kāi)發(fā)需求了，即使不滿足，也可以通過(guò)研究其源碼，來(lái)修改實(shí)現(xiàn)一個(gè)類似的效果，這里簡(jiǎn)單的記錄下這些基礎(chǔ)Span的常規(guī)用法和功能，僅僅是流水賬而已，為了保證文章的完整性而寫(xiě)的，有基礎(chǔ)的開(kāi)發(fā)者可以直接跳過(guò)這部分。

• BackgroundColorSpan 修改背景色

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

• ClickableSpan 設(shè)置點(diǎn)擊事件

SpannableString("XXXXXXXX").setSpan(object : ClickableSpan() {
    override fun onClick(widget: View) {}
}, 0, 8, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.movementMethod = LinkMovementMethod.getInstance()

如果你想及設(shè)置點(diǎn)擊又設(shè)置顏色或下劃線的話，ClickableSpan也提供了updateDrawState來(lái)設(shè)置顏色下劃線等屬性

• ForegroundColorSpan 文本顏色（前景色）

val span = ForegroundColorSpan()
val spannableString = SpannableString("CONTENT")
spannableString.setSpan(span, 0, spannableString.length / 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = spannableString

• DrawableMarginSpan  文本開(kāi)頭插入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：段落前圓點(diǎn)

val span = BulletSpan(15, Color.RED)
val spannableString = SpannableString("CONTENT")
spannableString.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = spannableString

• AbsoluteSizeSpan 字體絕對(duì)大?。ㄎ谋咀煮w）

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類似，只是參數(shù)是類型不同

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 字體相對(duì)大?。ㄎ谋咀煮w）

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 下標(biāo)

val span = SubscriptSpan()
val spannableString = SpannableString("CONTENT")
spannableString.setSpan(span, 0, spannableString.length / 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = spannableString

• SuperscriptSpan 上標(biāo)（數(shù)學(xué)公式會(huì)用到），甚至可以用來(lái)做紅點(diǎn)

val span = SuperscriptSpan()
val spannableString = SpannableString("CONTENT")
spannableString.setSpan(span, 0, spannableString.length / 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = spannableString

紅點(diǎn)（有點(diǎn)取巧，不推薦）

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 設(shè)置文本字體

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：用來(lái)將字符串中的"\t"替換成相應(yīng)的空行，普通情況下"\t"不會(huì)進(jìn)行顯示，當(dāng)使用TabStopSpan可以將"\t"替換成相應(yīng)長(zhǎng)度的空白區(qū)域。

• AlignmentSpan.Standard  文本對(duì)齊方式

val string = SpannableString("Text with opposite alignment")
string.setSpan(
    AlignmentSpan.Standard(Layout.Alignment.ALIGN_OPPOSITE), 0,
    string.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)

• LeadingMarginSpan：段落縮進(jìn)

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，它封裝了對(duì)行對(duì)象的Background，其內(nèi)部有個(gè)簡(jiǎn)單的實(shí)現(xiàn)—Standard。如果需要在行上對(duì)Background進(jìn)行修改，那么就可以重寫(xiě)LineBackgroundSpan。

val textString = SpannableString("閱文集團(tuán)(股票代碼：0772.HK)由騰訊文學(xué)與原盛大文學(xué)整合而成，成立于2015年3月。是數(shù)字閱讀平臺(tái)和文學(xué)IP培育平臺(tái)，旗下囊括QQ閱讀、起點(diǎn)中文網(wǎng)、新麗傳媒等業(yè)界品牌。")
textString.setSpan(LineBackgroundSpan.Standard(Color.CYAN), 0, 4, SPAN_INCLUSIVE_INCLUSIVE)
text.text = textString

• LineHeightSpan：調(diào)整行高的Span，可以統(tǒng)一不同字體導(dǎo)致的行高不一致的問(wèn)題。

textString.append("閱文集團(tuán)由騰訊文學(xué)與原盛大文學(xué)整合而成，成立于2015年3月。是數(shù)字閱讀平臺(tái)和文學(xué)IP培育平臺(tái)，旗下囊括QQ閱讀、起點(diǎn)中文網(wǎng)、新麗傳媒等業(yè)界品牌。")
textString.setSpan(LineHeightSpan.Standard(90), 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

Span的邊界效應(yīng)

所有的Span在插入時(shí)，都需要設(shè)置flag，這個(gè)flag，就是控制在已有的Span邊界插入新的String時(shí)的包含行為，通過(guò)下面這個(gè)例子來(lái)進(jìn)行下演示。

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

• SPAN_EXCLUSIVE_INCLUSIVE

Span的falg標(biāo)志位標(biāo)記了Span是否應(yīng)該擴(kuò)展至包含插入文本的開(kāi)始和結(jié)束的點(diǎn)。任何標(biāo)志位設(shè)置以后，只要插入文本的位置位于開(kāi)始位置和結(jié)束位置之間，Span就會(huì)自動(dòng)的擴(kuò)展。

Span的Flag有下面這些枚舉：

• Spanned.SPAN_EXCLUSIVE_EXCLUSIVE：不包含兩端start和end所在的端點(diǎn)，即(a,b)
• Spanned.SPAN_EXCLUSIVE_INCLUSIVE：不包含端start，但包含end所在的端點(diǎn)，即(a,b]
• Spanned.SPAN_INCLUSIVE_EXCLUSIVE：包含兩端start，但不包含end所在的端點(diǎn)，即[a,b)
• Spanned.SPAN_INCLUSIVE_INCLUSIVE：包含兩端start和end所在的端點(diǎn)，即[a,b]

創(chuàng)建Span的數(shù)據(jù)結(jié)構(gòu)

當(dāng)我們使用Span時(shí)，主要會(huì)使用到下面幾個(gè)類，SpannedString、SpannableString 或 SpannableStringBuilder。它們的差異可以用官網(wǎng)的這張圖來(lái)表示。

Span常用方法

Span中有很多函數(shù)用來(lái)幫助開(kāi)發(fā)者獲取Span相關(guān)的狀態(tài)和數(shù)據(jù)。

• getSpanStart(Object tag)，用來(lái)獲取一個(gè)span開(kāi)始的位置。

• getSpanEnd(Object tag)，用來(lái)獲取一個(gè)span的結(jié)束位置。

• getSpanFlags(Object tag)用來(lái)獲取這個(gè)span設(shè)置的flag。

• getSpans(int start, int end, Classtype)，用來(lái)獲取從start到end的位置上所有的特定類型的span，這個(gè)方法非常有用，它可以獲取Text中，指定類型的Span，這在很多場(chǎng)景下都是非常有用的。

• removeSpan(span)，這個(gè)方法用來(lái)移除指定的Span實(shí)例，可以用這個(gè)方法來(lái)移除Span的展示效果。

• nextSpanTransition(int start, int limit, Class type)，這個(gè)方法會(huì)在你指定的文本范圍內(nèi)，返回下一個(gè)你指定的Span類型的開(kāi)始位置，與getSpan方法類似，但屬于迭代器類型，通過(guò)這個(gè)方法，我們可以遍歷指定的Span類型 ，而且它的效率要比getSpan方法高。

• TextUtils.dumpSpans，這個(gè)方法可以將當(dāng)前Text下的所有Span實(shí)例給dump出來(lái)，在調(diào)試的時(shí)候非常有用。

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

getSpans排序問(wèn)題

Android7.0系統(tǒng)以上getSpans方法會(huì)返回亂序的排列數(shù)組，這跟它的內(nèi)部實(shí)現(xiàn)有關(guān)，所以，在使用getSpans時(shí)，如果希望獲取順序的排列數(shù)組，那就需要對(duì)返回結(jié)果進(jìn)行手動(dòng)排序，代碼如下所示。

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)方法來(lái)迭代的話，就不會(huì)有這樣的問(wèn)題，它會(huì)按照顯示順序進(jìn)行獲取。

setSpan的思考

我們來(lái)思考下，Span具體是什么。在setSpan的方法簽名里，span的參數(shù)類型是一個(gè)Any類型，通常我們會(huì)這樣使用。

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

通常情況下，setSpan的方法會(huì)傳入一個(gè)xxxSpan，特別是繼承系統(tǒng)的MetricAffectingSpan等，用于修改Span的樣式，但實(shí)際上，這個(gè)參數(shù)是個(gè)Any類型，你可以給它設(shè)置任何一個(gè)類，例如：

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

上面我們?cè)O(shè)置了一個(gè)Span，這個(gè)Span是個(gè)單純的類實(shí)例，所以Span不會(huì)有任何樣式上的改變，但是這段文本已經(jīng)被標(biāo)記為User類型，你可以理解為User類是一個(gè)未修改任何樣式的Span。

那么這樣做的好處是什么呢？

這樣的設(shè)計(jì)方式，實(shí)際上是將Span拓展成了一個(gè)綜合性的拓展平臺(tái)，不僅僅是附加樣式修改，更可以做很多其它的類型標(biāo)記，這就可以很好的拓展TextView的業(yè)務(wù)場(chǎng)景了，一段文字中甚至可以包含很多非展示性的業(yè)務(wù)場(chǎng)景。

自定義Span

通常情況下，我們都可以通過(guò)使用Android原生提供的Span來(lái)完成開(kāi)發(fā)，但大部分場(chǎng)景下，肯定是需要能夠支持自定義Span的，官方文檔給出了下面的建議：

• 在「字符級(jí)別」影響文本 -> CharacterStyle
• 在「段落級(jí)別」影響文本 -> ParagraphStyle
• 影響「文本外觀」-> UpdateAppearance
• 影響「文本尺寸」-> UpdateLayout

不過(guò)絕大多數(shù)場(chǎng)景下，我們不太會(huì)自定義到這么深入的級(jí)別，選擇合適的已有Span進(jìn)行拓展，是一個(gè)事半功倍的方法。

復(fù)合Span效果

例如我們需要實(shí)現(xiàn)一個(gè)復(fù)合效果的Span，它可以以一定的比例增加文本的大小，類似RelativeSizeSpan的效果，同時(shí)支持設(shè)置文本的顏色，例如ForegroundColorSpan的效果。在這種情況下，我們可以擴(kuò)展RelativeSizeSpan，通過(guò)重寫(xiě)updateMeasureState方法，在繪制狀態(tài)時(shí)設(shè)置TextPaint的顏色，從而實(shí)現(xiàn)這個(gè)復(fù)合效果，代碼如下所示。

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

邊框標(biāo)簽

ReplacementSpan是自定義Span的最重要角色，后面會(huì)詳細(xì)講解ReplacementSpan，這里只簡(jiǎn)單的介紹下通過(guò)ReplacementSpan實(shí)現(xiàn)自定義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，但這次是通過(guò)重寫(xiě)它的getSize方法來(lái)實(shí)現(xiàn)增加段間距的效果，代碼如下所示。

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

展示效果如下所示。

Text around Image

借助LeadingMarginSpan2，可以實(shí)現(xiàn)Text前的留白，這樣就可以實(shí)現(xiàn)文字環(huán)繞圖片的效果。

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
}

使用時(shí)，只需要根據(jù)Image計(jì)算好TextView需要留出的行數(shù)和邊距即可，代碼如下所示。

textString.append("閱文集團(tuán)由騰訊文學(xué)與原盛大文學(xué)整合而成，成立于2015年3月。是數(shù)字閱讀平臺(tái)和文學(xué)IP培育平臺(tái)，旗下囊括QQ閱讀、起點(diǎn)中文網(wǎng)、新麗傳媒等業(yè)界品牌。")
textString.setSpan(TextRoundSpan(3, 200), 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = textString

展示效果如圖。

有了這樣的空白，就可以很方便的在這里插入Image了，從而實(shí)現(xiàn)文字環(huán)繞的效果。

CharacterStyle、UpdateAppearance

前面介紹了官方推薦的自定義Span方式，下面就以一個(gè)簡(jiǎn)單的例子來(lái)演示下，如何在「字符級(jí)別」修改「文字外觀」，代碼如下所示。

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
    }
}

展示效果如圖所示。

Span進(jìn)階

Span是一個(gè)非常強(qiáng)大的概念，前面對(duì)Span的了解，只能說(shuō)是九牛一毛，對(duì)于富文本來(lái)說(shuō)，Span還有很多需要進(jìn)一步探索的內(nèi)容，下面這部分，我們將更深入的了解Span的一些富文本特性。

SpanWatcher

SpanWatcher類似TextWatcher，他們都是對(duì)文本變化的監(jiān)聽(tīng)回調(diào)，對(duì)一個(gè)Spannable對(duì)象設(shè)置SpanWatcher之后，在它范圍內(nèi)的Span如果發(fā)生變化，則會(huì)通知到該SpanWatcher。

SpanWatcher繼承自NoCopySpan，在TextView的setText方法中，會(huì)基于傳入的文本創(chuàng)建一個(gè)新的Spannable對(duì)象，在這個(gè)過(guò)程中SpanWatcher不會(huì)被復(fù)制到新的Spannable對(duì)象上，所以需要先設(shè)置TextView的文本，再?gòu)腡extView取出Spannale對(duì)象調(diào)用下面這個(gè)方法：

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

或者使用Spannable.Factory()來(lái)進(jìn)行設(shè)置。

Selection

Selection用于在Edittext中執(zhí)行選中功能，在開(kāi)發(fā)富文本編輯器的時(shí)候，這是必不可少的的部分，而且Selection獨(dú)立于EditText，可以在不使用EditText的情況下，操作光標(biāo)的選中。

• selectionStart表示在選擇過(guò)程中不變的光標(biāo)位置
• selectionEnd表示在選擇過(guò)程中移動(dòng)的位置

這一點(diǎn)很重要，Start和End并不是指光標(biāo)的起始位置和結(jié)束位置，而是在一次操作下，移動(dòng)和固定的光標(biāo)位置。

• Selection狀態(tài)具有起點(diǎn)（start）和終點(diǎn)(end)，而start與end反映在文本中，其實(shí)是兩個(gè)NoCopySpan: START， END

• 光標(biāo)是一種特殊的選中狀態(tài)，start與end在同一位置

所以知道了selectionStart/selectionEnd，以及光標(biāo)的移動(dòng)方向之后，就可以得出下面幾種場(chǎng)景：

對(duì)于Selection.setSelection(Spannable text, int start, int stop)方法來(lái)說(shuō)，如果start != stop，那么start表示選擇過(guò)程中不變的光標(biāo)，stop表示變化的光標(biāo)

Span最佳實(shí)踐

為現(xiàn)有Text創(chuàng)建Span

當(dāng)TextView調(diào)用setText之后，TextView中的文本將變?yōu)椴豢勺冾愋停@時(shí)候如果要修改文本或者為現(xiàn)有文本創(chuàng)建Span，就必須重新構(gòu)建Spannable對(duì)象并再次調(diào)用setText，而這就會(huì)重新觸發(fā)渲染和布局，在這種場(chǎng)景下，會(huì)造成Spannable的資源浪費(fèi)，這時(shí)候，就可以使用BufferType.SPANNABLE的方式來(lái)創(chuàng)建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)

通過(guò)這種方式，就可以讓TextView在創(chuàng)建Spannable對(duì)象時(shí)，將內(nèi)容標(biāo)記為可變類型，這樣后續(xù)再更新Span就不會(huì)再造成資源浪費(fèi)，在更新后，TextView會(huì)自動(dòng)更新Span的修改。

當(dāng)修改了已有Span的屬性后，需要調(diào)用invalidate或者requestLayout進(jìn)行刷新。

KTX拓展

KTX中，Kotlin封裝了很多對(duì)Span的語(yǔ)法糖，大家可以參考官方的鏈接，了解更多的關(guān)于Span的KTX拓展。

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

富文本重點(diǎn)Span的分析

ImageSpan

ImageSpan是富文本中的核心成員，通過(guò)ImageSpan，理論上可以實(shí)現(xiàn)各種富文本效果的，雖然有些場(chǎng)景的效果差強(qiáng)人意，但足以體現(xiàn)出它的強(qiáng)大，所以，掌握ImageSpan，是掌握富文本的重中之重。下面通過(guò)一些場(chǎng)景來(lái)分析ImageSpan的核心邏輯和使用方式。

直接使用資源文件

這是ImageSpan的最基本使用方法，代碼如下所示。

val textString = SpannableStringBuilder("閱文集團(tuán)由騰訊文學(xué)與原盛大文學(xué)整合而成，成立于2015年3月。是數(shù)字閱讀平臺(tái)和文學(xué)IP培育平臺(tái)，旗下囊括QQ閱讀、起點(diǎn)中文網(wǎng)、新麗傳媒等業(yè)界品牌。")
textString.setSpan(ImageSpan(this, R.drawable.emoji, DynamicDrawableSpan.ALIGN_BOTTOM), 1, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
text.text = textString

使用Drawable文件

通過(guò)Drawable，可以通過(guò)設(shè)置bounds來(lái)控制ImageSpan的展示大小，除了通過(guò)資源文件來(lái)轉(zhuǎn)換Drawable，也可以使用Android API中的各種Drawable。

val textString = SpannableStringBuilder("閱文集團(tuán)由騰訊文學(xué)與原盛大文學(xué)整合而成，成立于2015年3月。是數(shù)字閱讀平臺(tái)和文學(xué)IP培育平臺(tái)，旗下囊括QQ閱讀、起點(diǎn)中文網(wǎng)、新麗傳媒等業(yè)界品牌。")
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要是有這么簡(jiǎn)單，就沒(méi)有這篇文章了

在使用ImageSpan時(shí)，經(jīng)常會(huì)遇到對(duì)齊的問(wèn)題，在插入的Image和文字大小在不同的場(chǎng)景下，對(duì)齊的效果是不同的，這也是ImageSpan的各種坑的來(lái)源，下面通過(guò)幾個(gè)例子來(lái)看下。

ImageSpan高度小于文字高度的場(chǎng)景

當(dāng)Image高度小于文字高度時(shí)，可以通過(guò)ImageSpan的verticalAlignment屬性來(lái)控制其對(duì)齊方式，即設(shè)置DynamicDrawableSpan.ALIGN_BOTTOM、DynamicDrawableSpan.ALIGN_BASELINE、DynamicDrawableSpan.ALIGN_CENTER。

上面的代碼，可以設(shè)置為：

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

效果如下所示。

圖片尺寸設(shè)置小一點(diǎn)，能更好的看出差異

ALIGN_BOTTOM：

ALIGN_BASELINE：

ALIGN_CENTER：

在這些情況下，ImageSpan的表現(xiàn)跟設(shè)計(jì)基本一致，所以，解決ImageSpan的各種坑最簡(jiǎn)單的方式，就是讓ImageSpan的bounds小于文字的高度。

ImageSpan高度大于文字高度的場(chǎng)景

當(dāng)ImageSpan高度大于文字高度的時(shí)候，ALIGN_CENTER就會(huì)失效，導(dǎo)致ImageSpan始終是ALIGN_BOTTOM的效果。測(cè)試代碼如下所示。

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

ALIGN_BASELINE：

在這種場(chǎng)景下，要實(shí)現(xiàn)ImageSpan的居中對(duì)齊，就需要對(duì)文字的排版進(jìn)行修改。

第一種方式：不修改getSize函數(shù)，在draw的時(shí)候，對(duì)內(nèi)容進(jìn)行偏移：

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坐標(biāo)，y + fm.ascent得到字體的ascent的Y坐標(biāo)，除以2后獲得其中線的Y坐標(biāo)，而b.bounds.bottom / 2。得到的是Image的中線坐標(biāo)，相減后獲得Image繪制的頂點(diǎn)坐標(biāo)。

這種方式在ImageSpan尺寸不是很大的時(shí)候，是可以的，其原理就是對(duì)ImageSpan進(jìn)行偏移，但是文字的行高是沒(méi)有發(fā)生改變的，也就是像圖中這樣，多行文本的行高并未發(fā)生改變，但是ImageSpan實(shí)現(xiàn)居中的效果。

第二種方式，就是將文本的行高屬性做修改，也就是讓ImageSpan尺寸小于行高，動(dòng)態(tài)將原本文字的行高，改為ImageSpan的尺寸，甚至更大一點(diǎn)，這樣ImageSpan自然就可以居中了。

用這種方式處理后，文字和ImageSpan會(huì)在新的行參數(shù)中整體居中，這種效果應(yīng)該是比較具有拓展性的，不像第一種會(huì)在ImageSpan過(guò)大的時(shí)候，遮擋下一行的文字。拓展的代碼其實(shí)很簡(jiǎn)單，首先在getSize中修改行高，再在draw中對(duì)圖像偏移，示例代碼如下所示。

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
    }
}

這種方案實(shí)際上是從DynamicDrawableSpan源碼中得到的，這也是ImageSpan的基類，在這里就找到原生的ImageSpan是如何處理偏移的，參考它的實(shí)現(xiàn)，我們只在getSize里面對(duì)傳入的ImageSpan尺寸>文字高度且對(duì)齊方式為ALIGN_CENTER時(shí)，才修改其尺寸，這樣就做到了在任何尺寸、任何對(duì)齊方式下，都可以得到比較完美的對(duì)齊效果。

draw里面的其它處理，是為了處理?yè)Q行和設(shè)置setLineSpacing為非默認(rèn)值的場(chǎng)景。

加載網(wǎng)絡(luò)圖

ImageSpan除了加載本地資源文件外，最常用的還是加載網(wǎng)絡(luò)圖片，借助TextView的TextView.BufferType.SPANNABLE特性，可以很方便的實(shí)現(xiàn)網(wǎng)絡(luò)圖的加載刷新，代碼如下所示。

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

val textString = SpannableStringBuilder("閱文集團(tuán)由騰訊文學(xué)與原盛大文學(xué)整合而成，成立于2015年3月，是數(shù)字閱讀平臺(tái)和文學(xué)IP培育平臺(tái)，旗下囊括QQ閱讀，起點(diǎn)中文網(wǎng)，新麗傳媒等業(yè)界品牌。")
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)
    }
})

這里做了一個(gè)默認(rèn)展位圖，并通過(guò)延遲，模擬了網(wǎng)絡(luò)加載耗時(shí)的過(guò)程。

拓展

在了解了修改ImageSpan的原理之后，再對(duì)展示效果做一些拓展，思路就很清晰了，例如增加一個(gè)「修改左右邊距」的需求，只需要在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()
    }
}

調(diào)用代碼和基本的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)
}

展示效果如圖所示。

前面說(shuō)了很多復(fù)雜的富文本樣式，都可以通過(guò)ImageSpan來(lái)實(shí)現(xiàn)，下面提供了兩種生成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 }
}

通過(guò)這個(gè)函數(shù)，可以很方便的將文本生成Bitmap插入到EditText中。

下面這個(gè)函數(shù)，則是將一個(gè)View轉(zhuǎn)化為Bitmap，再作為ImageSpan進(jìn)行插入。

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
}

通過(guò)這個(gè)函數(shù)，可以很方便自己構(gòu)造復(fù)雜的Layout，再轉(zhuǎn)化為ImageSpan。

ClickableSpan

ClickableSpan是對(duì)Span添加交互功能的重要手段，也是富文本處理必不可少的一環(huán)。

最基本使用

首先來(lái)看下ClickableSpan的最基本使用，代碼如下所示。

val textString = SpannableStringBuilder("閱文集團(tuán)由騰訊文學(xué)與原盛大文學(xué)整合而成，成立于2015年3月，是數(shù)字閱讀平臺(tái)和文學(xué)IP培育平臺(tái)，旗下囊括QQ閱讀，起點(diǎn)中文網(wǎng)，新麗傳媒等業(yè)界品牌。")
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()

效果如圖所示。

ClickableSpan的點(diǎn)擊一定要設(shè)置movementMethod才能觸發(fā)點(diǎn)擊效果。

原生的ClickableSpan和ImageSpan一樣，幾乎不能開(kāi)箱即用，我們可以發(fā)現(xiàn)這樣幾個(gè)常見(jiàn)問(wèn)題：

• 選中有默認(rèn)高亮
• 有下劃線

對(duì)于默認(rèn)選中的高亮效果，可以通過(guò)設(shè)置highlightColor來(lái)解決，這是TextView的默認(rèn)邏輯，要去掉高亮，只需要將highlightColor設(shè)置為透明即可。

text.highlightColor = Color.TRANSPARENT

對(duì)于下劃線，可以通過(guò)修改updateDrawState來(lái)實(shí)現(xiàn)。

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
    }
}

展示效果如下。

如果要在ClickableSpan中獲取Span中的文字，是不能直接通過(guò)getText獲取的，還需要對(duì)上面的代碼進(jìn)行下改造。

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)

響應(yīng)點(diǎn)擊事件

接下來(lái)繼續(xù)添加多個(gè)ClickableSpan，同時(shí)給Text整體也加上點(diǎn)擊事件，代碼如下所示。

val textString = SpannableStringBuilder("閱文集團(tuán)由騰訊文學(xué)與原盛大文學(xué)整合而成，成立于2015年3月，是數(shù)字閱讀平臺(tái)和文學(xué)IP培育平臺(tái)，旗下囊括QQ閱讀，起點(diǎn)中文網(wǎng)，新麗傳媒等業(yè)界品牌。")
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()

這時(shí)候，我們給TextView設(shè)置點(diǎn)擊事件，同時(shí)給TextView中的兩個(gè)不同的Span設(shè)置點(diǎn)擊事件，這時(shí)候再點(diǎn)擊，就會(huì)發(fā)現(xiàn)ClickableSpan的一個(gè)新的問(wèn)題，那就是在點(diǎn)擊ClickableSpan的時(shí)候，TextView如果設(shè)置了點(diǎn)擊事件，則也會(huì)響應(yīng)，也就是說(shuō)，點(diǎn)擊ClickableSpan區(qū)域，會(huì)觸發(fā)兩次點(diǎn)擊事件。

針對(duì)這個(gè)問(wèn)題，解決方案一般有兩種。

外層解決法

這種方式一般會(huì)在TextView外面套一層用于處理點(diǎn)擊事件的Container，例如FrameLayout，將整體的點(diǎn)擊事件設(shè)置在FrameLayout中，ClickableSpan的事件依然在ClickableSpan中設(shè)置，同時(shí)，修改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
    }
}

調(diào)用時(shí)，將整體的點(diǎn)擊事件設(shè)置給外層Container，代碼如下所示。

val textString = SpannableStringBuilder("閱文集團(tuán)由騰訊文學(xué)與原盛大文學(xué)整合而成，成立于2015年3月，是數(shù)字閱讀平臺(tái)和文學(xué)IP培育平臺(tái)，旗下囊括QQ閱讀，起點(diǎn)中文網(wǎng)，新麗傳媒等業(yè)界品牌。")
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

這其中主要有兩個(gè)修改：

• 整體的點(diǎn)擊事件移交給外層
• movementMethod修改為自定義的

內(nèi)層解決法

這種方式直接修改LinkMovementMethod，借助其功能，直接通過(guò)托管onTouchEvent來(lái)實(shí)現(xiàn)，代碼如下所示。

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
    }
}

這種修改的關(guān)鍵點(diǎn)，實(shí)際上就是最后的返回值，由return super.onTouchEvent(widget, buffer, event);改為了return false，從而打斷傳遞鏈。

這種修改方式是當(dāng)前比較普遍的處理方式，大部分的文章解決ClickableSpan的點(diǎn)擊問(wèn)題，都是采用的這種方式。

val textString = SpannableStringBuilder("閱文集團(tuán)由騰訊文學(xué)與原盛大文學(xué)整合而成，成立于2015年3月，是數(shù)字閱讀平臺(tái)和文學(xué)IP培育平臺(tái)，旗下囊括QQ閱讀，起點(diǎn)中文網(wǎng)，新麗傳媒等業(yè)界品牌。")
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

其中主要的修改點(diǎn)是：

• 去掉了movementMethod的調(diào)用，直接托管onTouchEvent
• 整體的點(diǎn)擊事件和ClickableSpan的點(diǎn)擊事件可以同時(shí)設(shè)置

最佳解決方案

國(guó)際慣例，復(fù)雜的不一定是最好的，上面的處理都比較復(fù)雜，對(duì)于我們了解其工作原理來(lái)說(shuō)，還是不錯(cuò)的，但是還有更簡(jiǎn)單的方法來(lái)避免點(diǎn)擊沖突的問(wèn)題，代碼如下所示。

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

通過(guò)這種方式，不用做其它設(shè)置，只需要在TextView的click事件上增加一層判斷即可。因?yàn)楫?dāng)點(diǎn)擊ClickableSpan時(shí)，TextView的selectionStart和selectionEnd會(huì)改變，這時(shí)候就不用處理TextView的點(diǎn)擊事件了，經(jīng)過(guò)這層過(guò)濾，就實(shí)現(xiàn)了TextView和ClickableSpan的互斥點(diǎn)擊。我們可以封裝TextView的setOnClickListener方法，增加一層邏輯即可，這樣不用修改其它任何邏輯，應(yīng)該是處理這個(gè)問(wèn)題，最佳的解決方案。

拓展

ClickableSpan是實(shí)現(xiàn)Span交互的重要手段，例如我們可以借助ClickableSpan來(lái)實(shí)現(xiàn)「點(diǎn)擊選中句子」的功能，代碼如下所示。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val textString = SpannableStringBuilder("閱文集團(tuán)由騰訊文學(xué)與原盛大文學(xué)整合而成，成立于2015年3月，是數(shù)字閱讀平臺(tái)和文學(xué)IP培育平臺(tái)，旗下囊括QQ閱讀，起點(diǎn)中文網(wǎng)，新麗傳媒等業(yè)界品牌。")
        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
    }
}

點(diǎn)擊不同的句子，會(huì)觸發(fā)ClickableSpan的效果，如下所示。

其原理就是設(shè)置ClickableSpan的點(diǎn)擊色為Cyan，同時(shí)對(duì)整個(gè)文案進(jìn)行斷句，按句設(shè)置ClickableSpan，這樣就實(shí)現(xiàn)了點(diǎn)擊選中的功能。

ReplacementSpan

ReplacementSpan是個(gè)抽象類，主要提供了兩個(gè)抽象方法getSize和draw，getSize返回當(dāng)前span需要的寬度，draw用來(lái)繪制span到Canvas，有了Canvas后，就可以使用Canvas的API來(lái)實(shí)現(xiàn)各種繪制功能了，這也是ReplacementSpan的強(qiáng)大之處。

ReplacementSpan的draw函數(shù)會(huì)在TextView繪制時(shí)調(diào)用，我們可以借助其返回的這些參數(shù)來(lái)幫助我們進(jìn)行繪制

下面這個(gè)代碼，就演示了ReplacementSpan的基本使用方式。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val textString = SpannableString("閱文集團(tuán)(股票代碼：0772.HK)由騰訊文學(xué)與原盛大文學(xué)整合而成，成立于2015年3月。是數(shù)字閱讀平臺(tái)和文學(xué)IP培育平臺(tái)，旗下囊括QQ閱讀、起點(diǎn)中文網(wǎng)、新麗傳媒等業(yè)界品牌。")
        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)
    }
}

ReplacementSpan是最常用的自定義Span方式，借助它，你可以將文本中的特定字符，修改為新的Span，同時(shí)，借助Canvas，你可以非常輕松的設(shè)置各種樣式。

ReplacementSpan的使用場(chǎng)景非常多，畢竟可以完全掌握繪制能力，下面通過(guò)幾個(gè)常用的使用場(chǎng)景，來(lái)演示下ReplacementSpan的使用步驟。

除了ReplacementSpan之外，DynamicDrawableSpan也是一個(gè)很常用的拓展基類。

常用場(chǎng)景-添加標(biāo)簽

這是一個(gè)比較常用的使用場(chǎng)景，我們可以在要添加標(biāo)簽的文字前，拼上一個(gè)默認(rèn)的占位字符，再通過(guò)ReplacementSpan來(lái)替換占位字符，從而實(shí)現(xiàn)標(biāo)簽的繪制，代碼如下所示。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val textString = SpannableStringBuilder(" ")
        textString.append("閱文集團(tuán)由騰訊文學(xué)與原盛大文學(xué)整合而成，成立于2015年3月。是數(shù)字閱讀平臺(tái)和文學(xué)IP培育平臺(tái)，旗下囊括QQ閱讀、起點(diǎn)中文網(wǎng)、新麗傳媒等業(yè)界品牌。")
        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
    }
}

效果如圖所示。

在知道原理后，就可以很方便的繪制各種效果，例如漸變、邊框等等，下面以漸變?yōu)槔?/p>

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)
    }
}

展示效果如圖所示。

需要注意的是，在混合使用多個(gè)Span時(shí)，由于ReplacementSpan會(huì)改變Span的寬度，所以一般需要最先設(shè)置ReplacementSpan，再設(shè)置其它Span，避免由于調(diào)整尺寸后導(dǎo)致坐標(biāo)的變化，出現(xiàn)例如ClickableSpan點(diǎn)擊錯(cuò)位的問(wèn)題。