Выбор эмодзи

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

Рисунок 1. Средство выбора эмодзи

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

Функции

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

Актуальные смайлы

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

Прикрепленные варианты

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

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

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

Недавние смайлы

недавние смайлы
Рисунок 3. Недавние смайлы.

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

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

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

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

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

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

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

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

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 не требуется 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 .
  • Переопределенный поставщик недавних смайлов, который сортирует их по частоте.
  • Дополнительная настройка стиля.
,

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

Рисунок 1. Средство выбора эмодзи

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

Функции

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

Актуальные смайлы

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

Прикрепленные варианты

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

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

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

Недавние смайлы

недавние смайлы
Рисунок 3. Недавние смайлы.

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

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

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

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

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

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

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

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

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 не требуется 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 .
  • Переопределенный поставщик недавних смайлов, который сортирует их по частоте.
  • Дополнительная настройка стиля.