Wyświetl emotikony

Standardowy zestaw emotikonów jest co roku odświeżany przez Unicode, ponieważ coraz więcej emotikonów jest używanych we wszystkich typach aplikacji.

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

Android w wersji 11 (poziom interfejsu API 30) i starszych nie może zaktualizować czcionki emotikonów, dlatego aplikacje, które wyświetlają je w tych wersjach, należy zaktualizować ręcznie.

Oto 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 marca 2023 r. (Compose UI w wersji 1.4) zapewnia obsługę najnowszej wersji emotikonów, w tym zgodność wsteczną ze starszymi wersjami Androida aż do interfejsu API 21.

Obsługa tej funkcji nie wymaga wprowadzania zmian w aplikacji – jeśli używasz Text i TextField (materiał 2 lub Material 3) albo BasicText i BasicTextField, możesz od razu zacząć korzystać z nowoczesnej obsługi emotikonów.

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

Jeśli korzystasz z niestandardowych emotikonów lub z jakiegokolwiek innego powodu chcesz wyłączyć domyślną rozdzielczość emotikonów, możesz użyć PlatformTextStyle(emojiSupportMatch):

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

Współdziałanie

Jeśli Twoja aplikacja używa zarówno widoków, jak i tworzenia w ramach tego samego elementu Activity, upewnij się, że używasz odpowiednich interfejsów API do prawidłowej konfiguracji emotikonów. W sekcjach poniżej opisujemy, kiedy należy używać poszczególnych interfejsów API.

Rozszerzone od ComponentActivity

Jeśli Activity wykracza poza zakres funkcji Utwórz ComponentActivity, a nie AppCompatActivity, postępuj zgodnie z instrukcjami dotyczącymi emotikonu pomocy bez AppCompat.

Nie rozszerzasz AppCompatActivity, więc dodaj bibliotekę Emoji2 do zależności i użyj EmojiTextView w widokach zamiast widżetu TextView, jak pokazano poniżej:

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

Rozszerzone od AppCompatActivity

Jeśli Activity wykracza poza AppCompatActivity, możesz użyć ComposeView do wywoływania funkcji kompozycyjnych. Gdy używasz funkcji Tekst kompozycyjny, emotikony są renderowane prawidłowo w różnych wersjach Androida.

Jeśli rozszerzasz zakres z AppCompatActivity, dodaj emotikon do pliku TextView z pliku XML, aby emotikony renderowały się prawidłowo.

Dotyczy to sytuacji, w której zawyżasz plik XML:

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

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 powiększyć tekst za pomocą filtra AndroidView w polu ComposeView, użyj AppCompatTextView, aby prawidłowo 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 współdziałania.

Rozwiązywanie problemów

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