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 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 Internet hoặc cung cấp phương thức 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, biểu tượng cảm xúc sau này có thể hiển thị dưới dạng một hộp hình vuông nhỏ gọi là đậu phụ (☐) hoặc các chuỗi 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 các ứng dụng hiện biểu tượng cảm xúc 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ợ 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 API cấp 21.
Tính năng hỗ trợ này không đòi hỏi bạn phải thay đổi ứng dụng. Nếu bạn sử dụng Text
và TextField
(Material 2 hoặc Material 3) hoặc BasicText
và BasicTextField
, bạn sẽ 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 thử 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 độ 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 )/* ... */ ) )
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 rằng bạn đang sử dụng các API phù 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ả 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
, hãy làm theo Biểu tượng cảm xúc hỗ trợ không có hướng dẫn AppCompat.
Vì bạn không mở rộng AppCompatActivity
, hãy thêm thư viện mọi biểu tượng cảm xúc 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ư 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 } } } }
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" />
Mở rộng từ AppCompatActivity
Nếu Activity
mở rộng 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 Văn bản.
Nếu bạn đang mở rộng từ AppCompatActivity
, hãy tăng cường TextView
từ XML để có các 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
, trongActivity
. Hãy lưu ý cách sử dụngAppCompatActivity
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 } } } }
- bên trong
ComposeView
, thông qua tính năng liên kết khung hiển thị bằngAndroidViewBinding
, 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 } } } } ) } }
Để tăng cường văn bản bằng AndroidView
bên trong ComposeView
, hãy sử dụng AppCompatTextView
để kết xuất 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 } ) } } } ) } }
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 đậ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 hay không. Dưới đây là một số việc chính mà bạn có thể kiểm tra:
- Có thể bạn đang dùng một thiết bị được cài đặt ROM gần đây hoặc một trình mô phỏng mới. Nếu có thể, hãy thử một thiết bị thử nghiệm thực khác mà bạn thường sử dụng đã đăng nhập vào Tài khoản Google của bạn. Hãy nhớ API phải từ 30 trở xuống để đảm bảo biểu tượng cảm xúc hoạt động trong đúng phiên bản.
- Đ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 chính xác của Dịch vụ Google Play.
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Những điểm khác cần cân nhắc
- Văn bản trong Compose
- Cuộn