前言

文本样式是增强 Android 应用程序 UI 的重要方面之一。在 Android 中，我们可以更改文本的大小、颜色、粗细、样式等，使文本更具吸引力和吸引力。

但是考虑一种情况，当您希望 TextView 的不同部分使用不同的颜色时。例如，如果文本是“Hello Android”，并且您希望“Hello”的颜色为绿色，“Android”的颜色为红色。你怎么能做到这一点？您可以制作两个 TextView 并将 textColor 分别设置为绿色和红色。但这不是这样做的好方法。因此，在 Spans 的帮助下，文本样式的作用就出现了。

在这篇文章中，我们将学习如何使用 Spans 来设置应用程序中使用的文本样式。我们将讨论以下主题：

• 什么是跨度？
• 为 TextView 中的不同单词更改不同的颜色
• 可扩展标志
• 更改 TextView 某些部分的背景颜色
• 多个跨度到相同的文本
• 同一个TextView中字符串的不同字体大小
• 在 TextView 中为部分文本添加下划线
• 设置 TextView Clickable 的某些部分
• 在 Android 中添加项目符号列表

什么是跨度？

跨度是用于在字符级别（例如，更改不同单词的颜色）或段落级别（例如，制作项目符号列表）设置文本样式的标记对象。

为了在 Spans 的帮助下设置文本样式，可以使用以下三个类：

• SpannedString：在创建后不需要修改文本或标记时使用。
• SpannableString：当不需要修改文本但您需要修改标记时使用，即您需要在文本中添加一些跨度。
• SpannableStringBuilder：当您需要修改文本和标记时使用它。

这是关于 Android 中 Spans 的快速介绍。现在，让我们看看它的一些用例。在我们所有的示例中，我们将使用以下具有 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”的颜色更改为红色。

如果您查看代码，那么您会发现我们正在使用SpannableString该类，因为我们有一个固定的文本。此外，我们正在使用该setSpan方法设置从字符串中第 36 位开始到第 44 位结束的文本的前景色。此外，我们正在传递一些标志，即Spannable.SPAN_EXCLUSIVE_INCLUSIVE.

让我们了解这些标志。

可扩展标志

Spans 可以使用许多标志，但最常用的标志是：

• SPAN_EXCLUSIVE_EXCLUSIVE
• SPAN_EXCLUSIVE_INCLUSIVE
• SPAN_INCLUSIVE_EXCLUSIVE
• SPAN_INCLUSIVE_INCLUSIVE

这些标志用于告诉 Span 是否应该包含在开始或结束位置插入的文本。Inclusive 表示将其添加到 Span 中，exclusive 表示将其从 Span 中删除。

如果您使用的是不可变字符串，即如果您没有在原始字符串中添加其他字符串，那么所有四个标志都将起作用。但是如果你使用的是可变字符串，那么这四个标志的作用就会发挥作用。让我们借助一个例子来理解这一点。

在这里，我们将在原始字符串中插入一些文本。因此，如前所述，对于可变字符串，我们需要使用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

多个跨度到相同的文本

setSpan您也可以在单个文本上多次使用该方法。例如，如果要更改文本的颜色，同时使其变为粗体和斜体，则可以通过以下方式执行此操作：

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

这里，文本的颜色是红色，同时是粗体和斜体。

您可以根据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

在这里，我们将背景更改为红色。

同一个TextView中字符串的不同字体大小

您可以使用RelativeSizeSpan来更改 TextView 某些部分的大小。文本大小的变化将是相对的，即相对于字符串中的其他文本。

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

设置 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)

在这里，点击“MindOrks”会显示一个 toast。

在 Android 中添加项目符号列表

在 的帮助下BulletSpan，您可以在应用程序中创建一个项目符号列表，以便以简短的方式显示一些信息。

// 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 来设置应用程序中的文本样式。

希望你今天学到了一些新东西，我相信你很快就会在你的应用程序中使用这些很棒的功能。

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