แสดงอีโมจิ

ชุดอีโมจิมาตรฐานจะได้รับการอัปเดตเป็นประจำทุกปีโดย 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 ให้เพิ่มไลบรารีอีโมจิ2 ลงในทรัพยากร Dependency และใช้ 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 (☐) แทนอีโมจิ ให้ตรวจสอบก่อนว่าปัญหาเกิดจากอุปกรณ์ทดสอบเครื่องใด สิ่งที่คุณตรวจสอบได้หลักๆ มีดังนี้