Unicode จะรีเฟรชชุดอีโมจิมาตรฐานทุกปีโดย Unicode เนื่องจากมีการใช้อีโมจิเพิ่มขึ้น อย่างรวดเร็วในแอปทุกประเภท
หากแอปแสดงเนื้อหาจากอินเทอร์เน็ตหรือมีช่องป้อนข้อความ เราขอแนะนำอย่างยิ่งให้รองรับฟอนต์อีโมจิเวอร์ชันล่าสุด มิฉะนั้น อีโมจิเวอร์ชันใหม่ๆ อาจแสดงเป็นกล่องสี่เหลี่ยมเล็กๆ ที่เรียกว่า เต้าหู้ (☐) หรือลำดับอีโมจิอื่นๆ ที่แสดงผลไม่ถูกต้อง
Android เวอร์ชัน 11 (ระดับ API 30) และต่ำกว่าจะอัปเดตฟอนต์อีโมจิไม่ได้ ดังนั้นแอปที่แสดงอีโมจิในเวอร์ชันเหล่านั้นจะต้องอัปเดตด้วยตนเอง
ตัวอย่างอีโมจิสมัยใหม่มีดังนี้
| ตัวอย่าง | เวอร์ชัน |
|---|---|
| 🇨🇶 | 16.0 (กันยายน 2024) |
| 🐦🔥 🧑🧑🧒🧒 👩🏽🦽➡️ 🇲🇶 | 15.1 (กันยายน 2023) |
| 🩷 🫸🏼 🐦⬛ | 15.0 (กันยายน 2022) |
| 🫠 🫱🏼🫲🏿 🫰🏽 | 14.0 (กันยายน 2021) |
| 😶🌫️ 🧔🏻♀️ 🧑🏿❤️🧑🏾 | 13.1 (กันยายน 2020) |
| 🥲 🥷🏿 🐻❄️ | 13.0 (มีนาคม 2020) |
| 🧑🏻🦰 🧑🏿🦯 👩🏻🤝👩🏼 | 12.1 (ตุลาคม 2019) |
| 🦩 🦻🏿 👩🏼🤝👩🏻 | 12.0 (กุมภาพันธ์ 2019) |
BOM มีนาคม 2023 (Compose UI 1.4) รองรับอีโมจิ เวอร์ชันล่าสุด รวมถึงความเข้ากันได้แบบย้อนกลับกับ Android เวอร์ชันเก่าจน ถึง API 21
การรองรับนี้ไม่จำเป็นต้องมีการเปลี่ยนแปลงในแอป— หากคุณใช้ Text และ
TextField (Material 2 หรือ Material 3) หรือ BasicText และ
BasicTextField คุณจะได้รับการรองรับอีโมจิสมัยใหม่ทันที
วิธีที่ดีที่สุดในการทดสอบอีโมจิเวอร์ชันล่าสุดในแอปคือการใช้ อุปกรณ์จริงใน API 30 หรือต่ำกว่า
หากคุณใช้โซลูชันอีโมจิที่กำหนดเอง หรือต้องการปิดใช้การแสดงผลอีโมจิเริ่มต้นใน Compose ด้วยเหตุผลอื่นๆ คุณสามารถใช้
PlatformTextStyle(emojiSupportMatch) ได้
Text( text = "Hello $EMOJI_TEXT", style = TextStyle( platformStyle = PlatformTextStyle( emojiSupportMatch = EmojiSupportMatch.None )/* ... */ ) )
ความสามารถในการทำงานร่วมกัน
หากแอปใช้ทั้ง Views และ Compose ใน Activity เดียวกัน ให้ตรวจสอบว่าคุณใช้ API ที่เหมาะสมเพื่อกำหนดค่าอีโมจิอย่างถูกต้อง ส่วนต่อไปนี้จะอธิบายว่าควรใช้ API แต่ละรายการเมื่อใด
การขยายจาก ComponentActivity
หาก Activity ขยายจาก Compose ComponentActivity แทนที่จะเป็น
AppCompatActivity ให้ทำตาม วิธีการรองรับอีโมจิโดยไม่ต้องใช้ AppCompat
เนื่องจากคุณไม่ได้ขยาย AppCompatActivity ให้เพิ่มไลบรารี Emoji2
ลงในทรัพยากร Dependency และใช้ EmojiTextView ใน Views
แทนวิดเจ็ต 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 Composables
หากคุณขยายจาก AppCompatActivity ให้ขยาย TextView จาก XML
เพื่อให้แสดงผลอีโมจิได้อย่างถูกต้อง
ซึ่งจะใช้ได้ในกรณีที่คุณขยาย XML ดังนี้
- นอก
ComposeViewในActivityโปรดสังเกตการใช้งานAppCompatActivityและTextViewในข้อมูลโค้ดต่อไปนี้
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 } } } }
- ภายใน
ComposeViewผ่านการผูกข้อมูลของ View โดยใช้AndroidViewBindingเช่น ในข้อมูลโค้ดต่อไปนี้
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 } } } } ) } }
หากต้องการขยายข้อความด้วย AndroidView ภายใน ComposeView ให้ใช้
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 APIs
การแก้ปัญหา
หากเห็น เต้าหู้ (☐) แทนอีโมจิ ให้ตรวจสอบก่อนว่าปัญหาเกิดจากอุปกรณ์ทดสอบเฉพาะของคุณหรือไม่ สิ่งสำคัญที่ควรตรวจสอบมีดังนี้
- คุณอาจใช้อุปกรณ์ที่เพิ่งแฟลชเมื่อเร็วๆ นี้หรืออีมูเลเตอร์ใหม่ หากเป็นไปได้ ให้ลองใช้อุปกรณ์ทดสอบจริงเครื่องอื่นที่คุณใช้บ่อยๆ ซึ่งลงชื่อเข้าใช้บัญชี Google โปรดทราบว่า API ควรเป็น 30 หรือต่ำกว่าเพื่อให้แน่ใจว่าอีโมจิจะทำงานในเวอร์ชันที่ถูกต้อง
- โทรศัพท์ที่ใช้ทดสอบไม่รองรับฟอนต์ที่ดาวน์โหลดได้
- ตรวจสอบเวอร์ชันของบริการ Google Play ที่ถูกต้อง
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- ปัจจัยอื่นๆ ที่ควรพิจารณา
- ข้อความใน Compose
- เลื่อน