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

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

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

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

في ما يلي أمثلة على الرموز التعبيرية الحديثة.

أمثلة الإصدار
🫠 🫱🏼‍🫲🏿 🫰🏽 14.0 (أيلول (سبتمبر) 2021)
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13.1 (أيلول/سبتمبر 2020)
🥲 🥷🏿 🐻 ☀️ 13.0 (آذار/مارس 2020)
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1 (تشرين الأول/أكتوبر 2019)
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0 (شباط/فبراير 2019)

يتيح BOM في آذار (مارس) 2023 (Compose UI 1.4) استخدام أحدث إصدار من الرموز التعبيرية، بما في ذلك التوافق مع الإصدارات القديمة من Android التي تعود إلى IDE 21.

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

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

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

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

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

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

يمتد من ComponentActivity

إذا كان Activity يمتد من رمز الإنشاء 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 }
                        )
                    }
                }
            }
        )
    }
}

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

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

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