عرض الرموز التعبيرية

تُجدّد Unicode المجموعة العادية من رموز الإيموجي سنويًا، وذلك لأنّ استخدامها يتزايد بسرعة في جميع أنواع التطبيقات.

ننصحك بشدة بتوفير الدعم لأحدث خطوط الإيموجي إذا كان تطبيقك يعرض محتوى من الإنترنت أو يتيح إدخال النصوص. وإلا، قد تظهر رموز الإيموجي الأحدث على شكل مربّع صغير يُعرف باسم توفو (☐) أو تسلسلات أخرى من رموز الإيموجي يتم عرضها بشكل غير صحيح.

لا يمكن للإصدارات 11 (المستوى 30 لواجهة برمجة التطبيقات) والإصدارات الأقدم من Android تحديث خط الإيموجي، لذا يجب تحديث التطبيقات التي تعرضها على هذه الإصدارات يدويًا.

في ما يلي أمثلة على رموز الإيموجي الحديثة:

أمثلة الإصدار
🫩 🪉 🇨🇶 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 1.4) يتيح دعم أحدث إصدار من رموز الإيموجي، بما في ذلك التوافق مع الإصدارات القديمة من Android وصولاً إلى المستوى 21 لواجهة برمجة التطبيقات.

لا يتطلّب هذا الدعم إجراء أي تغييرات على تطبيقك، فإذا كنت تستخدم Text و TextField (Material 2 أو Material 3) أو BasicText و BasicTextField، سيتوفّر لك دعم رموز الإيموجي الحديثة تلقائيًا.

أفضل طريقة لاختبار أحدث رموز الإيموجي في تطبيقك هي استخدام جهاز حقيقي يعمل على المستوى 30 لواجهة برمجة التطبيقات أو مستوى أقل.

إذا كنت تستخدم حلاً مخصّصًا لرموز الإيموجي أو تحتاج إلى إيقاف دقة عرض رموز الإيموجي التلقائية في Compose لأي سبب آخر، يمكنك استخدام PlatformTextStyle(emojiSupportMatch):

Text(
    text = "Hello $EMOJI_TEXT",
    style = TextStyle(
        platformStyle = PlatformTextStyle(
            emojiSupportMatch = EmojiSupportMatch.None
        )/* ... */
    )
)
EmojiSnippets.kt

إمكانية التشغيل التفاعلي

إذا كان تطبيقك يستخدم كلاً من Views وCompose في Activity نفسه، تأكَّد من استخدام واجهات برمجة التطبيقات المناسبة لضبط رموز الإيموجي بشكلٍ صحيح. توضّح الأقسام التالية الحالات التي يجب فيها استخدام كل واجهة برمجة تطبيقات.

الامتداد من 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
            }
        }
    }
}
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 عند استخدام الدوال القابلة للإنشاء Text.

إذا كنت تستخدم 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

يمكنك الاطّلاع على مستندات واجهات برمجة التطبيقات لإمكانية التشغيل التفاعلي للحصول على التفاصيل.

تحديد المشاكل وحلّها

إذا كنت ترى توفو (☐) بدلاً من رمز الإيموجي، تحقَّق أولاً مما إذا كانت المشكلة في جهاز الاختبار المحدد. في ما يلي بعض الجوانب الرئيسية التي يمكنك التحقّق منها: