Wyświetl emotikony

Standardowy zestaw emotikonów jest odświeżany corocznie przez Unicode, ponieważ ich użycie w różnych aplikacjach szybko rośnie.

Jeśli Twoja aplikacja wyświetla treści internetowe lub umożliwia wprowadzanie tekstu, zdecydowanie zalecamy obsługę najnowszych czcionek emoji. W przeciwnym razie późniejsze emotikony mogą być wyświetlane jako małe kwadratowe pole o nazwie tofu (☐) lub inne nieprawidłowo renderowane sekwencje emotikonów.

Aplikacje na Androidzie w wersji 11 (poziom interfejsu API 30) i starszych nie mogą aktualizować czcionki emotikonów, więc aplikacje, które wyświetlają je w tych wersjach, muszą zostać zaktualizowane ręcznie.

Poniżej znajdziesz przykłady nowoczesnych emotikonów.

Przykłady Wersja
🫠 🫱🏼‍🫲🏿 🫰🏽 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. (interfejs tworzenia wiadomości 1.4) obsługuje najnowszą wersję emotikonów, w tym wsteczną kompatybilność ze starszymi wersjami Androida aż do interfejsu 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, masz domyślnie włączoną obsługę współczesnych emotikonów.

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 emotikonów lub musisz wyłączyć domyślną rozdzielczość emotikonów w edytorze z jakiegokolwiek innego powodu, możesz użyć PlatformTextStyle(emojiSupportMatch):

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

Interoperacyjność

Jeśli Twoja aplikacja używa zarówno widoków, jak i okna tworzenia w tym samym Activity, upewnij się, że używasz odpowiednich interfejsów API, aby prawidłowo skonfigurować emotikony. W następnych sekcjach opisano, kiedy należy używać poszczególnych interfejsów API.

Przedłużenie z ComponentActivity

Jeśli Activity rozszerza się z okna tworzenia wiadomości ComponentActivity, a nie z AppCompatActivity, postępuj zgodnie z instrukcjami dotyczącymi obsługi emotikonów bez AppCompat.

Ponieważ nie rozszerzasz klasy AppCompatActivity, dodaj do zależności bibliotekę Emoji2 i użyj 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

Przedłużenie z AppCompatActivity

Jeśli Twoja funkcja Activity rozszerza funkcję AppCompatActivity, możesz wywoływać funkcje składane za pomocą funkcji ComposeView. Gdy używasz komponentów tekstowych, emotikony są prawidłowo renderowane we wszystkich wersjach Androida.

Jeśli rozszerzasz plik AppCompatActivity, użyj do jego załadowania elementu TextView z pliku XML, aby emotikony były renderowane prawidłowo.

To dotyczy sytuacji, gdy napełniasz plik XML:

  • spoza ComposeView, w Activity. Zwróć uwagę na użycie funkcji 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 wczytać tekst z AndroidView w elementach 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 interoperacyjności.

Rozwiązywanie problemów

Jeśli zamiast emotikonu widzisz tofu (☐), najpierw sprawdź, czy problem dotyczy konkretnego urządzenia testowego. Oto kilka rzeczy, które możesz sprawdzić: