社交和消息应用中的文本

文本是社交应用的核心，用户在这里分享想法、表达情感和讲述故事。本文档探讨了如何有效使用文本，重点关注表情符号、样式和富内容集成。

使用表情符号

表情符号已成为现代通信不可或缺的一部分，尤其是在社交和消息应用中。它们跨越语言障碍，让用户能够快速有效地表达情感和想法。

Compose 中的表情符号支持

Jetpack Compose 是 Android 现代声明式 UI 工具包，可简化表情符号处理

  • 输入：TextField 组件原生支持表情符号输入。
  • 显示：Compose 的 Text 组件可正确渲染表情符号，确保其在提供 emoji2 兼容的可下载字体提供程序的设备和平台上（例如由 Google Play 服务驱动的设备）呈现一致的外观。

显示表情符号涵盖了如何在 Jetpack Compose 中显示表情符号，包括如何确保您的应用显示最新的表情符号字体，如果您的应用在同一 Activity 中同时使用 Views 和 Compose，如何确保表情符号正常工作，以及在表情符号未按预期显示时如何进行问题排查。

Views 中的表情符号支持

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

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

使用表情符号选择器

Jetpack 表情符号选择器是一个 Android 视图，它提供分类的表情符号列表、固定变体以及对最近使用的表情符号的支持——兼容多个 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 在光标位置插入文本或替换选定的文本，就像在 IME 中键入一样

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)
}

在 Views 中使用表情符号选择器

表情符号选择器也与 Views 配合良好。

实例化 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
)

您可以使用主题在整个应用中一致地设置这些样式选项。

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 中文本样式的更多信息，包括添加阴影、使用画笔进行高级样式设置和不透明度。

在 Views 中设置文本样式

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

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

用户经常希望使用贴纸、动画和其他类型的富内容进行交流。为了让应用更简单地接收富内容，Android 12（API 级别 31）引入了一个统一的 API，允许您的应用接受来自任何来源的内容：剪贴板、键盘或拖放。为了向后兼容以前的 Android 版本（目前可追溯到 API 级别 14），我们建议您使用此 API 的 Android Jetpack (AndroidX) 版本。

您将 OnReceiveContentListener 附加到 UI 组件，并在通过任何机制插入内容时获得回调。回调成为您的代码处理接收所有内容的单一位置，从纯文本和样式文本到标记、图像、视频、音频文件等等。

请参阅接收富内容，了解如何在您的应用中实现支持。Jetpack Compose 现在具有 dragAndDropSource 和 dragAndDropTarget 修饰符，可简化在您的应用内部和其他应用之间实现拖放操作。