Выбор эмодзи

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

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

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

Функции

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

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

Недавно выпущенные эмодзи выборочно включены в Emoji Picker. Библиотека Emoji Picker совместима с несколькими версиями Android и устройствами.

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

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

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

варианты эмодзи
Рисунок 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 используется в Emoji Picker для отображения как можно большего количества эмодзи. Однако Emoji Picker не требует EmojiCompat .

Предпосылки

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

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

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

    dependencies {
        implementation "androidx.emoji2:emojipicker:$version"
    }
    
  2. Расширьте представление Emoji Picker и при необходимости задайте 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 .
  • Переопределенный поставщик последних эмодзи, сортирующий по частоте.
  • Дополнительная настройка стиля.