絵文字選択ツール

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

図 1. 絵文字選択ツール

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

機能

最新の絵文字

新たにリリースされた絵文字は、絵文字選択ツールで選択的に追加されます。絵文字選択ツール ライブラリは、複数の Android バージョンとデバイスに対応しています。

固定バリアント

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

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

絵文字のバリエーション
図 2.絵文字のバリエーション

最近使用した絵文字

最近の絵文字
図 3.最近使用した絵文字

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

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

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

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

  • ユーザー アカウントごとに異なる絵文字を選択して保存する必要がある。
  • 共有設定以外のデータ ストレージを使用したい場合。
  • 最近使用した絵文字を頻度で並べ替えて表示する必要があります。

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

EmojiCompat との互換性

有効にすると、絵文字選択ツールで EmojiCompat インスタンスを使用して、可能な限り多くの絵文字をレンダリングします。ただし、絵文字選択ツールには EmojiCompat は必要ありません。

前提条件

アプリは Android 5.0(API レベル 21)以降を対象にする必要があります。

ライブラリを使用する

  1. アプリの build.gradle ファイルに androidx.emoji2:emojipicker:$version をインポートします。

    dependencies {
        implementation "androidx.emoji2:emojipicker:$version"
    }
    
  2. 絵文字選択ツールビューをインフレートし、必要に応じて emojiGridRowsemojiGridColumns を設定します。

    • 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)
    
  3. setOnEmojiPickedListener() を使用して、選択した絵文字をビューに追加します。たとえば、EditText に追加する手順は次のとおりです。

    emojiPickerView.setOnEmojiPickedListener {
        findViewById<EditText>(R.id.edit_text).append(it.emoji)
    }
    
  4. 必要に応じて RecentEmojiProvider を設定します。実装例については、サンプルアプリをご覧ください。

  5. 必要に応じてスタイルをカスタマイズします。独自のスタイルを作成して、共通のテーマ属性をオーバーライドし、そのスタイルを 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 がリセットされたときのレイアウトの再計算。
  • 頻度で並べ替えられた、オーバーライドされた最近使用した絵文字プロバイダ。
  • 追加のスタイルのカスタマイズ。