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

يتم تحديث مجموعة رموز الإيموجي العادية سنويًا من قِبل Unicode، حيث يتزايد استخدام رموز الإيموجي بسرعة في جميع أنواع التطبيقات.

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

لا يمكن تحديث خطوط الإيموجي في الإصدار 11 من نظام التشغيل Android (المستوى 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 السابقة حتى المستوى 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
        )/* ... */
    )
)

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

إذا كان تطبيقك يستخدم كلاً من 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 عند استخدام الدوال المركّبة للنصوص.

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

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

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

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