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

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

إذا كان تطبيقك يعرض محتوى على الإنترنت أو يتيح إدخال نص، ننصح بشدة بإتاحة أحدث خطوط الرموز التعبيرية. بخلاف ذلك، قد يتم عرض الرموز التعبيرية اللاحقة على شكل مربّع صغير يُعرف باسم 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 من Material Design) أو 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 }
                        )
                    }
                }
            }
        )
    }
}

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

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

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