Jetpack:005-文本组件的扩展

文章目录

  • 1. 概念介绍
  • 2. 使用方法
    • 2.1 可以选择的文本
    • 2.2 可以点击的文本
    • 2.3 多种形式的文本
  • 3. 示例代码
  • 4. 内容总结

我们在上一章回中介绍了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()}")
    }
)

在上面的代码中创建了三种扩展文本,编译并且运行上面的代码可以得到下面的运行结果:
Jetpack:005-文本组件的扩展_第1张图片

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

4. 内容总结

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

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

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

你可能感兴趣的:(一起Talk,AndroidJetPack吧,移动开发,Jetpack,compose,扩展文本,可以选择的文本)