Представляем новую библиотеку выбора эмодзи в Android

Эмодзи стали частью нашего общения посредством сообщений. Сегодня ими пользуется практически каждый. Команда разработчиков Android также знает об этом и недавно представила средство выбора эмодзи для Android. Библиотека позволяет реализовать в нашем приложении средство выбора эмодзи с помощью всего лишь нескольких строк кода. В этом уроке мы узнаем, как реализовать средство выбора эмодзи в нашем приложении с помощью библиотеки эмодзи.

Зависимости

не вдаваясь дальше, сначала нам нужно установить для нашего compileTarget sdk значение 34. Это необходимо из-за библиотеки выбора смайлов.

android {
    ...
    compileSdkVersion 34
    ...
}

Теперь нам нужно добавить библиотеку в наши зависимости. мы можем сделать это, добавив следующую строку в файл build.gradlefile уровня нашего приложения.

dependencies {
   implementation "androidx.emoji2:emojipicker:1.4.0"
}

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

После добавления библиотеки нам необходимо синхронизировать наш проект. Теперь все должно быть хорошо. Перейдем к следующему шагу.

Выполнение

Давайте продолжим, добавив на наш экран TextView и EmojiPicker.

 <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=":D"
        android:textSize="56sp"
        android:layout_marginTop="36dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

   <androidx.emoji2.emojipicker.EmojiPickerView
        android:id="@+id/emojiPickerView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:emojiGridColumns="6"
        app:layout_constraintTop_toBottomOf="@id/textView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
    />

Теперь, когда вы запустите приложение, оно должно расположить TextView и EmojiPickerView, как показано ниже.

Давайте сделаем ситуацию более интересной, добавив прослушиватель в средство выбора смайлов, чтобы при выборе смайлика он отображался в TextView. (Я предполагаю, что вы знакомы с привязкой представления и уже включили ее в свой проект)

binding.emojiPickerView.setOnEmojiPickedListener {
  binding.textView.text = it.emoji
}

Теперь, когда вы запустите приложение, вы сможете увидеть средство выбора смайликов, а когда вы выберете смайлик, он должен отобразиться в TextView.

Новые версии смайлов выпускаются каждый год, и мы будем обновлять коллекцию, чтобы включать в нее новые. Эти новейшие смайлы будут безупречно отображаться на более дорогих телефонах. Новые смайлы могут выглядеть как маленькая квадратная коробочка под названием тофу (☐) на смартфонах более низкого класса. Библиотека обещает найти и избавиться от них. Благодаря этому библиотека становится совместимой с различными версиями Android и устройствами. Таким образом, мы можем быть уверены, что выбранные смайлы будут отображаться без каких-либо ошибок, или, другими словами, мы не увидим ни одного смайлика тофу.

Подробности

Более подробно, библиотека позволяет вам изменять количество сеток в представлении выбора по своему усмотрению. вы можете изменить количество столбцов либо из XML с помощью атрибута «app:emojiGridColumns», либо программно. Поскольку версия XML уже показана, я покажу вам, как это сделать программно. Сначала давайте добавим две кнопки для изменения количества столбцов при нажатии на них.

 <Button
        android:id="@+id/c_minus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C-"
        app:layout_constraintEnd_toStartOf="@+id/textView"
        app:layout_constraintStart_toStartOf="parent"
   />

    <Button
        android:id="@+id/c_plus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C+"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView"
   />

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

Затем реализуйте прослушиватели кликов кнопок, как показано ниже.

binding.cMinus.setOnClickListener {
   binding.emojiPickerView.emojiGridColumns = binding.emojiPickerView.emojiGridColumns - 1
}

binding.cPlus.setOnClickListener {
    binding.emojiPickerView.emojiGridColumns = binding.emojiPickerView.emojiGridColumns + 1
 }

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

Кроме того, можно настроить EmojiPickerView. Вам просто нужно создать свой собственный стиль, чтобы переопределить общие атрибуты темы и применить его к EmojiPickerView. Например, вы можете настроить цвета средства выбора смайлов.

 <style name="EmojiPickerViewStyle" >
   <item name="colorControlNormal">#665558</item>
   <item name="colorAccent">#0277BD</item>
 </style>

А затем нам просто нужно применить его к представлению выбора смайлов.

 <androidx.emoji2.emojipicker.EmojiPickerView
        android:id="@+id/emojiPickerView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:theme="@style/EmojiPickerViewStyle"
        app:emojiGridColumns="6"
        app:layout_constraintTop_toBottomOf="@id/textView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
   />

Теперь, когда вы запустите приложение, вы сможете увидеть измененные цвета в представлении выбора смайлов.

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

Представляем новую библиотеку выбора эмодзи в Android

Зависимости

Выполнение

Подробности

Рекомендации

Похожие вопросы