Hiển thị biểu tượng cảm xúc

Bộ biểu tượng cảm xúc tiêu chuẩn được làm mới hằng năm bằng cách Unicode, vì mức độ sử dụng biểu tượng cảm xúc ngày càng tăng cho mọi loại ứng dụng.

Nếu ứng dụng của bạn hiển thị nội dung Internet hoặc cung cấp tính năng nhập văn bản, chúng tôi đặc biệt bạn nên hỗ trợ phông chữ biểu tượng cảm xúc mới nhất. Nếu không, biểu tượng cảm xúc sau này có thể sẽ là hiển thị dưới dạng một hộp hình vuông nhỏ có tên là đậu phụ (☐) hoặc loại hiển thị không chính xác khác trình tự biểu tượng cảm xúc.

Android phiên bản 11 (API cấp 30) trở xuống không thể cập nhật phông chữ biểu tượng cảm xúc, vì vậy bạn phải cập nhật các ứng dụng hiển thị chúng trên các phiên bản đó theo cách thủ công.

Sau đây là ví dụ về biểu tượng cảm xúc hiện đại.

Ví dụ Phiên bản
🫠 🫱🏼‍🫲🏿 🫰🏽 14.0 (Tháng 9 năm 2021)
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13.1 (Tháng 9 năm 2020)
🥲 🥷🏿 🐻‍❄️ 13.0 (Tháng 3 năm 2020)
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1 (Tháng 10 năm 2019)
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0 (Tháng 2 năm 2019)

BOM tháng 3 năm 2023 (Giao diện người dùng Compose 1.4) hỗ trợ biểu tượng cảm xúc mới nhất phiên bản, bao gồm cả khả năng tương thích ngược với các phiên bản Android cũ trở xuống lên API 21.

Hoạt động hỗ trợ này không yêu cầu thay đổi nào đối với ứng dụng của bạn – nếu bạn sử dụng Text và TextField (Material 2 hoặc Material 3) hoặc BasicText và BasicTextField, bạn có thể sử dụng ngay tính năng hỗ trợ biểu tượng cảm xúc hiện đại.

Cách tốt nhất để kiểm tra biểu tượng cảm xúc mới nhất trong ứng dụng là sử dụng một thiết bị thực trên API 30 trở xuống.

Nếu bạn đang dùng giải pháp biểu tượng cảm xúc tuỳ chỉnh hoặc cần tắt biểu tượng cảm xúc mặc định độ phân giải trong Compose vì bất kỳ lý do nào khác, bạn có thể sử dụng PlatformTextStyle(emojiSupportMatch):

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

Khả năng tương tác

Nếu ứng dụng của bạn dùng cả Thành phần hiển thị và Compose trong cùng một Activity, hãy đảm bảo bạn đang sử dụng các API thích hợp để định cấu hình biểu tượng cảm xúc một cách chính xác. Nội dung sau đây mô tả trường hợp sử dụng từng API.

Mở rộng từ ComponentActivity

Nếu Activity của bạn mở rộng từ Compose ComponentActivity thay vì AppCompatActivity, làm theo Biểu tượng cảm xúc hỗ trợ không có AppCompat .

Vì bạn không mở rộng AppCompatActivity, hãy thêm Emoji2 thư viện vào các phần phụ thuộc và sử dụng EmojiTextView trong khung hiển thị thay vì tiện ích TextView, như trong đoạn mã sau:

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
            }
        }
    }
}
EmojiSnippets.kt

Sau đó, trong tệp XML:

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

Mở rộng từ AppCompatActivity

Nếu Activity của bạn kéo dài từ AppCompatActivity, bạn có thể sử dụng ComposeView để gọi các hàm có khả năng kết hợp. Biểu tượng cảm xúc hiển thị chính xác trên Các phiên bản Android khi bạn sử dụng thành phần kết hợp Text (Văn bản).

Nếu bạn đang mở rộng từ AppCompatActivity, hãy tăng cường TextView từ XML để biểu tượng cảm xúc hiển thị chính xác.

Điều này xảy ra nếu bạn tăng cường XML:

  • bên ngoài ComposeView, trong Activity. Lưu ý cách sử dụng AppCompatActivity và TextView trong đoạn mã sau:

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
            }
        }
    }
}
EmojiSnippets.kt

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
                        }
                    }
                }
            }
        )
    }
}
EmojiSnippets.kt

Để tăng cường văn bản bằng AndroidView bên trong ComposeView, hãy sử dụng AppCompatTextView để hiển thị biểu tượng cảm xúc đúng cách:

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 }
                        )
                    }
                }
            }
        )
    }
}
EmojiSnippets.kt

Xem tài liệu về Interoperability API (API Khả năng tương tác) để biết thông tin chi tiết.

Khắc phục sự cố

Nếu bạn nhìn thấy đậu phụ (☐) thay vì biểu tượng cảm xúc, trước tiên, hãy kiểm tra xem vấn đề có phải là thiết bị thử nghiệm cụ thể của bạn. Dưới đây là một số việc chính mà bạn có thể kiểm tra: