Selector de emojis

El Selector de emojis es una solución de IU que ofrece una apariencia moderna, emojis actualizados y facilidad de uso. Pueden explorar y seleccionar emojis y sus variantes, o elegir uno de los que usaron recientemente.

Figura 1. Selector de emojis

Con esta biblioteca, las apps de una variedad de fuentes pueden proporcionar una experiencia de emoji inclusiva y unificada a sus usuarios sin que los desarrolladores tengan que compilar y mantener su propio selector de emojis desde cero.

Funciones

El Selector de emojis tiene las siguientes funciones.

Emojis actualizados

Los emojis recién lanzados se incluyen de forma selectiva en el selector de emojis. La biblioteca de EmojiPicker es compatible con varias versiones y dispositivos de Android.

Variantes fijas

Mantén presionado un emoji para mostrar un menú de variantes, como diferentes géneros o tonos de piel. La variante que elijas se guardará en el selector de emojis, y la última variante seleccionada se usará en el panel principal.

Con esta función, los usuarios pueden enviar sus variantes de emojis preferidas con un solo toque.

variantes de emojis
Figura 2: Variantes de emojis.

Emojis recientes

emojis recientes
Figura 3: Emojis recientes.

RecentEmojiProvider es responsable de proporcionar emojis en la categoría Usados recientemente. La biblioteca tiene un proveedor de emojis reciente predeterminado que satisface el caso de uso más común:

  • Todos los emojis seleccionados se guardan en el nivel de la app en las preferencias compartidas.
  • El selector muestra, como máximo, tres filas de emojis seleccionados, sin duplicados, en orden cronológico inverso.

Si este comportamiento predeterminado es suficiente, no necesitas usar setRecentEmojiProvider().

Sin embargo, es posible que debas personalizar el comportamiento del proveedor. Estos son algunos casos comunes:

  • Quieres almacenar diferentes emojis seleccionados por cuenta de usuario.
  • Quieres usar un almacenamiento de datos que no sean las preferencias compartidas.
  • Quieres que se muestren los emojis recientes ordenados por frecuencia.

Luego, puedes implementar la interfaz RecentEmojiProvider y configurarla con setRecentEmojiProvider().

Selector de dirección

A partir de Emoji 15.1, el selector de emojis admite emojis bidireccionales. Los usuarios pueden presionar el interruptor bidireccional para alternar entre las versiones de emoji orientadas hacia la izquierda y hacia la derecha.

emoji izquierdo bidireccional

Figura 4: Emoji bidireccional orientado a la izquierda.

emoji de flecha hacia la derecha bidireccional

Figura 5: Emoji bidireccional orientado a la derecha.

Selector de emojis para varias personas

Los usuarios pueden mantener presionadas las parejas de emojis para revelar selecciones de emojis de varias personas.

mantener presionado un par de emojis

Figura 6: Mantén presionado un par de emojis para revelar selecciones de emojis de varias personas.

presiona la persona del emoji de la izquierda

Figura 7: Selecciona una persona con emoji de la mitad izquierda.

presiona el emoji de persona de la derecha

Figura 8: Selecciona una persona con emoji de la mitad derecha.

Cuando el usuario selecciona la mitad izquierda o derecha de la persona de un emoji de pareja, el selector muestra una vista previa en la parte inferior derecha, como se muestra en las figuras 7 y 8. Después de seleccionar ambas mitades del par de emojis, los usuarios pueden seleccionar la vista previa para componer el par de emojis personalizados.

Compatibilidad con EmojiCompat

Si se habilita, se usa una instancia de EmojiCompat en el selector de emojis para renderizar tantos emojis como sea posible. Sin embargo, el selector de emojis no requiere EmojiCompat.

Requisitos previos

Tu app debe apuntar a Android 5.0 (nivel de API 21) o una versión posterior.

Cómo usar la biblioteca

  1. Importa androidx.emoji2:emojipicker:$version en el archivo build.gradle de tu app.

    dependencies {
        implementation "androidx.emoji2:emojipicker:$version"
    }
    
  2. Expande la vista del selector de emojis y, de manera opcional, establece emojiGridRows y emojiGridColumns.

    • La cantidad predeterminada de emojiGridColumns es 9.
    • El recuento de filas se calcula en función de la altura de la vista superior y el valor de emojiGridColumns.
    • Usa un valor de número de punto flotante para emojiGridRows para indicar que el usuario puede desplazarse para ver más emojis.
    <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. Usa setOnEmojiPickedListener() para agregar el emoji seleccionado a una vista. Por ejemplo, para agregar a un EditText, haz lo siguiente:

    emojiPickerView.setOnEmojiPickedListener {
        findViewById<EditText>(R.id.edit_text).append(it.emoji)
    }
    
  4. De manera opcional, establece RecentEmojiProvider. Consulta la app de ejemplo para ver una implementación de ejemplo.

  5. De manera opcional, puedes personalizar los estilos. Crea tu propio estilo para anular los atributos de tema comunes y aplicarlo a EmojiPickerView. Por ejemplo, la anulación de colorControlNormal cambia el color del ícono de la categoría.

    <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" />
    

App de ejemplo

En la app de ejemplo Emoji Picker, se muestran casos de uso básicos junto con los siguientes escenarios adicionales:

  • Recalculo del diseño cuando se restablecen emojiGridRows o emojiGridColumns.
  • Un proveedor de emojis recientes anulado que ordena por frecuencia.
  • Personalización de estilo adicional