בוחר אמוג'י

הכלי לבחירת אמוג'י הוא פתרון לממשק משתמש שמציע מראה ועיצוב מודרניים, סמלי אמוג'י עדכניים וקלות שימוש. המשתמשים יכולים לעיין בסמלי אמוג'י ובגרסאות שלהם ולבחור מביניהם, או לבחור מבין סמלי האמוג'י שבהם השתמשו לאחרונה.

איור 1. בוחר אמוג'י

בעזרת הספרייה הזו, אפליקציות ממגוון מקורות יכולות לספק למשתמשים חוויית שימוש מקיפה ומאוחדת באמוג'י, בלי שמפתחים יצטרכו ליצור ולתחזק בורר אמוג'י משלהם מאפס.

תכונות

לבורר האמוג'י יש את התכונות הבאות.

סמלי אמוג'י עדכניים

אמוג'י חדשים מתווספים לבורר האמוג'י באופן סלקטיבי. הספרייה של Emoji Picker תואמת למספר גרסאות ומכשירים של Android.

וריאציות דביקות

לוחצים לחיצה ארוכה על אמוג'י כדי להציג תפריט של וריאציות, כמו מגדר או גוון עור שונים. הווריאנט שבוחרים נשמר בבורר האמוג'י, והווריאנט האחרון שנבחר משמש בחלונית הראשית.

בעזרת התכונה הזו, המשתמשים יכולים לשלוח את וריאנטים המועדפים שלהם של אמוג'י בהקשה אחת.

גרסאות של אמוג'י
איור 2. וריאציות של אמוג'י.

סמלי אמוג'י מהזמן האחרון

אמוג'י מהזמן האחרון
איור 3. אמוג'י מהזמן האחרון.

ה-RecentEmojiProvider אחראי לספק אמוג'י בקטגוריה נעשה בו שימוש לאחרונה. בספרייה יש ספק אמוג'י ברירת מחדל עדכני שמתאים לתרחיש לדוגמה הנפוץ ביותר:

  • כל האמוג'י שנבחרו נשמרים בכל אפליקציה בנפרד בהעדפות המשותפות.
  • בבורר מוצגות עד שלוש שורות של אמוג'י שנבחרו, ללא כפילויות, בסדר כרונולוגי הפוך.

אם התנהגות ברירת המחדל הזו מספיקה, אין צורך להשתמש ב-setRecentEmojiProvider().

עם זאת, יכול להיות שתצטרכו להתאים אישית את אופן הפעולה של הספק. ריכזנו כאן כמה תרחישים נפוצים:

  • אתם רוצים לשמור אמוג'י נבחרים שונים לכל חשבון משתמש.
  • אתם רוצים להשתמש באחסון נתונים שאינו העדפות משותפות.
  • אתם רוצים להציג סמלי אמוג'י מהזמן האחרון, ממוינים לפי תדירות השימוש בהם.

לאחר מכן תוכלו להטמיע את הממשק RecentEmojiProvider ולהגדיר אותו באמצעות setRecentEmojiProvider().

בורר הכיוונים

החל מ-Emoji 15.1, בוחר האמוג'י תומך בסמלי אמוג'י דו-כיווניים. המשתמשים יכולים להקיש על המתג הדו-כיווני כדי לעבור בין הגרסאות של האמוג'י הפונות שמאלה וימינה.

אמוג'י דו-כיווני שמאלה

איור 4. אמוג'י דו-כיווני שמופנה שמאלה.

אמוג'י דו-כיווני שמאלה

איור 5. אמוג'י דו-כיווני שמופנה ימינה.

בורר אמוג'י לכמה אנשים

המשתמשים יכולים ללחוץ לחיצה ארוכה על אמוג'י של זוגות כדי להציג סמלי אמוג'י של כמה אנשים.

לחיצה ארוכה על אמוג'י של זוג

איור 6. כדי להציג סמלי אמוג'י של כמה אנשים, לוחצים לחיצה ארוכה על אמוג'י של זוג.

מקישים על סמל האמוג'י של אדם שמאל

איור 7. בוחרים אמוג'י של אדם בצד ימין.

מקישים על אמוג'י האדם הימני

איור 8. בוחרים אמוג'י של אדם בצד שמאל.

כשהמשתמש בוחר את האמוג'י של האדם שמשמאל או מימין בזוג האמוג'י, מוצגת תצוגה מקדימה של האמוג'י בסלקטור בפינה השמאלית התחתונה, כפי שמוצג בתמונות 7 ו-8. אחרי שבוחרים את שני החלקים של זוג האמוג'י, המשתמשים יכולים לבחור בתצוגה המקדימה כדי ליצור את זוג האמוג'י בהתאמה אישית.

תאימות ל-EmojiCompat

אם ההגדרה הזו מופעלת, המערכת משתמשת במכונה של EmojiCompat בבורר האמוג'י כדי להציג כמה שיותר אמוג'י. עם זאת, לא צריך להשתמש ב-EmojiCompat בבורר האמוג'י.

דרישות מוקדמות

האפליקציה שלכם צריכה לטרגט ל-Android 5.0 (רמת API‏ 21) ואילך.

שימוש בספרייה

  1. מייבאים את androidx.emoji2:emojipicker:$version לקובץ build.gradle של האפליקציה.

    dependencies {
        implementation "androidx.emoji2:emojipicker:$version"
    }
    
  2. מרחיבים את התצוגה של בורר האמוג'י, ואם רוצים מגדירים את emojiGridRows ו-emojiGridColumns.

    • ערך ברירת המחדל של emojiGridColumns הוא 9.
    • מספר השורות מחושב על סמך גובה התצוגה הראשית ועל סמך הערך של emojiGridColumns.
    • כדי לציין שהמשתמש יכול לגלול כדי להציג סמלי אמוג'י נוספים, צריך להשתמש בערך float עבור 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 מוצגים תרחישים לדוגמה לשימוש ב-Emoji Picker, לצד התרחישים הנוספים הבאים:

  • חישוב מחדש של הפריסה כשemojiGridRows או emojiGridColumns מתאפסים.
  • ספק אמוג'י שהוגדר מחדש לאחרונה, שממיין לפי תדירות.
  • התאמה אישית נוספת של הסגנון.