絵文字を表示

標準の絵文字セットは毎年更新され、 Unicode(絵文字の使用が増えているため) 迅速に構築できます。

アプリがインターネット コンテンツを表示する場合やテキスト入力を提供する場合は、 最新の絵文字フォントをサポートすることをおすすめします後で絵文字を入力すると、 小さな四角いボックス(豆腐(🛍?)など)として表示されているか、その他正しくレンダリングされていない 使用できます。

Android バージョン 11(API レベル 30)以前では絵文字フォントを更新できないため、 これらのバージョンでこれらのバージョンを表示するアプリは、手動で更新する必要があります。

以下に、最新の絵文字の例を示します。

バージョン
🫠 🫱🏼‍🫲🏿 🫰🏽 14.0(2021 年 9 月)
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13.1(2020 年 9 月)
🥲 🥷🏿 🐻‍❄️ 13.0(2020 年 3 月)
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1(2019 年 10 月)
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0(2019 年 2 月)

2023 年 3 月の BOMCompose UI 1.4)で最新の絵文字をサポート (Android の古いバージョンとの下位互換性を含む) API 21 までです

このサポートのためにアプリに変更を加える必要はありませんText を使用している場合と、 TextField(マテリアル 2 またはマテリアル 3)または BasicText BasicTextField では、最新の絵文字サポートがすぐに使えます。

アプリで最新の絵文字をテストする最善の方法は、 実装する必要があります。

カスタム絵文字ソリューションを使用している場合、またはデフォルトの絵文字を無効にする必要がある場合 その他の理由で Compose で解決する必要がある場合は、 PlatformTextStyle(emojiSupportMatch):

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

相互運用性

アプリで同じ Activity 内でビューと Compose の両方を使用する場合は、 適切な API を使用して絵文字を正しく構成している。次の では、各 API の用途について説明します。

ComponentActivity から拡張しています

Activity が Compose の ComponentActivity から拡張される場合、 AppCompatActivityAppCompat なしで絵文字をサポートするの手順を行います。 できます。

絵文字はAppCompatActivity拡張していないため、絵文字 2 ライブラリを依存関係に追加し、ビューで 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 から拡張しています

ActivityAppCompatActivity から拡張される場合は、次を使用できます。 ComposeView: コンポーズ可能な関数を呼び出します。絵文字は以下のデバイスで正しくレンダリングされます。 テキスト コンポーザブルを使用する場合の Android バージョン。

AppCompatActivity から拡張する場合は、XML から TextView をインフレートします。 絵文字が正しくレンダリングされます。

これは、XML をインフレートする場合に該当します。

  • ComposeView 外の Activity 内。「kubectl get pod my-test-app」 次のスニペットの AppCompatActivityTextView:

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
                        }
                    }
                }
            }
        )
    }
}

ComposeView 内で AndroidView を使用してテキストをインフレートするには、次のコマンドを使用します。 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 のドキュメントをご覧ください。

トラブルシューティング

絵文字ではなく豆腐(🛍?)が表示された場合は、まず問題があるかどうかを確認します。 テストデバイスを選択します主な確認事項は次のとおりです。