Jetpack：005-文本组件的扩展

我们在上一章回中介绍了Jetpack中文本组件的使用方法，本章回中主要介绍 文本组件的扩展。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

我们在本章回中介绍的内容还围绕文本组件，我们主要介绍如何扩展文本组件，扩展主要分三个方面：可以选择的文本，可以点击的文本，多种形式的文本。下面是详细的的描述：

• 可以选择的文本：表示文本内容可以被选择，常用的操作是先选择然后复制文本；
• 可以点击的文本：表示文本内容可以响应点击事件，当点击文本后会对点击事件进行响应；
• 多种形式的文本：表示同一文本组件中包含不同的文本样式，类似多个文本拼接在一起；

2. 使用方法

2.1 可以选择的文本

对文本组件的这种扩展由SelectionContainer组合函数和Text组合函数共同完成，它的用法和正常的文本组件用法相同，只需要在文本组件外层嵌套一个SelectionContainer组件就可以，我们将在后面的小节中通过示例代码来演示具体的用法。

2.2 可以点击的文本

对文本组件的这种扩展由ClickableText组合函数实现，该函数包含两个重要的参数，详细如下：

• text参数：用来存放文本组件中显示的内容；
• onClick参数：它是方法类型，用来响应点击文本的事件；

2.3 多种形式的文本

对文本组件的这种扩展由AnnotationText类型的文本实现，把该类型的文本直接赋值给文本组件的text参数就可以。在创建该类型的文本时需要借助buildAnnotatedString函数，该函数和withStyle组合函数配合使用，可以创建多种不同风格的文本，我们将在后面的小节中通过示例代码来演示具体的用法。

3. 示例代码

//可以选择的文本，主要是嵌套了一个SelectionContainer函数
SelectionContainer() {
    Text(text = "click me and then selected")
}

//多种形式的文本
Text(text = buildAnnotatedString {
    withStyle( style = SpanStyle(color = Color.Red, fontSize = 12.sp)) {
        append("part1")
    }

    withStyle( style = SpanStyle(color = Color.Green, fontSize = 22.sp)) {
        append("part2")
    }

    withStyle( style = SpanStyle(color = Color.Blue)) {
        append("part3")
    }
})


//可以点击的文本
val annotationText = buildAnnotatedString {
    withStyle(style = SpanStyle(fontSize = 24.sp)) {
        append("url:")
    }

    withStyle(
        style = SpanStyle(color = Color.Red, textDecoration = TextDecoration.Underline)
    ) {
        pushStringAnnotation(
            tag = "URL",
            annotation = "www.baidu.com",
        )
        append("address")
        pop()
    }
}

ClickableText(text = annotationText,
    onClick = {
            offset -> annotationText.getStringAnnotations(
        tag = "URL",
        start = offset,
        end = offset
    ).toString()
        Log.d("tag","text is clicked : ${annotationText.toString()}")
    }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

在上面的代码中创建了三种扩展文本，编译并且运行上面的代码可以得到下面的运行结果：

其中可以选择的文本和多种形式的文本可以直接在图片中看到，可以点击的文本需要点击文本，此时会输出log。建议大家结合上面的代码自己动手去实践一下。

4. 内容总结

文本组件是程序中常用的组件，我们可以对它进行扩展以适应不同的需求，最后，我们对这些扩展做一个总结：

• 可以选择的文本：表示文本内容可以被选择，通过SelectionContainer组合函数实现；
• 可以点击的文本：表示文本内容可以响应点击事件，通过ClickableText组合函数实现；
• 多种形式的文本：表示同一文本组件中包含不同的文本样式，通过AnnotationText类型的文本实现；

看官们，关于Jetpack中文本组件的扩展就介绍到这里，欢迎大家在评论区交流与讨论！