Android學(xué)習(xí)之Span的使用方法詳解

更新時(shí)間：2022年06月13日 08:38:06 作者：JulyYu

這篇文章主要為大家詳細(xì)介紹了Android中各種Span類的使用方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Android有一定的幫助，需要的可以參考一下

Span集合

段落類Span

BulletSpan

為段落開頭增加項(xiàng)目符號(hào)并支持大小、顏色、弧度

span.append(SpannableString("BulletSpan").also {
    it.setSpan(BulletSpan(40, Color.RED), 0, 10, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
})

QuoteSpan

為段落開頭增加垂直引用線

span.append(SpannableString("\nQuoteSpan").also {
    it.setSpan(QuoteSpan(Color.BLUE), 0, 9, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
})

AlignmentSpan

影響段落對(duì)齊方式，支持三種模式：常規(guī)、居中、反方向?qū)R

span.append(SpannableString("\nAlignmentSpan ALIGN_CENTER").also {
    it.setSpan(
        AlignmentSpan.Standard(Layout.Alignment.ALIGN_CENTER),
        0,
        "AlignmentSpan ALIGN_CENTER".length,
        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
    )
})

UnderlineSpan

為文本段落增加下劃線

span.append(SpannableString("\nUnderlineSpan").also {
    it.setSpan(
        UnderlineSpan(),
        0,
        "UnderlineSpan".length,
        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
    )
})

StrikethroughSpan

為文本段落增加刪除線

span.append(SpannableString("\nStrikethroughSpan").also {
    it.setSpan(
        StrikethroughSpan(),
        0,
        "StrikethroughSpan".length,
        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
    )
})

SubscriptSpan

為文本段落實(shí)現(xiàn)下標(biāo)字符效果，縮小文本大小。

span.append(SpannableString("\n123SubscriptSpan456").also {
    it.setSpan(
        SubscriptSpan(),
        3,
        "SubscriptSpan".length,
        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
    )
})

SuperscripSpan

為文本段落實(shí)現(xiàn)上標(biāo)字符效果，縮小文本大小。

span.append(SpannableString("\n123SuperscriptSpan456").also {
    it.setSpan(
        SuperscriptSpan(),
        3,
        "SuperscriptSpan".length,
        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
    )
})

TextApperanceSpan

根據(jù)配置文件信息為文本添加樣式，可塑性更方便易用和復(fù)寫。

span.append(SpannableString("\nTextAppearanceSpan").also {
    it.setSpan(
        TextAppearanceSpan(this@FuncSpannableAc,R.style.specialTextAppearance),
        0,
        "TextAppearanceSpan".length,
        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
    )
})

結(jié)合xml文件樣式配置使用

<style name="specialTextAppearance" parent="@android:style/TextAppearance">
    <item name="android:textColor">@android:color/holo_red_dark</item>
    <item name="android:textColorHighlight">@android:color/holo_blue_bright</item>
    <item name="android:textColorHint">@color/purple_700</item>
    <item name="android:textColorLink">@color/purple_200</item>
    <item name="android:textSize">20sp</item>
    <item name="android:textStyle">italic</item>
</style>

其他Span

BackgroundColorSpan

為文本段落增加背景色效果。

span.setSpan(BackgroundColorSpan(Color.BLUE), 0, 9, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)

ForegroundColorSpan

修改文本顏色，主要是因?yàn)樵谝粋€(gè)段落中可能需要修改某幾個(gè)字符顏色。

span.setSpan(ForegroundColorSpan(Color.RED), 0, 9, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)

TextClickableSpan

為文本段落增加可點(diǎn)擊，可以理解為自定義的URLSpan。因此點(diǎn)擊事件需要開發(fā)者自定義繼承實(shí)現(xiàn)ClickableSpan。

span.setSpan(TextClickableSpan(), 10, 19, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
class TextClickableSpan : ClickableSpan() {
    override fun onClick(widget: View) {
        Toast.makeText(widget.context, "TextClickSpan", Toast.LENGTH_SHORT).show()
    }
}

URLSpan

為文本段落增加超鏈接點(diǎn)擊功能，可跳轉(zhuǎn)到網(wǎng)頁(yè)（外置瀏覽器形式）。

另外一個(gè)小TipssetSpan是可以在同一下標(biāo)設(shè)置多重樣式效果。例如URLSpan和ForegroundColorSpan可重疊使用，原URLSpan超鏈接的文本顏色需要替換結(jié)合ForegroundColorSpan就能實(shí)現(xiàn)。

span.setSpan(
    URLSpan("https://www.baidu.com"),
    20,
    23,
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
// 嘗試超鏈接是否可以修改顏色（結(jié)果是可以說(shuō)明和上述BackgroundColorSpan和ForegroundColorSpan一樣）
span.setSpan(ForegroundColorSpan(Color.RED), 20, 23, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)

StyleSpan

修改文本段落樣式，可設(shè)置樣式較為有限。一般還是推薦使用TextApperanceSpan可配置項(xiàng)更多

span.setSpan(StyleSpan(Typeface.BOLD), 38, 47, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)

ImageSpan

支持在段落中插入圖片資源，支持類型包括可以是Bitmap圖片資源、ResourceId資源文件又或者是本地文件Uri資源。

span.setSpan(
    ImageSpan(this, R.mipmap.ic_launcher, DynamicDrawableSpan.ALIGN_BASELINE),
    47, 48, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)

展示效果

小試牛刀

對(duì)于長(zhǎng)文本內(nèi)容需要設(shè)置多種樣式時(shí)盡量使用SpannableStringBuilder方便定位每個(gè)新增setSpan的下標(biāo)而不需要使用SpannableString來(lái)計(jì)算定位每個(gè)位置來(lái)確認(rèn)樣式（容易出錯(cuò)）可以避免需要不必要麻煩和錯(cuò)誤。

var spannableString = SpannableString("ColorSpan ClickSpan URL UnderlineSpan StyleSpan ")

spannableString.also { span ->
    span.setSpan(BackgroundColorSpan(Color.BLUE), 0, 9, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
    span.setSpan(ForegroundColorSpan(Color.RED), 0, 9, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
    ......
}

var spannableString2 = SpannableStringBuilder("")
spannableString2.also { span ->
    span.append(SpannableString("BulletSpan").also {
        it.setSpan(BulletSpan(40, Color.RED), 0, 10, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
    })
    span.append(SpannableString("\nQuoteSpan").also {
        it.setSpan(QuoteSpan(Color.BLUE), 0, 9, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
    })
}

兩者代碼一對(duì)比就能知道采用SpannableStringBuilder形式代碼結(jié)構(gòu)和可讀性以及出現(xiàn)樣式定位錯(cuò)誤的情況會(huì)小很多。

如圖所示過(guò)去對(duì)于這種樣式開發(fā)者或許會(huì)選擇使用兩個(gè)TextView來(lái)實(shí)現(xiàn)，前面為固定文本后面是參數(shù)內(nèi)容。在了解如何使用Span為TextView增加樣式只需一個(gè)TextView就能實(shí)現(xiàn)，同時(shí)也減輕一些業(yè)務(wù)開發(fā)量（當(dāng)參數(shù)為空時(shí)整個(gè)view不展示、view布局關(guān)系依賴和層級(jí)更簡(jiǎn)單等）

var spannableString3 = SpannableStringBuilder("")
spannableString3.also { span ->
    span.append(SpannableString("人均費(fèi)用：").also {
        it.setSpan(StyleSpan(Typeface.BOLD), 0, "人均費(fèi)用".length + 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
    })
    span.append(SpannableString("99元/人"))
}