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

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

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

الميزات

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الشكل 4: رمز تعبيري ثنائي الاتجاه موجَّه لليسار

الشكل 5: رمز تعبيري ثنائي الاتجاه موجَّه لليمين.

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

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

الشكل 6: انقر مع الاستمرار على رمزَي إيموجي لعرض خيارات رموًا تعبيرية لعدة أشخاص.

الشكل 7: اختَر رمزًا تعبيريًا لشخص على يمين الشاشة.

الشكل 8: اختَر رمزًا تعبيريًا للنصف الأيمن.

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

التوافق مع EmojiCompat

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

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

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