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

يتم تحديث المجموعة العادية من رموز الإيموجي سنويًا بواسطة 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 (التصميم المتعدد الأبعاد 2 أو 3) أو BasicText وBasicTextField، سيتوفّر لك التوافق مع رموز الإيموجي الحديثة بدون أي إعدادات إضافية.

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

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

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

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

إذا كان تطبيقك يستخدم كلاً من 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
            }
        }
    }
}

بعد ذلك، في ملف 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 القابلة للإنشاء.

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

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

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

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