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 Unicode làm mới hằng năm, vì mức sử dụng biểu tượng cảm xúc đang tăng lên nhanh chóng đối với mọi loại ứng dụng.

Nếu ứng dụng của bạn hiển thị nội dung trên Internet hoặc cung cấp tính năng nhập văn bản, bạn nên hỗ trợ các phông chữ biểu tượng cảm xúc mới nhất. Nếu không, sau này biểu tượng cảm xúc có thể hiển thị dưới dạng một ô hình vuông nhỏ gọi là đậu phụ (trí) hoặc các chuỗi biểu tượng cảm xúc khác được kết xuất không chính 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, các ứng dụng hiển thị biểu tượng cảm xúc trên các phiên bản đó phải được cập nhật 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 (Compose UI 1.4) hỗ trợ phiên bản biểu tượng cảm xúc mới nhất, bao gồm cả khả năng tương thích ngược với các phiên bản Android cũ xuống đến API 21.

Việc hỗ trợ này không đòi hỏi ứng dụng của bạn phải thay đổi – nếu sử dụng Text và TextField (Material 2 hoặc Material 3) hay BasicText và BasicTextField, bạn sẽ được sử dụng biểu tượng cảm xúc hiện đại ngay từ đầu.

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

Nếu đang sử dụng giải pháp biểu tượng cảm xúc tuỳ chỉnh hoặc cần tắt độ phân giải biểu tượng cảm xúc mặc định 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ả Khung 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 đúng cách. Các phần sau đây mô tả thời điểm 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, hãy làm theo hướng dẫn 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 thư viện Emoji2 vào phần phụ thuộc rồi sử dụng EmojiTextView trong khung hiển thị thay vì tiện ích TextView, như minh hoạ 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 của bạn:

<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 mở rộng từ AppCompatActivity, bạn có thể 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 Văn bản.

Nếu bạn 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 sẽ áp dụng 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

Để phóng to 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 thấy biểu tượng đậu phụ (myactivity) 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 hay không. Dưới đây là một số điều chính mà bạn có thể kiểm tra: