แสดงอีโมจิ

ชุดอีโมจิมาตรฐานจะได้รับการอัปเดตทุกปีโดย 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 ในมุมมองแทนวิดเจ็ต 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 Composable

หากคุณขยายจาก 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 }
                        )
                    }
                }
            }
        )
    }
}

ดูรายละเอียดได้ในเอกสารประกอบเกี่ยวกับ API สำหรับความสามารถในการทำงานร่วมกัน

การแก้ปัญหา

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