הצגת סמלי אמוג'י

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

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

בגרסאות Android 11 (רמת API 30) וגרסאות ישנות יותר אי אפשר לעדכן את גופן הסמלי הרגשי, ולכן צריך לעדכן באופן ידני את האפליקציות שמוצגים בהן סמלי הרגשי בגרסאות האלה.

בהמשך מפורטות דוגמאות לאמוג'י מודרניים.

דוגמאות גרסה
🫠 🫱🏼‍🫲🏿 🫰🏽 14.0 (ספטמבר 2021)
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13.1 (ספטמבר 2020)
🥲 🥷🏿 🐻‍❄️ 13.0 (מרץ 2020)
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1 (אוקטובר 2019)
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0 (פברואר 2019)

BOM מרץ 2023 (Compose UI 1.4) כולל תמיכה בגרסת האמוג'י העדכנית, כולל תאימות לאחור לגרסאות Android ישנות יותר עד API 21.

התמיכה הזו לא דורשת שינויים באפליקציה – אם אתם משתמשים ב-Text וב-TextField (Material 2 או Material 3) או ב-BasicText וב-BasicTextField, אתם מקבלים תמיכה בסמלי אמוג'י מודרניים כבר מההתחלה.

הדרך הטובה ביותר לבדוק את סמלי ה-emoji העדכניים ביותר באפליקציה היא להשתמש במכשיר אמיתי עם API 30 ואילך.

אם אתם משתמשים בפתרון מותאם אישית של אמוג'י, או אם אתם צריכים להשבית את רזולוציית ברירת המחדל של האמוג'י בחלונית הכתיבה מסיבה אחרת, תוכלו להשתמש ב-PlatformTextStyle(emojiSupportMatch):

Text(
    text = "Hello $EMOJI_TEXT",
    style = TextStyle(
        platformStyle = PlatformTextStyle(
            emojiSupportMatch = EmojiSupportMatch.None
        )/* ... */
    )
)

יכולת פעולה הדדית

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

מורחבים מ-ComponentActivity

אם Activity מופיע במקום ComponentActivity במקום AppCompatActivity, צריך לפעול לפי ההוראות במאמר תמיכה בסמלי אמוג'י ללא AppCompat.

מכיוון שאתם לא מרחיבים את AppCompatActivity, מוסיפים את ספריית Emoji2 ליחסי התלות ומשתמשים ב-EmojiTextView בתצוגות במקום בווידג'ט TextView, כפי שמוצג בקטע הקוד הבא:

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val emojiTextView: EmojiTextView = findViewById(R.id.emoji_text_view)
        emojiTextView.text = getString(R.string.emoji_text_view, EMOJI_TEXT)

        val composeView: ComposeView = findViewById(R.id.compose_view)

        composeView.apply {
            setContent {
                // compose code
            }
        }
    }
}

לאחר מכן, בקובץ ה-XML:

<androidx.emoji2.widget.EmojiTextView
    android:id="@+id/emoji_text_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />

מורחבים מ-AppCompatActivity

אם Activity הוא תת-ממשק של AppCompatActivity, אפשר להשתמש ב-ComposeView כדי לקרוא לפונקציות שניתנות ליצירה. כשמשתמשים ברכיבי טקסט מותאמים אישית, סמלי האמוג'י מוצגים בצורה תקינה בכל הגרסאות של Android.

אם אתם מרחיבים מ-AppCompatActivity, צריך לנפח את TextView מ-XML כדי שהאמוג'י יוצגו בצורה נכונה.

ההנחיה הזו רלוונטית אם אתם מרחיבים את ה-XML:

  • מחוץ ל-ComposeView, ב-Activity. שימו לב לשימוש ב-AppCompatActivity וב-TextView בקטע הקוד הבא:

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val emojiTextView: TextView = findViewById(R.id.emoji_text_view)
        emojiTextView.text = getString(R.string.emoji_text_view, EMOJI_TEXT)

        val composeView: ComposeView = findViewById(R.id.compose_view)

        composeView.apply {
            setContent {
                // compose code
            }
        }
    }
}

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(
            ComposeView(this).apply {
                setContent {
                    Column {
                        Text(EMOJI_TEXT)

                        AndroidViewBinding(ExampleViewBinding::inflate) {
                            emojiTextView.text = EMOJI_TEXT
                        }
                    }
                }
            }
        )
    }
}

כדי להרחיב טקסט עם AndroidView בתוך ComposeView, משתמשים ב-AppCompatTextView כדי להציג את האמוג'י בצורה תקינה:

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(
            ComposeView(this).apply {
                setContent {
                    Column {
                        Text(EMOJI_TEXT)

                        AndroidView(
                            factory = { context -> AppCompatTextView(context) },
                            update = { it.text = EMOJI_TEXT }
                        )
                    }
                }
            }
        )
    }
}

פרטים נוספים זמינים במסמכי העזרה של ממשקי ה-API לשילוב עם מערכות אחרות.

פתרון בעיות

אם מופיע טופו (☐) במקום האמוג'י, קודם צריך לבדוק אם הבעיה נובעת ממכשיר הבדיקה הספציפי. יש כמה דברים עיקריים שאפשר לבדוק: