Jetpack Compose学习(2)——文本(Text)的使用

原文: Jetpack Compose学习(2)——文本(Text)的使用 | Stars-One的杂货小窝

对于开发来说,文字最为基础的组件,我们先从这两个使用开始吧

本篇涉及到Kotlin和DSL特性的使用 若不了解的话可能会造成代码阅读困难,阅读前确保你有上述基础知识!!!

本系列以往文章请查看此分类链接jetpackcompose学习

基础使用

@Preview(showBackground = true)
@Composable
fun textDemo() {
    ComposeDemoTheme {
        Column() {
			//基础使用
            Text(text = "Hello world")
			//文字颜色
            Text(text = "Hello world", color = Color.Blue)
			//文字大小,sp关键字需要导入
			Text("Hello World", fontSize = 30.sp)
			//斜体
            Text("Hello World", fontStyle = FontStyle.Italic)
			//字体加粗
            Text("Hello World", fontWeight = FontWeight.Bold)
			//文字溢出(显示省略号) repeat是重复的意思,文本内容是20个Hello world组成的字符串
            Text(text = "Hello world".repeat(20),overflow = TextOverflow.Ellipsis,maxLines = 2)

        }
    }
}

上述代码的效果如下图所示:

属性	说明
text	文字
color	文字颜色
fontSize	字体大小
fontStyle	字体样式, 可设置为斜体Italic
fontWeight	字体权重,可设置字体加粗
overflow	文字溢出效果,与maxLines结合使用可实现文字溢出显示省略号效果
maxLines	最大行数 ,与overflow结合使用实现文字溢出显示省略号效果

PS:这里提下,还有个重要的属性modifier,这个准备在和布局使用一起讲解,其作用很强大,可以设置控件宽高,背景,点击效果,间距,滚动等效果,所有的组件都是存在有这个属性,方便我们对组件进行调整

上述列出的属性并不是全部,还有些不是太常用的就没列出来了

补充: 一般我们是将常用的文本放在string.xml文件中,如果想要获取这里的数值,compose也是提供有相应的方法,当然,除了文本之外,颜色等资源也有对应的方法

文本 -> stringResource(R.string.app_name)

颜色 -> colorResource(R.color.black)

尺寸 -> dimensionResource(R.dimen.padding_small)

图片 -> painterResource(R.drawable.ic_logo)

单行文本多样式

我们可能遇到这样的情况,在一行文本中,其中某个地址可以点击,或者某个词语需要加粗,按照以往的操作,我们就得用多个TextView来实现或借助他人封装的View来实现

但在Compose中,我们可以很方便的实现上述这样的效果,text属性除了接收字符串,还可以接收一个参数AnnotatedString,如下图所示

提示:如果你快捷键是默认的话,在方法括号里按下ctrl+p可以看到参数提示 :good:

官方文档的解释:

The basic data structure of text with multiple styles.

翻译过来就是说AnnotatedString是一种具有多种样式的文本的基本数据结构

文档上也是说明了,推荐可以使用构建器来生成对象,其实也就是一个方法buildAnnotatedString()

此方法里面我们可以使用Kotlin的语言特性DSL,更方便的创建一个AnnotatedString

来段简单的代码:

@Composable
fun ParagraphStyle() {
    Text(
        buildAnnotatedString {
            withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
				//设置Hello为蓝色字体
                withStyle(style = SpanStyle(color = Color.Blue)) {
                    append("Hello")
                }
            }
        }
    )
}

buildAnnotatedString方法里存在有withStyle和append方法,这两个方法其实是AnnotatedString.Builder类里的方法

这里是采用了lambda写法,buildAnnotatedString花括号里的对象即为AnnotatedString.Builder

withStyle可以接收ParagraphStyle或SpanStyle

从字面上很容易理解,ParagraphStyle是段落样式,SpanStyle是单行样式

从构造方法来看,SpanStyle其实和Text的构造方法差不多,而且比Text类中的属性都要丰富,如设置背景色,阴影等(而Text类中这些功能都被封装在Modified类里)

前面列出的属性表格它都有,但除了text属性(当然,也能理解,这只是个Style,要text属性做什么 )

而ParagraphStyle稍微比较少一点,主要以排版的属性为主,如对齐,行高,文本方向等,从下图可以看得出来

append方法也容易理解,就是你想要把样式赋值给哪个文本

然后我们就可以无限套娃,组合出我们想要的样式

Text(buildAnnotatedString {
	withStyle(ParagraphStyle()) {
		append("stars-one")
		withStyle(SpanStyle(color = Color.Black)) {
			append("的网站:")
		}
		withStyle(SpanStyle(color = Color.Red)) {
			append("stars-one.site")
		}
	}
	//新起段落
	withStyle(ParagraphStyle()) {
		append("newLine")
	}
})

效果如下图:

PS:换行的话也可以输入\n转义符号

文本长按可选择

默认情况下,Text是无法选择的,compose中提供了一个容器SelectionContainer,方便我们实现Text的选择效果

@Composable
fun SelectableText() {
    SelectionContainer {
        Text("This text is selectable")
    }
}

可点击文本

设置文本的点击事件我们可以使用Modifier提供的方法,点击会有有水波涟漪的效果

Text(
	text = "Hello world",
	modifier = Modifier.clickable {
		//点击事件
	}
)

如果你有存在是判断点击的位置需求,官方则是推荐使用ClickableText这个控件,此控件只接受AnnotatedString文本,不接受常规字符串文本参数

ClickableText(
	text = AnnotatedString("Click Me"),
	onClick = { offset ->
		//offset是你点击的时候是点了哪个文字
        //如你点了C,那么offset为0
	}
)

点击文本跳转链接

我们常见的文本,会在一段文字中间有个链接文本,点击会跳转浏览器从而打开到具体的页面H5

输入使用上面的效果也是能完成效果,但是每次还得算下下标的范围才符合条件,这样过于繁琐

对此情况,官方也是有对应的解决方法,在AnnotatedString构造的时候,使用pushStringAnnotation()和pop()方法即可达到效果,如下面给出的代码

val annotatedText = buildAnnotatedString {
    append("Click ")

    //设置存放的数据和标签
    pushStringAnnotation(tag = "URL",annotation = "https://developer.android.com")
    withStyle(style = SpanStyle(color = Color.Blue,fontWeight = FontWeight.Bold)) {
        append("here")
    }
    //代表结束
    pop()
}

在构造的时候,使用pushStringAnnotation()存下相应的数据,之后在点击事件中通过AnnotatedString的getStringAnnotations()方法重新获取内容,之后进行相应的逻辑操作(如跳转地址)

可以看到,pushStringAnnotation()方法中存在有两个参数,tag代表标签,数据可以随意定义,但要与之后调用getStringAnnotations()传参需要对应上,annotation则是存放的数据(只支持String)

记得在后面需要调用pop()方法,这两个方法是需要结合使用的,上述代码就是把here这个词设置了一个额外数据内容

我们还是使用ClickableText这个类,在点击事件中获取参数即可

@Composable
fun AnnotatedClickableText() {
    val annotatedText = buildAnnotatedString {
        append("Click ")

        pushStringAnnotation(tag = "URL",annotation = "https://developer.android.com")
        withStyle(style = SpanStyle(color = Color.Blue,
                                    fontWeight = FontWeight.Bold)) {
            append("here")
        }
        pop()
    }

    ClickableText(
        text = annotatedText,
        onClick = { offset ->
            val annotationList = annotatedText.getStringAnnotations(tag = "URL", start = offset,nd = offset)
            //firstOrNull是找List中的第一个对象,找不到则则返回null
            annotationList.firstOrNull()?.let { annotation ->
                val url = annotation.item
                //后面即逻辑操作...

            }
        }
    )
}

需要注意的是,getStringAnnotations()传了之前设置的tags参数的内容及开始和结束的下标,返回的是一个List对象

这里返回List也不难理解,getStringAnnotations()方法作用就是搜索文本的指定下标范围内,存在有tags的内容数据,指定下标范围内,若tags相同,应该也是会被收集到

但是我觉得应该不会用这种情况的发生,但是为了确保使用,tags参数的数值我们最好设置一个唯一的数值

参考

• Compose 中的文字 | Jetpack Compose | Android Developers
• Compose 中的资源 | Jetpack Compose | Android Developers