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

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

الشكل 1. أداة اختيار رموز الإيموجي

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

الميزات

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

رموز تعبيرية محدّثة

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

الأسعار الثابتة

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

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

الشكل 2. صِيغ رموز الإيموجي

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

الشكل 3. رموز الإيموجي المستخدَمة مؤخرًا

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

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

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

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

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

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

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

اعتبارًا من الرموز التعبيرية 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
• مقدّم رموز تعبيرية حديثة تم إلغاؤه ويتم ترتيبه حسب معدّل التكرار
• تخصيص إضافي للنمط