แสดงอีโมจิ

ชุดอีโมจิมาตรฐานจะได้รับการอัปเดตเป็นประจำทุกปีโดย Unicode เนื่องจากการใช้งานอีโมจิเพิ่มขึ้นอย่างรวดเร็วสำหรับแอปทุกประเภท

หากแอปแสดงเนื้อหาอินเทอร์เน็ตหรือให้ป้อนข้อความ เราขอแนะนําอย่างยิ่งให้รองรับแบบอักษรอีโมจิล่าสุด มิเช่นนั้น อีโมจิที่ตามมาอาจแสดงเป็นสี่เหลี่ยมจัตุรัสเล็กๆ ที่เรียกว่า tofu (☐) หรือลำดับอีโมจิอื่นๆ ที่แสดงผลไม่ถูกต้อง

Android เวอร์ชัน 11 (API ระดับ 30) และต่ำกว่าอัปเดตแบบอักษรอีโมจิไม่ได้ แอปที่แสดงอีโมจิในเวอร์ชันดังกล่าวจึงต้องอัปเดตด้วยตนเอง

ตัวอย่างอีโมจิสมัยใหม่มีดังนี้

ตัวอย่าง เวอร์ชัน
🫠 🫱🏼‍🫲🏿 🫰🏽 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
        )/* ... */
    )
)
EmojiSnippets.kt

ความสามารถในการทำงานร่วมกัน

หากแอปใช้ทั้ง Views และ Compose ใน Activity เดียวกัน โปรดตรวจสอบว่าคุณใช้ API ที่เหมาะสมเพื่อกำหนดค่าอีโมจิอย่างถูกต้อง ส่วนต่อไปนี้จะอธิบายว่าควรใช้ API แต่ละรายการเมื่อใด

ขยายเวลาจาก ComponentActivity

หาก Activity ขยายมาจากเขียน 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
            }
        }
    }
}
EmojiSnippets.kt

จากนั้นทำดังนี้ในไฟล์ XML

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

ขยายเวลาจาก AppCompatActivity

หาก Activity ขยายมาจาก AppCompatActivity คุณจะใช้ ComposeView เพื่อเรียกใช้ฟังก์ชันคอมโพสิเบิลได้ อีโมจิจะแสดงผลอย่างถูกต้องใน Android ทุกเวอร์ชันเมื่อคุณใช้คอมโพสิชันข้อความ

หากขยายจาก 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
            }
        }
    }
}
EmojiSnippets.kt

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

หากต้องการขยายข้อความที่มี 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 }
                        )
                    }
                }
            }
        )
    }
}
EmojiSnippets.kt

ดูรายละเอียดได้ในเอกสารประกอบของ Interoperability API

การแก้ปัญหา

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