Android的Compose系列之文本TextView

文章目录

前言
一、Text介绍
二、使用

前言

本文用来介绍有关TextView文本的Compose中使用形式，主要介绍各种场景下的使用方式与本身的属性设置等，同时该文章也会长期更新，添加或更换新的api,以及我发现的新的使用方式，请各位务必收藏，可以随时翻阅。

官方中文文档的地址(需要科学上网)：https://developer.android.com/develop/ui/compose/documentation?hl=zh-cn

学习Compose的网站参考(部分内容可能过时)：https://jetpackcompose.cn/docs/

一、Text介绍

Text是Compose中用来显示文本内容的UI,等同于TextView，相关属性也很雷同，但是点击事件等设置有所不同，以及使用方式也有所变化。

二、使用

1.常用使用方式

kotlin 复制代码

@Composable
fun TextComposeSample() { //5种不同的用法

    /**
     * 直接赋予内容
     */
    Text("这是预览界面的内容!")
    /**
     * 结合资源使用，推荐
     */
    Text(stringResource(R.string.contents))
}

2.相关参数设置

Text的属性详解：

kotlin 复制代码

Text(
        text = "文本具体内容",
        color = Color.Red, //颜色
        fontSize = 20.sp, //字号
        fontStyle = FontStyle.Italic, //样式，可选Normal普通或Italic斜体
        fontWeight = FontWeight.W100, //粗细
        fontFamily = FontFamily.Serif, //字体
        letterSpacing = 12.sp, //文字的间距
       // textDecoration = TextDecoration.None, //装饰 Underline下划线 LineThrough删除线 None无
        textDecoration = TextDecoration.combine( //多种装饰合并
            listOf( //下划线+删除线
                TextDecoration.Underline,
                TextDecoration.LineThrough
            )
        ),
        textAlign = TextAlign.Center, //相对于父容器的文本对齐方式，设置Modifier.fillMaxWidth()或者父容器不是自适应才能看到效果
        lineHeight = 30.sp, //行高
        maxLines = 2, //显示行数极值，超过部分会被截断
        overflow = TextOverflow.Ellipsis, //超出部分显示省略号，Clip直接截断显示 Visible强制完整显示
        softWrap = true, //是否自动换行，默认true,false时会单行显示并可能溢出
        modifier = Modifier //修饰符，用于控制尺寸、边距、对齐等布局行为
            .padding(10.dp) //内边距
            .background(Color.Yellow) //背景
            .width(120.dp) //宽度
            .height(120.dp), //长度
        )

Text中设置style的属性详解：

kotlin 复制代码

//样式的设置，  可在data类中定义val BodyNormal = TextStyle()可将不同样式赋值给全项目特定控件来实现复用并统一风格
 Text(
        text = "文本具体内容",
        style = TextStyle( //设置样式可以设置统一的风格
            color = Color.Blue, //颜色
            fontSize = 20.sp, //字号
            fontWeight = FontWeight.Bold, //粗体
            fontStyle = FontStyle.Italic, //字体
            textDecoration = TextDecoration.Underline, // 下划线
            fontFamily = FontFamily.Serif, // 字体家族
            letterSpacing = 2.sp, // 字间距
            lineHeight = 30.sp // 行高
        )
    )

3.不同需求的功能实现

多语言下的设置与占位符使用

kotlin 复制代码

  /**
     * 用于多语言切换与占位符使用
     *   注：需在strings.xml 中设置资源
     *  <string name="contents_language">这是多语种适配与占位符设置，姓名：%1$s，年龄：%2$d</string>
     */
    Text(
        text = stringResource(
            id = R.string.contents_language,
            "张三", //替换 %1$s
            6 //替换 %2$d
        )
    )

通过风格统一管理不同的Text显示

通常有两种方式，一种是使用自带的MaterialThem中的Medium、Small、Large三种不同的预设对其设置为统一的诸如标题、正文等格式，一种是通过自定义的方式进行统一设置。

官方Text的文档：https://developer.android.com/develop/ui/compose/text/user-interactions?hl=zh-cn

kotlin 复制代码

//默认的统一风格
 Text(text = "自带的标题的样式", style = MaterialTheme.typography.headlineMedium) 
 Text(text = "自带的正文的样式", style = MaterialTheme.typography.bodyMedium)

kotlin 复制代码

//使用自定义风格管理
// 1. 主题样式定义（ui/theme/TextStyles.kt）
data class AppTextStyles(
    val title: TextStyle,
    val content: TextStyle,
    val hint: TextStyle
)

val LightTextStyles = AppTextStyles(
    title = TextStyle(
        fontSize = 18.sp,
        fontWeight = FontWeight.SemiBold,
        color = Color.Black,
        lineHeight = 26.sp
    ),
    content = TextStyle(
        fontSize = 16.sp,
        color = Color.Gray,
        lineHeight = 24.sp
    ),
    hint = TextStyle(
        fontSize = 14.sp,
        color = Color.LightGray,
        lineHeight = 20.sp
    )
)

val DarkTextStyles = AppTextStyles(
    title = TextStyle(
        fontSize = 18.sp,
        fontWeight = FontWeight.SemiBold,
        color = Color.White,
        lineHeight = 26.sp
    ),
    content = TextStyle(
        fontSize = 16.sp,
        color = Color.LightGray,
        lineHeight = 24.sp
    ),
    hint = TextStyle(
        fontSize = 14.sp,
        color = Color.Gray,
        lineHeight = 20.sp
    )
)
//2.使用
     //主题样式的复用
    Text(text = "标题", style = MaterialTheme.appTextStyles.title)
    Text(text = "内容", style = MaterialTheme.appTextStyles.content)
    Text(text = "提示", style = MaterialTheme.appTextStyles.hint)
    //主题样式复用时的微调
    Text(text = "微调", style = MaterialTheme.appTextStyles.hint.copy(
        color = Color.Red, //红色
        fontWeight = FontWeight.Bold //粗体
     )
    )

文字点击功能

普通点击事件中点击事件最好放在修饰符中尺寸、背景等之后，偏移与裁剪等设置之前

如：Modifier

.width(200.dp) // 1. 尺寸

.background(Color.Gray) // 2. 背景

.clickable { ... } // 3. 点击

.offset(x = 10.dp) // 4. 偏移

.clip(RoundedCornerShape(12.dp)) // 5. 裁剪（圆角矩形）

常用的形式，默认带点击的涟漪效果

kotlin 复制代码

Text(
        text = "文本具体内容",
        fontSize = 20.sp, //字号
        modifier = Modifier //修饰符，用于控制尺寸、边距、对齐等布局行为
            .clickable(
                onClick = { //普通场景点击，默认带有涟漪效果
                    Toast.makeText(context, "点击", Toast.LENGTH_SHORT).show()
                }
            )
    )

取消点击时涟漪效果

kotlin 复制代码

Text(
        text = "文本具体内容",
        fontSize = 20.sp, //字号
        modifier = Modifier //修饰符，用于控制尺寸、边距、对齐等布局行为
            .clickable(
                onClick = { //普通场景点击，默认带有涟漪效果
                    Toast.makeText(context, "点击", Toast.LENGTH_SHORT).show()
                },
                indication = null, //取消涟漪效果
                interactionSource = remember { MutableInteractionSource() } //取消时必须配合该参数
            )
    )

文字超链接

注意文字超链接的关键在于这段文字不能使用传统的点击设置，而是需要对可点击部分设置，其他部分则不能设置

kotlin 复制代码

 /**
     * 通过AnnotatedString构建带注解处理+样式的富文本
     */
    val annotatedText = buildAnnotatedString {
        append("请点击") //拼接普通文本
        pushStringAnnotation(tag = "URL", annotation = "https://www.baidu.com") //为执行文本片段标记注解
        //对指定文本片段设置样式
        withStyle(
            style = SpanStyle(
                color = Color.Blue,
                textDecoration = TextDecoration.Underline
            )
        ) { //蓝色+下划线
            append("此处")
        }
        pop() //结束当前注解的作用域
        append("访问")

    }
    val context = LocalContext.current //获取compose提供的Context
    Text(
        text = annotatedText,
        modifier = Modifier.clickable {
            //从整个文本的start到end中查找tag="URL"的注解，返回List<StringAnnotation>
            val annotations = annotatedText.getStringAnnotations( //解析
                tag = "URL",
                start = 0,
                end = annotatedText.length
            )
            annotations.firstOrNull()?.let { //获取第一个匹配的注解
                Toast.makeText(context, "点击了链接", Toast.LENGTH_SHORT).show()
            }
        })

文字复制功能

全部可复制：

kotlin 复制代码

   SelectionContainer() { //长按负值功能,此处时调用了默认的自定义长按选中并复制的功能页面
        Text(
            text = stringResource(id = R.string.contents), //文本
            color = Color.Red, //颜色
            fontSize = 15.sp, //字号
        )
    }

部分可复制：

kotlin 复制代码

SelectionContainer() {
        Column() { //进行垂直排列
            Text(text = "可复制部分1")
            Text(text = "可复制部分2")
            DisableSelection { //内容包裹部分不可复制
                Text("不可复制部分1")
                Text("不可复制部分2")
            }
            Text(text = "可复制部分3")
        }
    }