Выбор эмодзи

Emoji Picker — это пользовательский интерфейс с современным дизайном, актуальными эмодзи и простотой использования. Пользователи могут просматривать и выбирать эмодзи и их варианты, а также выбирать из недавно использованных.

Рисунок 1. Выбор эмодзи

Благодаря этой библиотеке приложения из разных источников могут предоставлять своим пользователям инклюзивный и унифицированный интерфейс работы с эмодзи, избавляя разработчиков от необходимости создавать и поддерживать собственный инструмент выбора эмодзи с нуля.

Функции

Средство выбора эмодзи имеет следующие функции.

Актуальные эмодзи

В инструмент выбора эмодзи выборочно включены новые эмодзи. Библиотека инструмента выбора эмодзи совместима с различными версиями Android и устройствами.

Липкие варианты

Длительное нажатие на эмодзи открывает меню вариантов, например, для разных полов или оттенков кожи. Выбранный вариант сохраняется в палитре эмодзи, а последний выбранный вариант используется на главной панели.

С помощью этой функции пользователи могут отправлять предпочитаемые ими варианты эмодзи одним нажатием.

варианты эмодзи
Рисунок 2. Варианты эмодзи.

Недавние эмодзи

недавние эмодзи
Рисунок 3. Недавние эмодзи.

RecentEmojiProvider отвечает за предоставление эмодзи в категории «Недавно использованные» . В библиотеке есть поставщик эмодзи по умолчанию, который подходит для наиболее распространённых вариантов использования:

  • Все выбранные эмодзи сохраняются для каждого приложения в общих настройках.
  • В палитре отображается не более трех строк выбранных эмодзи (без дубликатов) в обратном хронологическом порядке.

Если этого поведения по умолчанию достаточно, то вам не нужно использовать setRecentEmojiProvider() .

Однако вам может потребоваться настроить поведение поставщика. Вот несколько распространённых сценариев:

  • Вы хотите хранить разные выбранные эмодзи для каждой учетной записи пользователя.
  • Вы хотите использовать хранилище данных, отличное от общих настроек.
  • Вы хотите отобразить последние эмодзи, отсортированные по частоте.

Затем вы можете реализовать интерфейс RecentEmojiProvider и установить его с помощью setRecentEmojiProvider() .

Селектор направления

Начиная с версии Emoji 15.1 , Emoji Picker поддерживает двунаправленные эмодзи. Пользователи могут нажать на переключатель двунаправленности, чтобы переключаться между левой и правой версиями эмодзи.

bidirectional left emoji

Рисунок 4. Двунаправленный эмодзи, повернутый влево.

bidirectional right emoji

Рисунок 5. Двунаправленный эмодзи, повернутый вправо.

Селектор эмодзи для нескольких человек

Пользователи могут нажимать и удерживать пары эмодзи, чтобы отобразить выбор эмодзи для нескольких человек.

touch and hold emoji couple

Рисунок 6. Нажмите и удерживайте пару эмодзи, чтобы открыть выбор эмодзи для нескольких человек.

tap left emoji person

Рисунок 7. Выберите левую половину эмодзи человека.

tap right emoji person

Рисунок 8. Выберите правую половину эмодзи человека.

Когда пользователь выбирает левую или правую половину эмодзи из пары эмодзи, селектор отображает предварительный просмотр в правом нижнем углу, как показано на рисунках 7 и 8. После выбора обеих половин пары эмодзи пользователи могут выбрать предварительный просмотр, чтобы составить собственную пару эмодзи.

Совместимость с EmojiCompat

Если этот параметр включен, экземпляр EmojiCompat используется в средстве выбора эмодзи для отображения как можно большего количества эмодзи. Однако для средства выбора эмодзи EmojiCompat не требуется.

Предпосылки

Ваше приложение должно быть ориентировано на Android 5.0 (уровень API 21) или выше.

Использовать библиотеку

  1. Импортируйте androidx.emoji2:emojipicker:$version в файл build.gradle вашего приложения.

    dependencies {
        implementation "androidx.emoji2:emojipicker:$version"
    }
    
  2. Расширьте представление выбора эмодзи и при необходимости установите 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)
    
  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" />
    

Пример приложения

Пример приложения Emoji Picker демонстрирует основные варианты использования, а также следующие дополнительные сценарии:

  • Пересчет макета при сбросе emojiGridRows или emojiGridColumns .
  • Переопределенный поставщик последних эмодзи, сортирующий по частоте.
  • Дополнительная настройка стиля.