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

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

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