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

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

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

الميزات

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

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

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

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

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

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

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

يكون 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" />
   

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

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

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