Wyświetl emotikony

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

Jeśli aplikacja wyświetla treści internetowe lub umożliwia wpisywanie tekstu, zdecydowanie zalecamy obsługę najnowszych czcionek emotikonów. W przeciwnym razie później emotikony mogą być wyświetlane w postaci małego kwadratowego pola o nazwie tofu (☐) lub w innej nieprawidłowo renderowanej sekwencji emotikonów.

Na urządzeniach z Androidem w wersji 11 (poziom interfejsu API 30) i starszych nie można aktualizować czcionki emotikonów, dlatego aplikacje, które wyświetlają te emotikony w tych wersjach, należy aktualizować 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 w marcu 2023 r. (Interfejs tworzenia wiadomości 1.4) zapewnia obsługę najnowszej wersji emotikonów, w tym zgodność wsteczną 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, możesz od razu korzystać z nowoczesnych emotikonów.

Najlepszym sposobem na przetestowanie najnowszych emotikonów w aplikacji jest użycie rzeczywistego urządzenia z interfejsem API w wersji 30 lub starszej.

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

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

Interoperacyjność

Jeśli w Twojej aplikacji w tym samym Activity używasz zarówno widoku danych, jak i tworzenia wiadomości, upewnij się, że używasz odpowiednich interfejsów API do prawidłowej konfiguracji emotikonów. W sekcjach poniżej dowiesz się, kiedy używać poszczególnych interfejsów API.

Obowiązuje od ComponentActivity

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

Ponieważ nie rozszerzasz zakresu AppCompatActivity, dodaj bibliotekę emotikonów2 do zależności i używaj w widokach danych EmojiTextView zamiast widżetu TextView, jak pokazano w tym fragmencie:

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

Obowiązuje od AppCompatActivity

Jeśli Activity rozciąga się od AppCompatActivity, możesz użyć ComposeView do wywoływania funkcji kompozycyjnych. W komponentach tekstowych emotikony wyświetlają się poprawnie w różnych wersjach Androida.

Jeśli rozszerzasz format z AppCompatActivity, zwiększ wartość TextView z kodu XML, aby emotikony były renderowane prawidłowo.

Dzieje się tak, gdy zwiększasz zawartość pliku XML:

  • na zewnątrz ComposeView, w: Activity. Zwróć uwagę na użycie 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ą symbolu AndroidView w elemencie ComposeView, użyj funkcji AppCompatTextView do prawidłowego renderowania emotikonów:

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 emotikonu widzisz tofu (☐), najpierw sprawdź, czy problem dotyczy konkretnego urządzenia testowego. Oto kilka głównych rzeczy, które możesz sprawdzić: