أداة اختيار الرموز التعبيرية

"أداة اختيار رموز الإيموجي" هي حلّ لواجهة المستخدم يوفّر مظهرًا حديثًا ورموز إيموجي محدّثة وسهولة في الاستخدام. يمكن للمستخدمين تصفُّح واختيار رموز الإيموجي وأشكالها المختلفة أو الاختيار من بين رموز الإيموجي التي تم استخدامها مؤخرًا.

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

الميزات

تتضمّن أداة اختيار رموز الإيموجي الميزات التالية:

رموز إيموجي حديثة

يتم تضمين رموز الإيموجي التي تم إصدارها حديثًا بشكل انتقائي في "أداة اختيار رموز الإيموجي". تتوافق مكتبة "أداة اختيار رموز الإيموجي" مع إصدارات وأجهزة Android المتعددة.

خيارات المنتج الثابتة

اضغط مع الاستمرار على رمز إيموجي لعرض قائمة بالخيارات، مثل الأجناس أو درجات لون البشرة المختلفة. يتم حفظ الخيار الذي تحدّده في "أداة اختيار رموز الإيموجي"، ويتم استخدام آخر خيار تم تحديده في اللوحة الرئيسية.

باستخدام هذه الميزة، يمكن للمستخدمين إرسال خيارات الإيموجي المفضّلة لديهم بنقرة واحدة.

الإيموجي المُستخدَم مؤخرًا

يكون RecentEmojiProvider مسؤولاً عن توفير رموز الإيموجي في فئة المستخدَمة مؤخرًا. تحتوي المكتبة على موفّر تلقائي لرموز الإيموجي المستخدَمة مؤخرًا يستوفي حالة الاستخدام الأكثر شيوعًا:

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

إذا كان هذا الإعداد التلقائي كافيًا، لن تحتاج إلى استخدام setRecentEmojiProvider().

ومع ذلك، قد تحتاج إلى تخصيص سلوك الموفِّر. وفي ما يلي بعض السيناريوهات الشائعة:

• إذا أردت تخزين إيموجي مختلف لكل حساب مستخدم.
• إذا أردت استخدام مساحة تخزين بيانات غير الإعدادات المفضّلة المشتركة
• تريد عرض رموز الإيموجي الأخيرة مرتّبة حسب معدّل تكرار استخدامها.

يمكنك بعد ذلك تنفيذ واجهة RecentEmojiProvider وضبطها باستخدام setRecentEmojiProvider().

أداة اختيار الاتجاه

بدءًا من الإصدار Emoji 15.1، تتيح أداة اختيار رموز الإيموجي استخدام رموز الإيموجي الثنائية الاتجاه. يمكن للمستخدمين النقر على زر التبديل بين الاتجاهين للتبديل بين إصدارات الإيموجي التي تتجه لليسار واليمين.

الشكل 4. إيموجي ثنائي الاتجاه يتجه إلى اليسار

الشكل 5: إيموجي ثنائي الاتجاه يتجه نحو اليمين

أداة اختيار الإيموجي المتعدد الأشخاص

يمكن للمستخدمين النقر مع الاستمرار على رموز الإيموجي التي تمثّل ثنائيات للكشف عن خيارات رموز الإيموجي التي تمثّل عدة أشخاص.

الشكل 6: انقر مع الاستمرار على إيموجي ثنائي للكشف عن خيارات الإيموجي المتعددة الأشخاص.

الشكل 7: اختَر إيموجي يمثّل النصف الأيسر من الشخص.

الشكل 8: اختَر إيموجي يمثّل النصف الأيمن من الشخص.

عندما يختار المستخدم النصف الأيسر أو الأيمن من إيموجي شخص في إيموجي ثنائي، يعرض أداة الاختيار معاينة في أسفل يسار الشاشة، كما هو موضّح في الشكلَين 7 و8. بعد اختيار نصفَي الإيموجي، يمكن للمستخدمين النقر على المعاينة لإنشاء الإيموجي المخصّص.

التوافق مع EmojiCompat

في حال تفعيل هذه السياسة، يتم استخدام مثيل EmojiCompat في "أداة اختيار رموز الإيموجي" لعرض أكبر عدد ممكن من رموز الإيموجي. ومع ذلك، لا تتطلّب أداة اختيار رموز الإيموجي استخدام EmojiCompat.

المتطلبات الأساسية

يجب أن يستهدف تطبيقك الإصدار 5.0 من نظام التشغيل Android (المستوى 21 من واجهة برمجة التطبيقات) أو الإصدارات الأحدث.

استخدام المكتبة

1. استورِد androidx.emoji2:emojipicker:$version في ملف build.gradle الخاص بتطبيقك.

   dependencies {
       implementation "androidx.emoji2:emojipicker:$version"
   }
   

2. يمكنك توسيع عرض "أداة اختيار رموز الإيموجي"، وضبط emojiGridRows وemojiGridColumns اختياريًا.

   • العدد التلقائي لـ emojiGridColumns هو 9.
   • يتم احتساب عدد الصفوف استنادًا إلى ارتفاع العرض المخصَّص للوالدَين وقيمة emojiGridColumns.
   • استخدِم قيمة عائمة للسمة emojiGridRows للإشارة إلى أنّه يمكن للمستخدم التمرير للاطّلاع على المزيد من الرموز التعبيرية.

   <androidx.emoji2.emojipicker.EmojiPickerView
       android:id="@+id/emoji_picker"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:emojiGridColumns="9" />
   

   val emojiPickerView = EmojiPickerView(context).apply {
       emojiGridColumns = 15
       layoutParams = ViewGroup.LayoutParams(
           ViewGroup.LayoutParams.MATCH_PARENT,
           ViewGroup.LayoutParams.MATCH_PARENT
       )
   }
   
   findViewById<ViewGroup>(R.id.emoji_picker_layout).addView(emojiPickerView)
   

3. استخدِم setOnEmojiPickedListener() لإلحاق الإيموجي المحدّد بطريقة عرض. على سبيل المثال، لإضافة قيمة إلى EditText، اتّبِع الخطوات التالية:

   emojiPickerView.setOnEmojiPickedListener {
       findViewById<EditText>(R.id.edit_text).append(it.emoji)
   }
   

4. يمكنك ضبط RecentEmojiProvider اختياريًا، والاطّلاع على نموذج التطبيق لمعرفة مثال على عملية التنفيذ.

5. يمكنك تخصيص الأنماط إذا أردت. أنشئ نمطك الخاص لتجاوز سمات المظهر الشائعة وطبِّق النمط على EmojiPickerView. على سبيل المثال، يؤدي إلغاء colorControlNormal إلى تغيير لون رمز الفئة.

   <style name="CustomStyle" >
       <item name="colorControlNormal">#FFC0CB</item>
   </style>
   <androidx.emoji2.emojipicker.EmojiPickerView
       android:id="@+id/emoji_picker"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:theme="@style/CustomStyle"
       app:emojiGridColumns="9" />
   

نموذج التطبيق

يوضّح نموذج تطبيق "أداة اختيار رموز الإيموجي" حالات الاستخدام الأساسية بالإضافة إلى السيناريوهات الإضافية التالية:

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