Seletor de emojis

O seletor de emojis é uma solução de interface que oferece uma aparência moderna, emojis atualizados e facilidade de uso. Os usuários podem navegar e selecionar emojis e as variantes deles ou escolher entre os emojis usados recentemente.

Com essa biblioteca, apps de várias fontes podem oferecer uma experiência de emoji inclusiva e unificada aos usuários sem que os desenvolvedores precisem criar e manter o próprio seletor de emojis do zero.

Recursos

O Seletor de Emojis tem os recursos a seguir.

Emoji atualizado

Os emojis recém-lançados são incluídos de forma seletiva no seletor de emojis. A biblioteca do seletor de emojis é compatível com várias versões do Android e dispositivos.

Variantes fixas

Toque e pressione um emoji para mostrar um menu de variantes, como diferentes gêneros ou tons de pele. A variante escolhida é salva no seletor de emojis, e a última variante selecionada é usada no painel principal.

Com esse recurso, os usuários podem enviar as variantes de emoji que preferirem com um toque.

Emojis recentes

O RecentEmojiProvider é responsável por fornecer emojis na categoria Usados recentemente. A biblioteca tem um provedor de emojis recentes padrão que atende ao caso de uso mais comum:

• Todos os emojis selecionados são salvos por app nas preferências compartilhadas.
• O seletor mostra no máximo três linhas de emojis selecionados, sem duplicações, em ordem cronológica inversa.

Se esse comportamento padrão for suficiente, não será necessário usar setRecentEmojiProvider().

No entanto, talvez seja necessário personalizar o comportamento do provedor. Veja algumas situações comuns:

• Você quer armazenar diferentes emojis selecionados por conta de usuário.
• Você quer usar um repositório de dados diferente das preferências compartilhadas.
• Você quer mostrar os emojis recentes classificados por frequência.

Em seguida, implemente a interface RecentEmojiProvider e defina-a usando setRecentEmojiProvider().

Seletor de direção

A partir do Emoji 15.1, o seletor de emojis é compatível com emojis bidirecionais. Os usuários podem tocar no seletor bidirecional para alternar entre as versões do emoji voltadas para a esquerda e para a direita.

Figura 4. Emoji bidirecional virado para a esquerda.

Figura 5. Emoji bidirecional virado para a direita.

Seletor de emojis com várias pessoas

Os usuários podem tocar e manter pressionados os emojis de casais para revelar as opções de emojis com várias pessoas.

Figura 6. Toque e pressione um casal de emojis para revelar as seleções de emojis com várias pessoas.

Figura 7. Selecione um emoji de pessoa para o lado esquerdo.

Figura 8. Selecione uma pessoa de emoji para o lado direito.

Quando o usuário seleciona a pessoa da metade esquerda ou direita de um casal de emojis, o seletor mostra uma prévia no canto inferior direito, como mostrado nas figuras 7 e 8. Depois de selecionar as duas metades do casal de emojis, os usuários podem selecionar a visualização para compor o casal de emojis personalizado.

Compatibilidade com o EmojiCompat

Se ativada, uma instância EmojiCompat é usada no seletor de emojis para renderizar o máximo de emojis possível. No entanto, o seletor de emojis não exige EmojiCompat.

Pré-requisitos

O app precisa ser destinado ao Android 5.0 (nível 21 da API) ou versões mais recentes.

Usar a biblioteca

1. Importe androidx.emoji2:emojipicker:$version no arquivo build.gradle do app.

   dependencies {
       implementation "androidx.emoji2:emojipicker:$version"
   }
   

2. Infle a visualização do seletor de emojis e, se quiser, defina emojiGridRows e emojiGridColumns.

   • O número padrão de emojiGridColumns é 9.
   • A contagem de linhas é calculada com base na altura da visualização da família e no valor de emojiGridColumns.
   • Use um valor flutuante para emojiGridRows para indicar que o usuário pode rolar para ver mais 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. Use setOnEmojiPickedListener() para anexar o emoji selecionado a uma visualização. Por exemplo, para anexar a um EditText, faça o seguinte:

   emojiPickerView.setOnEmojiPickedListener {
       findViewById<EditText>(R.id.edit_text).append(it.emoji)
   }
   

4. Se quiser, defina RecentEmojiProvider. Consulte o app de exemplo para ver uma implementação.

5. Personalize os estilos, se quiser. Crie seu próprio estilo para substituir atributos de tema comuns e aplique-o ao EmojiPickerView. Por exemplo, substituir colorControlNormal muda a cor do ícone da categoria.

   <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 exemplo

O app de exemplo do Seletor de Emojis demonstra casos de uso básicos, além dos seguintes cenários:

• Recálculo do layout quando emojiGridRows ou emojiGridColumns são redefinidos.
• Um provedor de emojis recentes modificado que classifica por frequência.
• Personalização de estilo adicional.