Wyświetl emotikony

Standardowy zestaw emotikonów jest odświeżany co roku przez Unicode, ponieważ użycie emotikonów szybko rośnie w przypadku wszystkich typów aplikacji.

Jeśli Twoja aplikacja wyświetla treści internetowe lub umożliwia wprowadzanie tekstu, zdecydowanie zalecamy obsługę najnowszych czcionek emoji. W przeciwnym razie nowsze emotikony mogą być wyświetlane jako mały kwadratowy blok zwany tofu (☐) lub inne nieprawidłowo renderowane sekwencje emotikonów.

W przypadku Androida w wersji 11 (poziom interfejsu API 30) i starszych nie można zaktualizować czcionki emoji, więc aplikacje, które wyświetlają emotikony w tych wersjach, muszą być aktualizowane ręcznie.

Oto przykłady nowoczesnych emoji.

Przykłady Wersja
🫩 🪉 🇨🇶 16.0 (wrzesień 2024 r.)
🐦‍🔥 🧑‍🧑‍🧒‍🧒 👩🏽‍🦽‍➡️ 🇲🇶 15.1 (wrzesień 2023 r.)
🩷 🫸🏼 🐦‍⬛ 15.0 (wrzesień 2022 r.)
🫠 🫱🏼‍🫲🏿 🫰🏽 14.0 (wrzesień 2021 r.)
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13.1 (wrzesień 2020 r.)
🥲 🥷🏿 🐻‍❄️ 13.0 (marzec 2020 r.)
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1 (październik 2019 r.)
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0 (luty 2019 r.)

BOM z marca 2023 r. (Compose UI 1.4) obsługuje najnowszą wersję emoji, w tym wsteczną zgodność ze starszymi wersjami Androida aż do API 21.

Ta obsługa nie wymaga wprowadzania zmian w aplikacji – jeśli używasz Text i TextField (Material 2 lub Material 3) albo BasicText i BasicTextField, obsługa nowoczesnych emoji jest dostępna od razu.

Najlepszym sposobem na przetestowanie najnowszych emotikonów w aplikacji jest użycie prawdziwego urządzenia z interfejsem API na poziomie 30 lub niższym.

Jeśli używasz niestandardowego rozwiązania do obsługi emotikonów lub z innego powodu musisz wyłączyć domyślną rozdzielczość emotikonów w oknie tworzenia wiadomości, możesz użyć tego kodu:PlatformTextStyle(emojiSupportMatch)

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

Interoperacyjność

Jeśli Twoja aplikacja korzysta zarówno z widoków, jak i z biblioteki Compose w tym samym Activity, upewnij się, że używasz odpowiednich interfejsów API do prawidłowego konfigurowania emotikonów. W kolejnych sekcjach opisujemy, kiedy należy używać poszczególnych interfejsów API.

Rozszerzanie od ComponentActivity

Jeśli Activity rozciąga się od Compose ComponentActivity zamiast AppCompatActivity, postępuj zgodnie z instrukcjami w sekcji Obsługa emoji bez AppCompat.

Ponieważ nie rozszerzasz klasy AppCompatActivity, dodaj do zależności bibliotekę Emoji2 i używaj w widokach elementu EmojiTextView zamiast widżetu TextView, jak pokazano w tym fragmencie kodu:

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

Następnie w pliku XML:

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

Rozszerzanie od AppCompatActivity

Jeśli Twój Activity rozciąga się od AppCompatActivity, możesz użyć ComposeView, aby wywołać funkcje kompozycyjne. Emotikony są prawidłowo renderowane we wszystkich wersjach Androida, gdy używasz komponentów kompozycyjnych Text.

Jeśli rozszerzasz AppCompatActivity, rozwiń TextView z XML, aby emotikony były prawidłowo renderowane.

Dotyczy to sytuacji, gdy zwiększasz rozmiar pliku XML:

  • poza ComposeView, w Activity. Zwróć uwagę na użycie znaków AppCompatActivity i TextView w tym fragmencie kodu:

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

Aby rozwinąć tekst z emotikonem AndroidView w atrybucie ComposeView, użyj atrybutu AppCompatTextView, aby poprawnie renderować emotikony:

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

Szczegółowe informacje znajdziesz w dokumentacji interfejsów API do współdziałania.

Rozwiązywanie problemów

Jeśli zamiast emotikonu widzisz tofu (☐), najpierw sprawdź, czy problem występuje na konkretnym urządzeniu testowym. Oto kilka głównych rzeczy, które możesz sprawdzić: