ソーシャルアプリとメッセージアプリのテキスト

テキストはソーシャルアプリケーションの中心です。ユーザーはテキストを使って考えを共有し、感情を表現し、ストーリーを語ります。このドキュメントでは、絵文字、スタイル設定、リッチコンテンツの統合に焦点を当てて、テキストを効果的に操作する方法について説明します。

絵文字の操作

絵文字は、特にソーシャルアプリやメッセージアプリにおいて、現代のコミュニケーションに欠かせないものになっています。言語の壁を超えて、ユーザーが感情やアイデアを迅速かつ効果的に表現できるようにします。

Compose での絵文字のサポート

Android の最新の宣言型 UI ツールキットである Jetpack Compose を使用すると、絵文字の処理を簡素化できます。

入力: TextField コンポーネントは、絵文字入力をネイティブにサポートしています。
ディスプレイ: Compose の Text コンポーネントは絵文字を正しくレンダリングします。あらゆるデバイスとプラットフォームで絵文字 2 互換のダウンロード可能なフォントのプロバイダ（ Google Play 開発者サービス。

絵文字を表示するでは、Jetpack Compose で絵文字を表示する方法について説明します。アプリで最新の絵文字フォントが確実に表示されるようにする方法、アプリで同じアクティビティでビューと Compose の両方を使用する場合に絵文字が正しく機能するようにする方法、絵文字が想定どおりに表示されない場合にトラブルシューティングを行う方法などについて説明します。

ビューでの絵文字のサポート

Android ビューを使用している場合は、AppCompat ライブラリ 1.4 以降を使用すると、 TextView のプラットフォームサブクラスの絵文字サポート:

入力: AppCompat バージョンの EditText は絵文字をネイティブにサポートしています表示されます。
表示: TextView、ToggleButton、Switch、Button、CheckedTextView、RadioButton、CheckBox、AutoCompleteTextView、MultiAutoCompleteTextView の AppCompat バージョンはすべて絵文字の表示をサポートしています。これにより、Google Play 開発者サービスを搭載したデバイスなど、emoji2 対応のダウンロード可能なフォントプロバイダを提供するデバイスとプラットフォームで、絵文字の外観が統一されます。

TextView の直接または間接のサブクラスであるカスタムビューを作成する場合は、（プラットフォーム実装ではなく）AppCompat 実装を拡張して、組み込みの絵文字サポートを取得します。最新の絵文字をサポートするでは、絵文字の統合のテストとトラブルシューティング、AppCompat なしで絵文字をサポートする方法、カスタムビューで絵文字をサポートする方法、代替フォントまたはフォントプロバイダをサポートする方法などについて説明します。

絵文字選択ツールの使用

Jetpack 絵文字選択ツールは Android ビューで、絵文字の分類リスト、固定されたバリエーション、最近使用された絵文字のサポート絵文字 - 複数の Android バージョンやデバイス間で互換性があります。簡単なアプリの絵文字統合をレベルアップできます。

まず、build.gradle のライブラリをインポートします。

dependencies {
   implementation("androidx.emoji2:emojipicker:$version")
}

Compose で絵文字選択ツールを使用する

Compose で絵文字選択ツールを作成するには、AndroidView コンポーザブルを使用します。このスニペットには、絵文字が選択されたときに通知するリスナーが含まれています。

AndroidView(
    modifier = Modifier.fillMaxSize(),
    factory = { context ->
        val emojiPickerView = EmojiPickerView(context)
        emojiPickerView.setOnEmojiPickedListener(this::updateTextField)
        emojiPickerView
    },
)

Compose 1.7 では、BasicTextField に多くの新機能が追加されています。これには、ViewModel に配置できる TextFieldState のサポートが含まれます。

private val emojiTextFieldState = TextFieldState()

@Composable fun EmojiTextField() {
    BasicTextField(
        state = emojiTextFieldState,
    )
}

TextFieldState を使用すると、カーソル位置にテキストを挿入するか、 IME を入力した場合と同様に、選択したテキストを置き換えます。

private fun insertStringAsIfTyping(textFieldState: TextFieldState, string: String) {
    textFieldState.edit {
        replace(selection.start, selection.end, string)
        // clear selection on replace if necessary
        if (hasSelection) selection = TextRange(selection.end)
    }
}

コールバックは、ヘルパー関数を使用して BasicTextField を更新できます。

private fun updateTextField(emojiViewItem: EmojiViewItem) {
    insertStringAsIfTyping(emojiTextFieldState, emojiViewItem.emoji)
}

ビューで絵文字選択ツールを使用する

絵文字選択ツールはビューにも適しています。

EmojiPickerView をインフレートする。必要に応じて、emojiGridColumns と各絵文字セルの望ましいサイズに基づく絵文字グリッド行。

<androidx.emoji2.emojipicker.EmojiPickerView
    …
    app:emojiGridColumns="9" />

カーソルの位置に文字を挿入するか、選択したテキストを置き換えます。

// Consider unregistering/reregistering anyTextWatcher that you might have as part of this
private fun insertStringAsIfTyping(editText: EditText, string: String) {
    val stringBuffer = StringBuffer(editText.text.toString())
    val index = editText.selectionStart
    if ( !editText.hasSelection() ) {
        stringBuffer.insert(index, string)
    } else {
        stringBuffer.replace(index, editText.selectionEnd, string)
    }
    editText.setText(stringBuffer.toString())
    editText.setSelection(index + string.length)
}

選択した絵文字にリスナーを提供し、それを使用して EditText。

// a listener example
emojiPickerView.setOnEmojiPickedListener {
   val editText = findViewById<EditText>(R.id.edit_text)
   insertStringAsIfTyping(editText, it.emoji)
}

テキストのスタイルを設定する

テキストは、フォントのスタイル、サイズ、太さ、色を使い、読みやすさ、階層構造、全体的な見た目をソーシャルアプリやメッセージアプリのユーザーインターフェースをアピールします。テキストスタイルのヘルプユーザーは情報を素早く解析し、さまざまな種類の重要な情報を確認できます

Compose でテキストのスタイルを設定する

Text コンポーザブルには、次のような豊富なスタイル設定オプションが用意されています。

テキストの色: Color を設定すると、テキストが目立つようになります。
フォントサイズ: FontSize を操作して適切なスケールを設定します。
フォントスタイル: テキストを斜体にするには FontStyle を使用します。
フォントの太さ: 太字、薄い文字などのテキストのバリエーションは FontWeight で調整します。
フォントファミリー: FontFamily を使用して、適切なフォントを選択します。

Text(
    text = "Hello 👋",
    color = Color.Blue
    fontSize = 18.sp,
    fontWeight = FontWeight.Bold,
    fontFamily = FontFamily.SansSerif
)

これらのスタイル設定オプションは、テーマを使用してアプリ全体で一貫して設定できます。

MaterialTheme(
    // This theme would include Color.Blue (as appropriate for dark and light themes)
    colorScheme = colorScheme,
    content = content,
    typography = Typography(
        titleLarge = TextStyle(
            fontSize = 18.sp,
            fontFamily = titleFont,
            fontWeight = FontWeight.Bold
        ),
    ),
)

テキストに複数のスタイルを追加する

AnnotatedString を使用して、同じ Text コンポーザブル内に異なるスタイルを設定できます。

AnnotatedString にはタイプセーフなビルダーがあります。 buildAnnotatedString。作成しやすくしました。

@Composable
fun MultipleStylesInText() {
    Text(
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("M")
            }
            append("y ")

            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                append("S")
            }
            append("tyle")
        }
    )
}

Compose のテキストスタイル設定について詳しくは、テキストのスタイルを設定するをご覧ください。シャドウの追加、ブラシを使用した高度なスタイル設定など、いくつかの機能が用意されています。 opacity。

ビュー内のテキストのスタイルを設定する

ビューでは、スタイルとテーマを使用してタイポグラフィの一貫性を保ちます。アプリ内のビューにカスタムテーマを適用する方法については、スタイルとテーマをご覧ください。1 つのテキストビュー内で異なるスタイルを設定する場合は、スパンをご覧ください。色の追加、テキストのクリック可能化、テキストサイズの拡大縮小、テキストのカスタマイズされた描画など、さまざまな方法でテキストを変更する方法について説明しています。

イメージキーボードやその他のリッチコンテンツをサポートする

多くのユーザーは、ステッカーやアニメーションなど、さまざまなリッチコンテンツを使用してコミュニケーションができることを望んでいます。Android 12（API レベル 31）には、アプリがリッチコンテンツをより簡単に受信できるよう、任意のソース（クリップボード、キーボード、ドラッグ＆ドロップ）からコンテンツを受け取れる Unified API が導入されました。以前の Android バージョン（現在は API レベル 14 まで）との下位互換性を維持するには、この API の Android Jetpack（AndroidX）バージョンを使用することをおすすめします。

OnReceiveContentListener を UI コンポーネントに接続すると、任意のメカニズムを通じてコンテンツが挿入されたときにコールバックを取得できます。コードでは、このコールバック 1 か所で、プレーンテキストや書式付きテキストからマークアップ、画像、動画、音声ファイルまで、あらゆるコンテンツの受信を処理できるようになります。

アプリでサポートを実装する方法については、リッチコンテンツを受信するをご覧ください。Jetpack Compose に dragAndDropSource 修飾子と dragAndDropTarget 修飾子が追加され、アプリ内や他のアプリ間でのドラッグ＆ドロップの実装が簡素化されました。

ソーシャル アプリとメッセージ アプリのテキスト コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。