共计 14126 个字符,预计需要花费 36 分钟才能阅读完成。
对于用户界面而言,文本是最根底而又外围的内容,在传统的 Android Native 开发中,须要用一个 TextView 来显示一个文本。在 Jetpack Compose 中,提供了 Text 可组合函数(即组件,前面的文章都会称其为“组件”),可更轻松的显示文本。在本文中,将带大家一起摸索 Text 组件的各种用法。
Text 属性介绍
在 Jetpack Compose 中,组件是一个非凡的 Kotlin 函数,因而 Text 其实也是一个函数,而它提供了很多参数来配置文本的显示外观。这些参数就是组件的属性。看一下 Text 组件有哪些属性:
@Composable
fun Text(
// 显示的文本字符串
text: String,
// 修改器,能够配置文本的大小及显示外观
modifier: Modifier = Modifier,
// 文本的色彩
color: Color = Color.Unspecified,
// 文本的字号大小
fontSize: TextUnit = TextUnit.Unspecified,
// 文字款式
fontStyle: FontStyle? = null,
// 文字粗细
fontWeight: FontWeight? = null,
// 文本字体
fontFamily: FontFamily? = null,
// 文字间的间距
letterSpacing: TextUnit = TextUnit.Unspecified,
// 文字增加装璜,能够增加上划线、下划线、中划线
textDecoration: TextDecoration? = null,
// 文本的对齐形式
textAlign: TextAlign? = null,
// 每一行的行高
lineHeight: TextUnit = TextUnit.Unspecified,
// 文本溢出的显示成果
overflow: TextOverflow = TextOverflow.Clip,
// 是否主动换行
softWrap: Boolean = true,
// 最多显示几行
maxLines: Int = Int.MAX_VALUE,
// 计算布局时的回调
onTextLayout: (TextLayoutResult) -> Unit = {},
// 款式
style: TextStyle = LocalTextStyle.current
) {...}
Jetpack Compose 中,很多中央都用到了 Kotlin 的个性,比方这里,就用到 Kotlin 的默认参数,Text 组件除了第一个参数text
,其余都有默认值,也就是应用的时候能够不传,然而如果传多个参数时,肯定要加参数名。比方,设置大小:
@Composable
fun MyText(){
Text("Jetpack Compose,by 仍然范特稀西",
fontSize = 20.sp
)
}
第一个参数能够加参数名,也能够不加,但我集体还是举荐加上,因为他是一个组件,参数是它的属性,这样代码比拟直观。像上面这样就比拟好一点:
@Composable
fun MyText(){
Text(
text = "Jetpack Compose,by 仍然范特稀西",
fontSize = 20.sp
)
}
晓得了,每个属性的意思,咱们接下来一起看看,配置各属性后的成果展现。
Text 各属性示例成果
text 显示文本
Jetpack Compose 系列 -Text 组件花式应用!
对于用户界面而言,文本是最根底而又外围的内容,在传统的 Android Native 开发中,须要用一个 TextView 来显示一个文本。在 Jetpack Compose 中,提供了 Text 可组合函数(即组件,前面的文章都会称其为“组件”),可更轻松的显示文本。在本文中,将带大家一起摸索 Text 组件的各种用法。
Text 属性介绍
在 Jetpack Compose 中,组件是一个非凡的 Kotlin 函数,因而 Text 其实也是一个函数,而它提供了很多参数来配置文本的显示外观。这些参数就是组件的属性。看一下 Text 组件有哪些属性:
@Composable
fun Text(
// 显示的文本字符串
text: String,
// 修改器,能够配置文本的大小及显示外观
modifier: Modifier = Modifier,
// 文本的色彩
color: Color = Color.Unspecified,
// 文本的字号大小
fontSize: TextUnit = TextUnit.Unspecified,
// 文字款式
fontStyle: FontStyle? = null,
// 文字粗细
fontWeight: FontWeight? = null,
// 文本字体
fontFamily: FontFamily? = null,
// 文字间的间距
letterSpacing: TextUnit = TextUnit.Unspecified,
// 文字增加装璜,能够增加上划线、下划线、中划线
textDecoration: TextDecoration? = null,
// 文本的对齐形式
textAlign: TextAlign? = null,
// 每一行的行高
lineHeight: TextUnit = TextUnit.Unspecified,
// 文本溢出的显示成果
overflow: TextOverflow = TextOverflow.Clip,
// 是否主动换行
softWrap: Boolean = true,
// 最多显示几行
maxLines: Int = Int.MAX_VALUE,
// 计算布局时的回调
onTextLayout: (TextLayoutResult) -> Unit = {},
// 款式
style: TextStyle = LocalTextStyle.current
) {...}
Jetpack Compose 中,很多中央都用到了 Kotlin 的个性,比方这里,就用到 Kotlin 的默认参数,Text 组件除了第一个参数text
,其余都有默认值,也就是应用的时候能够不传,然而如果传多个参数时,肯定要加参数名。比方,设置大小:
@Composable
fun MyText(){
Text("Jetpack Compose,by 仍然范特稀西",
fontSize = 20.sp
)
}
第一个参数能够加参数名,也能够不加,但我集体还是举荐加上,因为他是一个组件,参数是它的属性,这样代码比拟直观。像上面这样就比拟好一点:
@Composable
fun MyText(){
Text(
text = "Jetpack Compose,by 仍然范特稀西",
fontSize = 20.sp
)
}
晓得了,每个属性的意思,咱们接下来一起看看,配置各属性后的成果展现。
Text 各属性示例成果
text 显示文本
显示文字的最简略的办法是应用以 String 作为参数的 Text 组件:
@Composable
fun MyText(){Text("Jetpack Compose,by 仍然范特稀西")
}
也能够显示字符串资源,这也是举荐的形式,而不是间接将字符串写死在代码中,这样有利于替换或者国际化。
<!-- xml 资源文件 -->
<resources>
<string name="my_text">Jetpack Compose,by 仍然范特稀西 </string>
</resources>
@Composable
fun MyText(){Text(stringResource(R.string.my_text))
}
color 更改文字色彩
@Composable
fun MyText() {
Text(text = stringResource(R.string.my_text),
color = Color.Blue
)
}
fontSize 更改文字大小
@Composable
fun MyText() {
Text(text = stringResource(R.string.my_text),
color = Color.Blue,
fontSize = 30.sp,
)
}
fontStyle 设置文字款式
fontStyle
有 2 个取值,FontStyle.Italic
和FontStyle.Normal
@Composable
fun MyText() {
Column{
Text(text = stringResource(R.string.my_text),
fontStyle = FontStyle.Normal,
)
Text(text = stringResource(R.string.my_text),
fontStyle = FontStyle.Italic,
)
}
}
fontWeight 更改文字的粗细水平
fontWeight
能够取 1- 1000 之间的值,应用的时候,结构一个 FontWeight
即可:
FontWeight(50)
FontWeight 默认为咱们定义几个默认值,100-900 的整百值,并依据他们的显示成果取名为 Bold
,Light
,Thin
等等。
companion object {/** [Thin] */
@Stable
val W100 = FontWeight(100)
/** [ExtraLight] */
@Stable
val W200 = FontWeight(200)
/** [Light] */
@Stable
val W300 = FontWeight(300)
/** [Normal] / regular / plain */
@Stable
val W400 = FontWeight(400)
/** [Medium] */
@Stable
val W500 = FontWeight(500)
/** [SemiBold] */
@Stable
val W600 = FontWeight(600)
/** [Bold] */
@Stable
val W700 = FontWeight(700)
/** [ExtraBold] */
@Stable
val W800 = FontWeight(800)
/** [Black] */
@Stable
val W900 = FontWeight(900)
/** Alias for [W100] */
@Stable
val Thin = W100
/** Alias for [W200] */
@Stable
val ExtraLight = W200
/** Alias for [W300] */
@Stable
val Light = W300
/** The default font weight - alias for [W400] */
@Stable
val Normal = W400
/** Alias for [W500] */
@Stable
val Medium = W500
/** Alias for [W600] */
@Stable
val SemiBold = W600
/**
* A commonly used font weight that is heavier than normal - alias for [W700]
*/
@Stable
val Bold = W700
/** Alias for [W800] */
@Stable
val ExtraBold = W800
/** Alias for [W900] */
@Stable
val Black = W900
/** A list of all the font weights. */
internal val values: List<FontWeight> = listOf(
W100,
W200,
W300,
W400,
W500,
W600,
W700,
W800,
W900
)
看一下他们的显示成果:
@Composable
fun MyText() {
Column {
Text(text = stringResource(R.string.my_text),
fontWeight = FontWeight.Thin,
)
Text(text = stringResource(R.string.my_text),
fontWeight = FontWeight.ExtraLight
)
Text(text = stringResource(R.string.my_text),
fontWeight = FontWeight.Light
)
Text(text = stringResource(R.string.my_text),
fontWeight = FontWeight.Normal
)
Text(text = stringResource(R.string.my_text),
fontWeight = FontWeight.Medium
)
Text(text = stringResource(R.string.my_text),
fontWeight = FontWeight.SemiBold
)
Text(text = stringResource(R.string.my_text),
fontWeight = FontWeight.Bold
)
Text(text = stringResource(R.string.my_text),
fontWeight = FontWeight.ExtraBold
)
Text(text = stringResource(R.string.my_text),
fontWeight = FontWeight.Black
)
}
}
fontFamily 更改字体
fontFamily
能够更改字体,FontFamily 为咱们默认内置了 5 种字体,Default
、SansSerif
、Serif
、Monospace
、Cursive
。
@Composable
fun MyText() {
Column {
Text(text = stringResource(R.string.my_text),
fontFamily = FontFamily.Default,
)
Text(text = stringResource(R.string.my_text),
fontFamily = FontFamily.SansSerif
)
Text(text = stringResource(R.string.my_text),
fontFamily = FontFamily.Serif
)
Text(text = stringResource(R.string.my_text),
fontFamily = FontFamily.Monospace
)
Text(text = stringResource(R.string.my_text),
fontFamily = FontFamily.Cursive
)
}
}
letterSpacing 更改文字间距
letterSpacing
更改文字间距,更确切的说是更改字符间距,因为如果是英文的话,不会按单词来设置间距,而是按字母。
@Composable
fun MyText() {
Text(text = stringResource(R.string.my_text),
letterSpacing = 10.sp,
)
}
textDecoration 文字装璜器
textDecoration
能够给文字装璜下划线和中划线。默认提供了三个值:
None
: 无装璜成果LineThrough
: 增加中划线Underline
: 增加下划线
@Composable
fun MyText() {
Column {
Text(text = stringResource(R.string.my_text),
textDecoration = TextDecoration.None,
)
Text(text = stringResource(R.string.my_text),
textDecoration = TextDecoration.LineThrough,
)
Text(text = stringResource(R.string.my_text),
textDecoration = TextDecoration.Underline,
)
}
}
除此之外,TextDecoration
还提供了一个 combine
函数,能够将下划线和中划线组合:
@Composable
fun MyText() {val combineDecoration = listOf(TextDecoration.Underline, TextDecoration.LineThrough)
Text(text = stringResource(R.string.my_text),
textDecoration = TextDecoration.combine(combineDecoration)
)
}
textAlign 设置文字对齐方向
textAlign
能够设置 Text 组件内容的对齐形式,有 TextAlign.Start
、TextAlign. End
、TextAlign. Center
、TextAlign. Justify
等值。默认状况下,Text 会依据其内容值抉择天然的文字对齐形式:
- 对于从左到右书写的文字,如拉丁语、西里尔文或朝鲜文,向 Text 容器的左边缘对齐
- 对于从右到左书写的文字,如阿拉伯语或希伯来语,向 Text 容器的右边缘对齐
如果您想手动设置 Text 组件的文字对齐形式,最好别离应用
TextAlign.Start
和TextAlign.End
(而不要应用TextAlign.Left
和TextAlign.Right
),这样零碎就能够依据具体语言的首选文字方向,将您的设置解析为向 Text 的右边缘对齐。例如,TextAlign.End
对于法语文字将向右侧对齐,而对于阿拉伯语文字则将向左侧对齐,但无论对于哪种文字,TextAlign.Right
都将向右侧对齐。
@Composable
fun MyText() {
Column {
Text(text = stringResource(R.string.my_text),
modifier = Modifier
.size(300.dp, 50.dp)
.background(Color.Gray),
textAlign = TextAlign.Start
)
Text(text = stringResource(R.string.my_text),
modifier = Modifier
.size(300.dp, 50.dp)
.background(Color.Gray),
textAlign = TextAlign.End
)
Text(text = stringResource(R.string.my_text),
modifier = Modifier
.size(300.dp, 50.dp)
.background(Color.Gray),
textAlign = TextAlign.Center
)
Text(text = stringResource(R.string.my_text),
modifier = Modifier
.size(300.dp, 50.dp)
.background(Color.Gray),
textAlign = TextAlign.Justify
)
}
}
留神:要对齐形式失效,须要给 Text 设置大小,因为 Text 组件默认的大小是包裹内容的,下面的代码咱们用
modifier
属性设置了 Text 组件的大小。
lineHeight 设置行高
lineHeight
设置行高,值为一个具体数值,单位为sp
@Composable
fun MyText() {
Column {
Text(text = "未设置 lineHeight".repeat(10),
)
Text(text = "曾经设置 lineHeight".repeat(10),
lineHeight = 30.sp
)
}
}
overflow 设置文本溢出成果
overflow
设置当文本超出控件时的显示款式,有两个取值:
TextOverflow.Clip
: 超出局部间接截断TextOverflow.Ellipsis
: 应用省略号示意文本已溢出
overflow
个别配合 maxLines
应用
@Composable
fun MyText() {
Column {
Text(text = stringResource(R.string.my_text).repeat(10),
overflow = TextOverflow.Clip,
maxLines = 2
)
Spacer(modifier = Modifier.height(20.dp))
Text(text = stringResource(R.string.my_text).repeat(10),
overflow = TextOverflow.Ellipsis,
maxLines = 2
)
}
}
maxLines 设置最多显示行数
maxLines
配置最多显示几行,该属性个别须要配置overflow
,表明超出局部该如何显示,默认间接截断(Clip 成果)。
@Composable
fun MyText() {
Column {
Text(text = stringResource(R.string.my_text).repeat(10),
)
Spacer(modifier = Modifier.height(20.dp))
Text(text = stringResource(R.string.my_text).repeat(10),
maxLines = 2,
)
}
}
softWrap 是否主动换行
默认为 true
,即会主动换行,如果设置为false
,将不会主动换行。个别应用场景为: 文本单行显示,超出默认截断或显示省略号
,即配合overflow
应用:
@Composable
fun MyText() {
Text(text = stringResource(R.string.my_text).repeat(10),
softWrap = false,
overflow = TextOverflow.Ellipsis
)
}
onTextLayout 计算新的布局时回调函数
计算新的 Text 布局时回调函数, 回调中能够获取一些后果,比方控件的 size 等。
@Composable
fun MyText() {
Text(text = stringResource(R.string.my_text),
onTextLayout = {Log.e("xige","text width: ${it.size.width}, text height: ${it.size.height}")
}
)
}
运行后果:
style 能够配置 text 的色彩、字号、行低等等
色彩、字号、行低等那些属性成果,都能够用 style
来对立配置, 除此之外,还有一些属性,如:shadow
能够设置倒影成果,所有可配置属性如下:
@Composable
fun MyText() {
Text(text = stringResource(R.string.my_text),
style = TextStyle(
color = Color.Blue,
fontSize = 20.sp,
lineHeight = 20.sp,
fontWeight = FontWeight.Bold,
fontFamily = FontFamily.Monospace,
fontStyle = FontStyle.Normal,
shadow = Shadow(
color = Color.Red,
offset = Offset(10.0f,10.0f),
blurRadius = 10.0f
)
)
)
}
modifier 修改器
最初来说说 modifier, 这个属性很重要,也不是 Text 组件所独有,根本所有组件都有这个属性,它能够批改组件外观比方:pading、宽高、背景、形态等等。但绝不仅于此,还要很多弱小的性能,能够定义动画,自定义点击事件等等。因为篇幅无限,前面会独自写一篇 Modifier 的文章介绍。
@Composable
fun MyText() {
Text(text = stringResource(R.string.my_text),
modifier = Modifier
.border(
width = 3.dp,
color = Color.Red,
shape = RoundedCornerShape(
topStart = 30.dp,
topEnd = 30.dp,
bottomStart = 20.dp,
bottomEnd = 30.dp
)
)
.size(400.dp, 50.dp)
.padding(10.dp)
)
}
可抉择的 Text
默认状况下,Text 组件内容 不可抉择
,这意味着,在默认状况下用户无奈从你的利用中 抉择和复制
文字。要启用文字抉择,须要应用 SelectionContainer
容器包装 Text 元素。
SelectionContainer 组件
从字面意思看:可抉择的容器,的确,只有用 SelectionContainer
包装 Text,则可抉择 Text 组件显示的文本。
@Composable
fun MyText() {
SelectionContainer {Text(stringResource(R.string.my_text))
}
}
##### DisableSelection 组件
JetpackCompose 其实反对更精细化的抉择,假如你想在一段可抉择的文本中,嵌入一个不可被抉择的文本。要实现这样一个性能非常简单,应用 DisableSelection
组件即可。
被 DisableSelection
包裹的 Text 组件,内容不可被抉择:
@Composable
fun MyText() {
SelectionContainer {
Column {Text("我是可被选中文本 1")
Text("我是可被选中文本 2")
Text("我是可被选中文本 3")
DisableSelection {Text("我是不可被选中文本 1")
Text("我是不可被选中文本 2")
}
Text("我是可被选中文本 4")
Text("我是可被选中文本 4")
}
}
}
可点击的 Text
增加 clickable 修饰符
Text 组件自身是没有点击事件的,如果要让 Text 可点击,能够给它增加clickable
修饰符,也就是咱们后面说的 Modifier,如下,咱们增加一个可点击 Text,点击一次减少1
:
@Composable
fun MyText() {val txt = remember { mutableStateOf(0)}
Column(
modifier = Modifier
.fillMaxSize()
.background(Color(0xFFE5E4E2))
.padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "${txt.value}",
fontFamily = FontFamily.Serif,
fontSize = 75.sp,
color = Color(0xFFE63E62),
modifier = Modifier
.clip(RoundedCornerShape(12.dp))
.background(Color(0xFFC9C0BB))
.clickable(
enabled = true,
role = Role.Button
){txt.value += 1}
.padding(25.dp)
)
}
}
获取点击文字的地位
clickable
能够给 Text 增加点击事件,然而它却不能监听点击的是 Text 的那个地位,比方显示的是 Jetpack Compose,by 仍然范特稀西
, 我想确定点击的是哪个字符,该咋整呢?Compose 为咱们提供了反对,应用ClickableText
即可:
@Composable
fun MyText() {
ClickableText(text = AnnotatedString(stringResource(R.string.my_text))
) { index ->
Log.d("ClickableText", "第 $index 个字符被点击")
}
}
留神 ClickableText
承受的是一个 AnnotatedString
类型,最初一个参数就是onClick
, 这里使用了 kotlin 的 lamuda 表达式个性,最初一个 lamuda 表达式能够提到括号外,跟上面是等价的。
@Composable
fun MyText() {
ClickableText(text = AnnotatedString(stringResource(R.string.my_text)),
onClick = { index ->
Log.d("ClickableText", "第 $index 个字符被点击")
}
)
}
Text 款式嵌套
Text 反对为其中的字符、字符串独自设置不同的款式,因为 Text 组件的 text 属性是 AnnotatedString
类型,AnnotatedString
是一个数据类:
class AnnotatedString internal constructor(
val text: String, // 字符串
val spanStyles: List<Range<SpanStyle>> = emptyList(), // 设置字符款式的 List
val paragraphStyles: List<Range<ParagraphStyle>> = emptyList(), // 设置段落款式的 List
internal val annotations: List<Range<out Any>> = emptyList() // 注解 list)
咱们能够通过提供的 buildAnnotatedString
来构建 AnnotatedString 类,其中,能够通过 append
函数拼接字符串,能够通过 withStyle
拼接字符串并设置款式:
@Composable
fun MyText() {
Text(
buildAnnotatedString {
withStyle(
style = SpanStyle(
color = Color.Blue,
fontWeight = FontWeight.Bold
)
) {append("Jetpack")
}
append("Compose")
withStyle(
style = SpanStyle(
color = Color.Red,
fontWeight = FontWeight.Bold,
fontSize = 30.sp
)
) {append("by")
}
append("仍然范特稀西")
}
)
}
这里咱们应用了 SpanStyle
来设置单个款式,还有一个ParagraphStyle
,按字面了解,就是设置段落款式,也就是包裹在 ParagraphStyle 外面的段落都会利用它设置的款式,看一下示例:
@Composable
fun MyText() {
Text(
buildAnnotatedString {
withStyle(
// 设置段落款式
style = ParagraphStyle(
lineHeight = 60.sp,
textAlign = TextAlign.Center
)
) {
withStyle(
style = SpanStyle(
color = Color.Blue,
fontWeight = FontWeight.Bold
)
) {append("Jetpack Compose\n")
}
withStyle(
style = SpanStyle(
color = Color.Red,
fontWeight = FontWeight.Bold,
fontSize = 30.sp
)
) {append("by\n")
}
withStyle(
style = SpanStyle(
color = Color.Green,
fontWeight = FontWeight.Bold,
)
) {append("仍然范特稀西 \n")
}
withStyle(
style = SpanStyle(
fontWeight = FontWeight.Bold,
fontSize = 30.sp,
color = Color.Red
)
) {append("@公众号:技术最 TOP")
}
}
},
modifier = Modifier.width(400.dp)
)
}
下面,设置的 lineHeight
和textAlin
款式利用到了所包裹的所有段落上。
实用案列 - 点击超链接
咱们的 APP 中,登录 / 注册页面都会有 隐衷政策协定
,须要用户批准后能力持续,像上面这样:
点击蓝色字即可跳转到隐衷政策 / 用户协定界面,个别是一个 H5 页面。咱们来用 Jetpack Compose 实现这么一个性能。
思路:ClickText
+ 款式嵌套
+ 点击注解
可实现
前两个曾经介绍过了,当初简略说说 点击注解
: 在应用 buildAnnotatedString
时,能够应用 pushStringAnnotation
携带一个 tag 数据, 在点击对应 tag 时,onClick 中,能够应用 getStringAnnotations
获取携带的数据。
@Composable
fun MyText() {
val annotatedText = buildAnnotatedString {append("登录即表明批准")
pushStringAnnotation(
tag = "tag1",
annotation = "隐衷条款 1:https://www.xxx1.com"
)
withStyle(
style = SpanStyle(
color = Color.Blue,
fontWeight = FontWeight.Bold,
textDecoration = TextDecoration.Underline
)
) {append("中国移动认证服务条款")
}
pop()
append("以及")
pushStringAnnotation(
tag = "tag2",
annotation = "隐衷条款 2:https://www.xxx2.com"
)
withStyle(
style = SpanStyle(
color = Color.Blue,
fontWeight = FontWeight.Bold,
textDecoration = TextDecoration.Underline
)
) {append("用户协定")
}
pop()
append("和")
pushStringAnnotation(
tag = "tag1",
annotation = "隐衷条款 3:https://www.xxx3.com"
)
withStyle(
style = SpanStyle(
color = Color.Blue,
fontWeight = FontWeight.Bold,
textDecoration = TextDecoration.Underline
)
) {append("隐衷政策")
}
pop()}
val tags = listOf("tag1", "tag2", "tag3")
ClickableText(
text = annotatedText,
onClick = { offset ->
tags.forEach { tag ->
annotatedText.getStringAnnotations(
tag = tag, start = offset,
end = offset
)
.firstOrNull()?.let { annotation ->
Log.d("xige", annotation.item)
}
}
}
)
}
点击蓝色字,打印如下:
在实在场景中,只须要将打印的中央,换跳转 Webview 展现即可。
总结
以上就是 Jetpack Compose 中,Text 组件应用的介绍,以及文字显示的各种应用摸索。欢送大家留言交换。
我是西哥,欢送大家关注我的公众号:「技术最 TOP」,干货内容第一工夫送阅!