Android學習之Span的使用方法詳解

2022-06-13 10:00:03

Span集合

段落類Span

BulletSpan

為段落開頭增加專案符號並支援大小、顏色、弧度

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

影響段落對齊方式，支援三種模式：常規、居中、反方向對齊

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

為文欄位落實現下標字元效果，縮小文字大小。

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

SuperscripSpan

為文欄位落實現上標字元效果，縮小文字大小。

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

TextApperanceSpan

根據組態檔資訊為文字新增樣式，可塑性更方便易用和複寫。

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

結合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

修改文字顏色，主要是因為在一個段落中可能需要修改某幾個字元顏色。

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

TextClickableSpan

為文欄位落增加可點選，可以理解為自定義的URLSpan。因此點選事件需要開發者自定義繼承實現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

為文欄位落增加超連結點選功能，可跳轉到網頁（外接瀏覽器形式）。

另外一個小TipssetSpan是可以在同一下標設定多重樣式效果。例如URLSpan和ForegroundColorSpan可重疊使用，原URLSpan超連結的文字顏色需要替換結合ForegroundColorSpan就能實現。

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

StyleSpan

修改文欄位落樣式，可設定樣式較為有限。一般還是推薦使用TextApperanceSpan可設定項更多

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
)

展示效果

小試牛刀

對於長文字內容需要設定多種樣式時儘量使用SpannableStringBuilder方便定位每個新增setSpan的下標而不需要使用SpannableString來計算定位每個位置來確認樣式（容易出錯）可以避免需要不必要麻煩和錯誤。

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

兩者程式碼一對比就能知道採用SpannableStringBuilder形式程式碼結構和可讀性以及出現樣式定位錯誤的情況會小很多。

如圖所示過去對於這種樣式開發者或許會選擇使用兩個TextView來實現，前面為固定文字後面是引數內容。在瞭解如何使用Span為TextView增加樣式只需一個TextView就能實現，同時也減輕一些業務開發量（當引數為空時整個view不展示、view佈局關係依賴和層級更簡單等）

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

小結

學會使用Span對於文字樣式開發會有所幫助，能夠快速開發易用方便的文字樣式效果。但對於其他一些效果或許無法達成例如形狀樣式結合文字共用同一個TextView開發會存在困難。

到此這篇關於Android學習之Span的使用方法詳解的文章就介紹到這了,更多相關Android Span使用內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！