このページは Cloud Translation API によって翻訳されました。

絵文字選択ツール

絵文字選択ツールは、最新の外観、最新の絵文字、使いやすさを提供する UI ソリューションです。ユーザーは絵文字とそのバリエーションをブラウジングして選択したり、最近使用した絵文字から選択したりできます。

図 1. 絵文字選択ツール

このライブラリを使用すると、さまざまなソースのアプリで、デベロッパーが独自の絵文字選択ツールをゼロから構築して維持することなく、包括的で統一された絵文字エクスペリエンスをユーザーに提供できます。

機能

絵文字選択ツールには次の機能があります。

固定パターン

絵文字を長押しすると、性別や肌の色などのバリエーションのメニューが表示されます。選択したバリエーションは絵文字選択ツールに保存され、最後に選択したバリエーションがメインパネルで使用されます。

この機能により、ユーザーは好みの絵文字のバリエーションをワンタップで送信できます。

最近使用した絵文字

RecentEmojiProvider は [最近使用した絵文字] カテゴリに絵文字を提供します。このライブラリには、最も一般的なユースケースに対応する、デフォルトの最近の絵文字プロバイダがあります。

選択したすべての絵文字がアプリごとに共有設定に保存されます。
選択した絵文字が最大 3 行で、重複が排除された形で、新しい順に表示されます。

このデフォルトの動作で十分な場合は、setRecentEmojiProvider() を使用する必要はありません。

ただし、場合によってはプロバイダの動作をカスタマイズする必要があります。一般的なシナリオを次に示します。

ユーザーアカウントごとに異なる選択した絵文字を保存したい場合。
共有設定以外のデータストレージを使用する場合。
最近使用した絵文字を頻度順に表示したい。

次に、RecentEmojiProvider インターフェースを実装し、setRecentEmojiProvider() を使用して設定します。

方向セレクタ

Emoji 15.1 以降、絵文字選択ツールは双方向絵文字をサポートしています。ユーザーは双方向切り替えボタンをタップして、絵文字の向きを左向きと右向きの間で切り替えることができます。

図 4. 左向きの双方向絵文字。

図 5. 右を向いた双方向絵文字。

複数の絵文字を選択するセレクタ

絵文字のペアを長押しすると、複数の絵文字を選択できます。

図 6. 絵文字のペアを長押しすると、複数の絵文字の選択が表示されます。

図 7. 左半分の絵文字の人物を選択します。

図 8. 右半分の絵文字の人物を選択します。

ユーザーが絵文字のカップルの左側または右側の絵文字の人物を選択すると、図 7 と図 8 に示すように、セレクタの右下にプレビューが表示されます。絵文字カップルの両方を選択したら、プレビューを選択してカスタム絵文字カップルを作成できます。

`EmojiCompat` との互換性

有効にすると、絵文字選択ツールで EmojiCompat インスタンスが使用され、できるだけ多くの絵文字がレンダリングされます。ただし、絵文字選択ツールには EmojiCompat は必要ありません。

前提条件

アプリの対象 OS は、Android 5.0（API レベル 21）以上にする必要があります。

ライブラリを使用する

アプリの build.gradle ファイルに androidx.emoji2:emojipicker:$version をインポートします。
```
dependencies {
    implementation "androidx.emoji2:emojipicker:$version"
}
```

絵文字選択ツールのビューをインフレートし、必要に応じて emojiGridRows と emojiGridColumns を設定します。

emojiGridColumns のデフォルト数は 9 です。
行数は、親ビューの高さと emojiGridColumns の値に基づいて計算されます。
emojiGridRows に浮動小数点値を使用して、ユーザーがスクロールして絵文字を追加できることを示します。

<androidx.emoji2.emojipicker.EmojiPickerView
    android:id="@+id/emoji_picker"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:emojiGridColumns="9" />

val emojiPickerView = EmojiPickerView(context).apply {
    emojiGridColumns = 15
    layoutParams = ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT
    )
}

findViewById<ViewGroup>(R.id.emoji_picker_layout).addView(emojiPickerView)

setOnEmojiPickedListener() を使用して、選択した絵文字をビューに追加します。たとえば、EditText に追加するには、次の操作を行います。
```
emojiPickerView.setOnEmojiPickedListener {
    findViewById<EditText>(R.id.edit_text).append(it.emoji)
}
```
必要に応じて RecentEmojiProvider を設定します。サンプルアプリの実装例をご覧ください。

必要に応じてスタイルをカスタマイズします。独自のスタイルを作成して共通のテーマ属性をオーバーライドし、そのスタイルを EmojiPickerView に適用します。たとえば、colorControlNormal をオーバーライドすると、カテゴリアイコンの色が変更されます。

<style name="CustomStyle" >
    <item name="colorControlNormal">#FFC0CB</item>
</style>
<androidx.emoji2.emojipicker.EmojiPickerView
    android:id="@+id/emoji_picker"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/CustomStyle"
    app:emojiGridColumns="9" />

サンプルアプリ

絵文字選択ツールのサンプルアプリでは、基本的なユースケースに加えて、次のシナリオも示しています。

emojiGridRows または emojiGridColumns がリセットされたときのレイアウトの再計算。
頻度で並べ替える、オーバーライドされた最新の絵文字プロバイダ。
スタイルの追加カスタマイズ。