前言

文本樣式是增強(qiáng) Android 應(yīng)用程序 UI 的重要方面之一。在 Android 中，我們可以更改文本的大小、顏色、粗細(xì)、樣式等，使文本更具吸引力和吸引力。

但是考慮一種情況，當(dāng)您希望 TextView 的不同部分使用不同的顏色時(shí)。例如，如果文本是“Hello Android”，并且您希望“Hello”的顏色為綠色，“Android”的顏色為紅色。你怎么能做到這一點(diǎn)？您可以制作兩個(gè) TextView 并將 textColor 分別設(shè)置為綠色和紅色。但這不是這樣做的好方法。因此，在 Spans 的幫助下，文本樣式的作用就出現(xiàn)了。

在這篇文章中，我們將學(xué)習(xí)如何使用 Spans 來(lái)設(shè)置應(yīng)用程序中使用的文本樣式。我們將討論以下主題：

• 什么是跨度？
• 為 TextView 中的不同單詞更改不同的顏色
• 可擴(kuò)展標(biāo)志
• 更改 TextView 某些部分的背景顏色
• 多個(gè)跨度到相同的文本
• 同一個(gè)TextView中字符串的不同字體大小
• 在 TextView 中為部分文本添加下劃線
• 設(shè)置 TextView Clickable 的某些部分
• 在 Android 中添加項(xiàng)目符號(hào)列表

什么是跨度？

跨度是用于在字符級(jí)別（例如，更改不同單詞的顏色）或段落級(jí)別（例如，制作項(xiàng)目符號(hào)列表）設(shè)置文本樣式的標(biāo)記對(duì)象。

為了在 Spans 的幫助下設(shè)置文本樣式，可以使用以下三個(gè)類：

• SpannedString：在創(chuàng)建后不需要修改文本或標(biāo)記時(shí)使用。
• SpannableString：當(dāng)不需要修改文本但您需要修改標(biāo)記時(shí)使用，即您需要在文本中添加一些跨度。
• SpannableStringBuilder：當(dāng)您需要修改文本和標(biāo)記時(shí)使用它。

這是關(guān)于 Android 中 Spans 的快速介紹?，F(xiàn)在，讓我們看看它的一些用例。在我們所有的示例中，我們將使用以下具有 id 的 TextView tvMessage：

<TextView
    android:id="@+id/tvMessage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:gravity="center"
    android:textColor="@color/black"
    android:textSize="24sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Hello World!" />

為 TextView 中的不同單詞更改不同的顏色

在某些情況下，您希望為同一文本視圖的不同部分使用不同的顏色。所以，在這里你可以使用ForegroundColorSpan.

val spannable = SpannableString("You can start learning Android from MindOrks")
spannable.setSpan(
    ForegroundColorSpan(Color.RED),
    36, // start
    44, // end
    Spannable.SPAN_EXCLUSIVE_INCLUSIVE
)
tvMessage.text = spannable

在這里，我們將“MindOrks”的顏色更改為紅色。

如果您查看代碼，那么您會(huì)發(fā)現(xiàn)我們正在使用SpannableString該類，因?yàn)槲覀冇幸粋€(gè)固定的文本。此外，我們正在使用該setSpan方法設(shè)置從字符串中第 36 位開始到第 44 位結(jié)束的文本的前景色。此外，我們正在傳遞一些標(biāo)志，即Spannable.SPAN_EXCLUSIVE_INCLUSIVE.

讓我們了解這些標(biāo)志。

可擴(kuò)展標(biāo)志

Spans 可以使用許多標(biāo)志，但最常用的標(biāo)志是：

• SPAN_EXCLUSIVE_EXCLUSIVE
• SPAN_EXCLUSIVE_INCLUSIVE
• SPAN_INCLUSIVE_EXCLUSIVE
• SPAN_INCLUSIVE_INCLUSIVE

這些標(biāo)志用于告訴 Span 是否應(yīng)該包含在開始或結(jié)束位置插入的文本。Inclusive 表示將其添加到 Span 中，exclusive 表示將其從 Span 中刪除。

如果您使用的是不可變字符串，即如果您沒有在原始字符串中添加其他字符串，那么所有四個(gè)標(biāo)志都將起作用。但是如果你使用的是可變字符串，那么這四個(gè)標(biāo)志的作用就會(huì)發(fā)揮作用。讓我們借助一個(gè)例子來(lái)理解這一點(diǎn)。

在這里，我們將在原始字符串中插入一些文本。因此，如前所述，對(duì)于可變字符串，我們需要使用SpannableStringBuilder.

val spannableStringBuilder = SpannableStringBuilder("Android")
spannableStringBuilder.setSpan(
    ForegroundColorSpan(Color.RED),
    1, // start
    4, // end
    Spannable.SPAN_INCLUSIVE_INCLUSIVE
)
spannableStringBuilder.insert(4, "1")
spannableStringBuilder.insert(1, "1")
tvMessage.text = spannableStringBuilder

多個(gè)跨度到相同的文本

setSpan您也可以在單個(gè)文本上多次使用該方法。例如，如果要更改文本的顏色，同時(shí)使其變?yōu)榇煮w和斜體，則可以通過以下方式執(zhí)行此操作：

val spannable = SpannableString("You can start learning Android from MindOrks")
spannable.setSpan(
    ForegroundColorSpan(Color.RED),
    36, // start
    44, // end
    Spannable.SPAN_EXCLUSIVE_INCLUSIVE
)
spannable.setSpan(
    StyleSpan(Typeface.BOLD_ITALIC),
    36, // start
    44, // end
    Spannable.SPAN_EXCLUSIVE_INCLUSIVE
)
tvMessage.text = spannable

這里，文本的顏色是紅色，同時(shí)是粗體和斜體。

您可以根據(jù)setSpan需要多次使用該方法。

更改 TextView 某些部分的背景顏色

您可以使用 更改 TextView 中部分文本的背景顏色BackgroundColorSpan。

val spannable = SpannableString("You can start learning Android from MindOrks")
spannable.setSpan(
    BackgroundColorSpan(Color.RED),
    36, // start
    44, // end
    Spannable.SPAN_EXCLUSIVE_INCLUSIVE
)
tvMessage.text = spannable

在這里，我們將背景更改為紅色。

同一個(gè)TextView中字符串的不同字體大小

您可以使用RelativeSizeSpan來(lái)更改 TextView 某些部分的大小。文本大小的變化將是相對(duì)的，即相對(duì)于字符串中的其他文本。

val spannable = SpannableString("You can start learning Android from MindOrks")
spannable.setSpan(
    RelativeSizeSpan(2f),
    36, // start
    44, // end
    Spannable.SPAN_EXCLUSIVE_INCLUSIVE
)
tvMessage.text = spannable

在這里，“MindOrks”的大小2f比其他文本大。

在 TextView 中為部分文本添加下劃線

您可以使用以下方式為文本的一部分添加下劃線UnderlineSpan：

val spannable = SpannableString("You can start learning Android from MindOrks")
spannable.setSpan(
    UnderlineSpan(),
    36, // start
    44, // end
    Spannable.SPAN_EXCLUSIVE_INCLUSIVE
)
tvMessage.text = spannable

設(shè)置 TextView Clickable 的某些部分

您可以使用ClickableSpan. 例如：

val spanText = SpannableStringBuilder("MindOrks")

val clickableMindOrks = object : ClickableSpan() {
    override fun onClick(view: View) {
        Toast.makeText(view.context, "MindOrks Clicked!", Toast.LENGTH_SHORT).show()
    }
}
spanText.setSpan(
    clickableMindOrks,
    0,
    spanText.length,
    0
)
spanText.setSpan(
    ForegroundColorSpan(Color.RED),
    0, // start
    8, // end
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
tvMessage.setText(spanText, TextView.BufferType.SPANNABLE)

在這里，點(diǎn)擊“MindOrks”會(huì)顯示一個(gè) toast。

在 Android 中添加項(xiàng)目符號(hào)列表

在 的幫助下BulletSpan，您可以在應(yīng)用程序中創(chuàng)建一個(gè)項(xiàng)目符號(hào)列表，以便以簡(jiǎn)短的方式顯示一些信息。

// function to covert a list into bullet list
fun convertToBulletList(stringList: List<String>): CharSequence {
    val spannableStringBuilder = SpannableStringBuilder("Learn Android from\n")
    stringList.forEachIndexed { index, text ->
        val line: CharSequence = text + if (index < stringList.size - 1) "\n" else ""
        val spannable: Spannable = SpannableString(line)
        spannable.setSpan(
            BulletSpan(15, Color.RED),
            0,
            spannable.length,
            Spanned.SPAN_INCLUSIVE_EXCLUSIVE
        )
        spannableStringBuilder.append(spannable)
    }
    return spannableStringBuilder
}
val androidResourceList = listOf("MindOrks Course", "MindOrks Blog", "MindOrks OpenSource", "MindOrks YouTube")
tvMessage.text = convertToBulletList(androidResourceList)

因此，通過這種方式，我們可以使用 Spans 來(lái)設(shè)置應(yīng)用程序中的文本樣式。

希望你今天學(xué)到了一些新東西，我相信你很快就會(huì)在你的應(yīng)用程序中使用這些很棒的功能。

作者：Sumit Mishra
鏈接：https://blog.mindorks.com/spannable-string-text-styling-with-spans