בוחר אמוג'י

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

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

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

תכונות

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

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

אמוג'י חדשים מתווספים לבורר האמוג'י באופן סלקטיבי. האמוג'י ספריית הבורר תואמת לכמה גרסאות 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, לצד התרחישים הנוספים הבאים:

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