社交和即时通讯应用中的短信功能

文本是社交应用的核心，用户可在其中分享想法、表达情感和讲述故事。本文档探讨了如何有效地处理文本，重点介绍了表情符号、样式设置和富媒体内容集成。

使用表情符号

表情符号已成为现代沟通中不可或缺的一部分， 社交和即时通讯应用它们可以跨越语言障碍， 快速有效地表达情绪和想法。

Compose 中的表情符号支持

Jetpack Compose 是 Android 的新式声明式界面工具包，可简化表情符号 处理：

  • 输入：TextField 组件原生支持表情符号输入。
  • 显示：Compose 的 Text 组件可正确渲染表情符号， 确保在提供 与 emoji2 兼容的可下载字体提供程序，例如由 Google Play 服务。

显示表情符号介绍了如何在 Jetpack Compose 中显示表情符号，包括如何 如何确保您的应用显示最新的表情符号字体，如何确保表情符号 如果您的应用使用 同一个 activity 中同时使用 View 和 Compose 以及如何排查表情符号未按预期显示的问题。

View 中的表情符号支持

如果您使用的是 Android View，则 AppCompat 库 1.4 或更高版本提供了 为 TextView 的平台子类提供表情符号支持：

如果您要创建一个自定义视图，并且该视图是 TextView 的直接或间接子类，请扩展 AppCompat 实现（而非平台实现），以获得内置的表情符号支持。支持新式表情符号介绍了如何测试和排查表情符号集成问题、在不使用 AppCompat 的情况下支持表情符号、在自定义视图中支持表情符号、支持备用字体或字体提供程序等。

使用表情符号选择器

Jetpack Emoji Picker 是一个 Android View，可按类别显示表情符号、粘性变体，并支持最近用过的表情符号，可在多种 Android 版本和设备上使用。这是一种轻松提升应用表情符号集成水平的方式。

首先，在 build.gradle 中导入库。

dependencies {
   implementation("androidx.emoji2:emojipicker:$version")
}

将表情符号选择器与 Compose 搭配使用

您将使用 AndroidView 可组合项在 Compose 中构建表情符号选择器。此代码段包含一个监听器，当您看到某个表情符号时， 已选中：

AndroidView(
    modifier = Modifier.fillMaxSize(),
    factory = { context ->
        val emojiPickerView = EmojiPickerView(context)
        emojiPickerView.setOnEmojiPickedListener(this::updateTextField)
        emojiPickerView
    },
)

Compose 1.7 为 BasicTextField 添加了许多新功能，包括 支持 TextFieldState，它可位于 ViewModel 中：

private val emojiTextFieldState = TextFieldState()

@Composable fun EmojiTextField() {
    BasicTextField(
        state = emojiTextFieldState,
    )
}

您可以使用 TextFieldState 在光标位置插入文字，或者 替换所选文字，就像您在输入法中键入内容一样：

private fun insertStringAsIfTyping(textFieldState: TextFieldState, string: String) {
    textFieldState.edit {
        replace(selection.start, selection.end, string)
        // clear selection on replace if necessary
        if (hasSelection) selection = TextRange(selection.end)
    }
}

该回调可以使用辅助函数更新 BasicTextField：

private fun updateTextField(emojiViewItem: EmojiViewItem) {
    insertStringAsIfTyping(emojiTextFieldState, emojiViewItem.emoji)
}

将表情符号选择器与 View 搭配使用

表情符号选择器也非常适合与 View 搭配使用。

膨胀 EmojiPickerView。根据每个表情符号单元的所需大小，可以选择性设置 emojiGridColumns 和 emojiGridRows。

<androidx.emoji2.emojipicker.EmojiPickerView
    …
    app:emojiGridColumns="9" />

在光标位置插入字符或替换所选文本：

// Consider unregistering/reregistering anyTextWatcher that you might have as part of this
private fun insertStringAsIfTyping(editText: EditText, string: String) {
    val stringBuffer = StringBuffer(editText.text.toString())
    val index = editText.selectionStart
    if ( !editText.hasSelection() ) {
        stringBuffer.insert(index, string)
    } else {
        stringBuffer.replace(index, editText.selectionEnd, string)
    }
    editText.setText(stringBuffer.toString())
    editText.setSelection(index + string.length)
}

为所选表情符号提供监听器，并使用该监听器将字符附加到 EditText。

// a listener example
emojiPickerView.setOnEmojiPickedListener {
   val editText = findViewById<EditText>(R.id.edit_text)
   insertStringAsIfTyping(editText, it.emoji)
}

设置文本样式

通过从视觉上区分文字，例如字体样式、大小、粗细 您可以增强可读性、层次结构和整体美感 提升社交或即时通讯应用界面的吸引力。文字样式帮助 用户能快速解析信息、区分不同类型的 并确定重要元素

在 Compose 中设置文本样式

Text 可组合项提供了丰富的样式选项，包括：

  • 文本颜色：设置 Color 可让文本更醒目。
  • 字体大小：通过控制 FontSize 进行适当的缩放。
  • 字体样式：使用 FontStyle 可将文本设为斜体。
  • 字体粗细：调整 FontWeight 以实现粗体、细体等文本变体。
  • 字体系列：使用 FontFamily 选择合适的字体。
Text(
    text = "Hello 👋",
    color = Color.Blue
    fontSize = 18.sp,
    fontWeight = FontWeight.Bold,
    fontFamily = FontFamily.SansSerif
)

您可以使用 themes。

MaterialTheme(
    // This theme would include Color.Blue (as appropriate for dark and light themes)
    colorScheme = colorScheme,
    content = content,
    typography = Typography(
        titleLarge = TextStyle(
            fontSize = 18.sp,
            fontFamily = titleFont,
            fontWeight = FontWeight.Bold
        ),
    ),
)

在文本中添加多种样式

您可以使用 AnnotatedString 在同一 Text 可组合项中设置不同的样式。

AnnotatedString 有一个类型安全的构建器 buildAnnotatedString，以便您更轻松地创建。

@Composable
fun MultipleStylesInText() {
    Text(
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("M")
            }
            append("y ")

            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                append("S")
            }
            append("tyle")
        }
    )
}

如需详细了解 Compose 中的文本样式设置，包括添加阴影、使用画笔进行高级样式设置和不透明度，请参阅设置文本样式。

在 View 中设置文本样式

使用 View 时，可以依赖样式和主题实现一致的排版。如需详细了解如何为应用中的视图应用自定义主题，请参阅样式和主题。如果您想在单个文本视图中设置不同的样式，请参阅 Span，详细了解如何以各种方式更改文本，包括添加颜色、使文本可点击、缩放文本大小以及以自定义方式绘制文本。

支持图片键盘和其他富媒体内容

用户通常希望使用贴纸、动画和其他类型的富媒体内容进行通信。为了让应用能够更轻松地接收富媒体内容，Android 12（API 级别 31）引入了一个统一 API，便于应用接受来自任何来源（剪贴板粘贴、键盘输入或拖放操作）的内容。后退 与以前的 Android 版本（目前可向后兼容到 API 级别 14）兼容， 我们建议您使用此 API 的 Android Jetpack (AndroidX) 版本。

您可以向界面组件附加 OnReceiveContentListener，并在通过任何机制插入内容时获得回调。此回调会成为您的代码接收所有内容（从纯文本和样式文本到标记、图片、视频、音频文件等）的唯一位置。

请参阅接收富媒体内容，详细了解如何在 。Jetpack Compose 现在包含 dragAndDropSource 和 dragAndDropTarget 修饰符，用于简化拖放操作实现 在您的应用内和其他应用之间。