显示表情符号

标准表情符号集由 Unicode 每年更新,因为表情符号的使用在各种类型的应用中都在迅速增长。

如果您的应用显示互联网内容或提供文本输入,我们强烈建议支持最新的表情符号字体。 否则,较新的表情符号可能会显示为一个小方块,称为豆腐 (☐) 或其他渲染错误的表情符号序列。

Android 11(API 级别 30)及更低版本无法更新表情符号字体,因此在这些版本上显示表情符号的应用必须手动更新。

以下是现代表情符号的示例。

示例 版本
🫠 🫱🏼‍🫲🏿 🫰🏽 14.0 (2021年9月)
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13.1 (2020年9月)
🥲 🥷🏿 🐻‍❄️ 13.0 (2020年3月)
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1 (2019年10月)
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0 (2019年2月)

2023年3月BOM (Compose UI 1.4) 带来了对 最新表情符号版本 的支持,包括向后兼容低至 API 21 的旧版 Android 版本。

此支持无需更改您的应用—如果您使用 TextTextField(Material 2 或 Material 3)或 BasicTextBasicTextField,您将立即获得现代表情符号支持。

在您的应用中测试 最新表情符号 的最佳方法是在 API 30 或以下版本的真实设备上进行测试。

如果您使用的是自定义表情符号解决方案,或者出于任何其他原因需要禁用 Compose 中的默认表情符号解析,您可以使用 PlatformTextStyle(emojiSupportMatch)

Text(
    text = "Hello $EMOJI_TEXT",
    style = TextStyle(
        platformStyle = PlatformTextStyle(
            emojiSupportMatch = EmojiSupportMatch.None
        )/* ... */
    )
)

互操作性

如果您的应用在同一个 Activity 中同时使用了 Views 和 Compose,请确保您正在使用适当的 API 来正确配置表情符号。以下部分描述了何时使用每个 API。

ComponentActivity 扩展

如果您的 Activity 从 Compose ComponentActivity 而不是 AppCompatActivity 扩展,请遵循 无需 AppCompat 即可支持表情符号 的说明。

因为您没有扩展 AppCompatActivity,所以请将 Emoji2 库 添加到您的依赖项中,并在您的视图中使用 EmojiTextView 代替 TextView 小部件,如下面的代码片段所示

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val emojiTextView: EmojiTextView = findViewById(R.id.emoji_text_view)
        emojiTextView.text = getString(R.string.emoji_text_view, EMOJI_TEXT)

        val composeView: ComposeView = findViewById(R.id.compose_view)

        composeView.apply {
            setContent {
                // compose code
            }
        }
    }
}

然后,在您的 XML 文件中

<androidx.emoji2.widget.EmojiTextView
    android:id="@+id/emoji_text_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />

AppCompatActivity 扩展

如果您的 ActivityAppCompatActivity 扩展,您可以使用 ComposeView 来调用可组合函数。当您使用 Text 可组合项时,表情符号会在各个 Android 版本上正确渲染。

如果您从 AppCompatActivity 扩展,请从 XML 中膨胀 TextView 以正确渲染表情符号。

如果您在 ComposeView 之外,在 Activity 中膨胀 XML,则适用此规则。

  • ComposeView 外部,在 Activity 中。请注意以下代码片段中 AppCompatActivityTextView 的用法

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val emojiTextView: TextView = findViewById(R.id.emoji_text_view)
        emojiTextView.text = getString(R.string.emoji_text_view, EMOJI_TEXT)

        val composeView: ComposeView = findViewById(R.id.compose_view)

        composeView.apply {
            setContent {
                // compose code
            }
        }
    }
}

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(
            ComposeView(this).apply {
                setContent {
                    Column {
                        Text(EMOJI_TEXT)

                        AndroidViewBinding(ExampleViewBinding::inflate) {
                            emojiTextView.text = EMOJI_TEXT
                        }
                    }
                }
            }
        )
    }
}

要在 ComposeView 内部使用 AndroidView 膨胀文本,请使用 AppCompatTextView 来正确渲染表情符号

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(
            ComposeView(this).apply {
                setContent {
                    Column {
                        Text(EMOJI_TEXT)

                        AndroidView(
                            factory = { context -> AppCompatTextView(context) },
                            update = { it.text = EMOJI_TEXT }
                        )
                    }
                }
            }
        )
    }
}

有关详细信息,请参阅 互操作性 API 文档。

故障排除

如果您看到的是豆腐 (☐) 而不是表情符号,首先检查问题是否是您特定的测试设备。您可以检查几件主要事情