显示表情符号

标准表情符号集每年 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 月)

BOM 2023 年 3 月 (Compose UI 1.4) 引入了对最新表情符号的支持 包括对较低 Android 版本的向后兼容性 到 API 21。

如果您使用 Text TextField(Material 2 或 Material 3)或 BasicTextBasicTextField,开箱即可获享现代表情符号支持。

在应用中测试最新表情符号的最佳方法是使用 搭载 API 30 或更低级别的真实设备。

如果您使用的是自定义表情符号解决方案,或者需要停用默认表情符号 解决方法,您可以使用 PlatformTextStyle(emojiSupportMatch):

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

互操作性

如果您的应用在同一个 Activity 中同时使用 View 和 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 扩展

如果您的 Activity 扩展自 AppCompatActivity,您可以使用 ComposeView,用于调用可组合函数。表情符号在 Android 版本(使用 Text 可组合项时)。

如果您是从 AppCompatActivity 扩展,请从 XML 膨胀 TextView 正确呈现表情符号

这适用于膨胀 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 }
                        )
                    }
                }
            }
        )
    }
}

如需了解详情,请参阅 Interoperability API 文档。

问题排查

如果您看到的是豆腐 (☐) 而非表情符号,请先检查问题是否 测试您的特定测试设备您可以检查以下几个主要方面: