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

הסטנדרט של האמוג'י מתעדכן מדי שנה על ידי 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 March 2023 (Compose UI 1.4) כולל תמיכה בגרסה העדכנית של האימוג'י, כולל תאימות לאחור לגרסאות Android ישנות יותר עד API 21.

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

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

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

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

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

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

הארכה מסרטון מהערוץ ComponentActivity

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

פתרון בעיות

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