แสดงอีโมจิ

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 ที่ถูกต้อง