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 cập nhật hằng năm, vì việc sử dụng biểu tượng cảm xúc đang tăng nhanh chóng trên 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, các biểu tượng cảm xúc sau này có thể hiển thị dưới dạng một ô vuông nhỏ gọi là đậu phụ (☐) hoặc các trình tự biểu tượng cảm xúc khác được hiển thị 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, bạn phải cập nhật thủ công những ứng dụng hiển thị các biểu tượng cảm xúc này trên những phiên bản Android đó.

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

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ũ cho đến API 21.

Tính năng hỗ trợ này không yêu cầu bạn thay đổi ứng dụng – nếu dùng Text và TextField (Material 2 hoặc Material 3) hoặc BasicText và BasicTextField, bạn sẽ được hỗ trợ biểu tượng cảm xúc hiện đại ngay lập tức.

Cách tốt nhất để kiểm thử các 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 có API 30 trở xuống.

Nếu đang sử dụng một 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 sử dụng cả Khung hiển thị và Compose trong cùng một Activity, hãy đảm bảo rằng 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. Các phần sau đây mô tả thời điểm sử dụng từng API.

Kéo dài 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 Hỗ trợ biểu tượng cảm xúc không có AppCompat.

Vì bạn không mở rộng AppCompatActivity, hãy thêm thư viện Emoji2 vào các phần phụ thuộc và sử dụng EmojiTextView trong các 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:

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

Kéo dài từ AppCompatActivity

Nếu Activity của bạn 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 Text.

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

Điều này áp dụng nếu bạn đang tăng cường XML:

• bên ngoài ComposeView, trong Activity. Hãy 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

• bên trong ComposeView, thông qua liên kết khung hiển thị bằng AndroidViewBinding, như trong đoạn mã sau:

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 kích thước văn bản bằng AndroidView bên trong ComposeView, hãy 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

Hãy xem tài liệu về API tương tác để biết thông tin chi tiết.

Khắc phục sự cố

Nếu bạ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à do thiết bị kiểm thử cụ thể của bạn hay không. Bạn có thể kiểm tra một số điểm chính sau:

• Có thể bạn đang sử dụng một thiết bị mới cài đặt ROM hoặc một trình mô phỏng mới. Nếu có thể, hãy thử một thiết bị kiểm thử thực khác mà bạn thường dùng và đã đăng nhập vào Tài khoản Google của bạn. Hãy nhớ rằng API phải là 30 trở xuống để đảm bảo biểu tượng cảm xúc hoạt động trong các phiên bản chính xác.
• Điện thoại thử nghiệm không hỗ trợ phông chữ có thể tải xuống.
• Kiểm tra phiên bản Dịch vụ Google Play chính xác.