แสดงอีโมจิ

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 หรือต่ำกว่า

หากใช้โซลูชันอีโมจิที่กำหนดเอง หรือต้องการปิดใช้การแปลงอีโมจิเริ่มต้นในฟีเจอร์เขียนด้วยเหตุผลอื่นใด ให้ใช้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 ลงในการขึ้นต่อกันและใช้ EmojiTextView ในมุมมองแทนวิดเจ็ต 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
            }
        }
    }
}

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

การแก้ปัญหา

หากเห็นเต้าหู้ (☐) แทนอีโมจิ ให้ตรวจสอบก่อนว่าปัญหาเกิดจากอุปกรณ์ทดสอบของคุณหรือไม่ สิ่งหลักๆ ที่คุณตรวจสอบได้มีดังนี้