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

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

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

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

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

דוגמאות גרסה
🫩 🪉 🇨🇶 16.0 (ספטמבר 2024)
🐦‍🔥 🧑‍🧑‍🧒‍🧒 👩🏽‍🦽‍➡️ 🇲🇶 15.1 (ספטמבר 2023)
🩷 🫸🏼 🐦‍⬛ 15.0 (ספטמבר 2022)
🫠 🫱🏼‍🫲🏿 🫰🏽 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
        )/* ... */
    )
)
EmojiSnippets.kt

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

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

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

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

הרחבה מ-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
            }
        }
    }
}
EmojiSnippets.kt

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
                        }
                    }
                }
            }
        )
    }
}
EmojiSnippets.kt

כדי להרחיב טקסט עם 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 }
                        )
                    }
                }
            }
        )
    }
}
EmojiSnippets.kt

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

פתרון בעיות

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