Selettore di emoji

Il selettore di emoji è una soluzione UI che offre un aspetto moderno, emoji aggiornate e facilità d'uso. Gli utenti possono sfogliare e selezionare le emoji e le relative varianti o scegliere tra le emoji utilizzate di recente.

Con questa libreria, le app provenienti da varie fonti possono offrire un'esperienza di emoji inclusiva e unificata ai propri utenti senza che gli sviluppatori debbano creare e gestire il proprio selettore di emoji da zero.

Funzionalità

Il selettore di emoji ha le seguenti funzionalità.

Emoji aggiornate

Le emoji appena rilasciate vengono incluse in modo selettivo nel selettore di emoji. La libreria del selettore di emoji è compatibile con più versioni e dispositivi Android.

Varianti persistenti

Tieni premuta un'emoji per visualizzare un menu di varianti, ad esempio generi o tonalità della pelle diversi. La variante scelta viene salvata nel selettore di emoji e l'ultima variante selezionata viene utilizzata nel riquadro principale.

Con questa funzionalità, gli utenti possono inviare le loro varianti di emoji preferite con un solo tocco.

Emoji recenti

RecentEmojiProvider è responsabile della fornitura di emoji nella categoria Utilizzati di recente. La libreria ha un provider di emoji recenti predefinito che soddisfa il caso d'uso più comune:

• Tutte le emoji selezionate vengono salvate per app nelle preferenze condivise.
• Il selettore mostra al massimo tre righe di emoji selezionate, deduplicate, in ordine cronologico inverso.

Se questo comportamento predefinito è sufficiente, non è necessario utilizzare setRecentEmojiProvider().

Tuttavia, potrebbe essere necessario personalizzare il comportamento del provider. Ecco alcuni scenari comuni:

• Vuoi memorizzare diverse emoji selezionate per ogni account utente.
• Vuoi utilizzare un datastore diverso dalle preferenze condivise.
• Vuoi visualizzare le emoji recenti ordinate per frequenza.

Puoi quindi implementare l'interfaccia RecentEmojiProvider e impostarla utilizzando setRecentEmojiProvider().

Selettore della direzione

A partire da Emoji 15.1, il selettore di emoji supporta le emoji bidirezionali. Gli utenti possono toccare il selettore bidirezionale per passare dalle versioni delle emoji rivolte a sinistra a quelle rivolte a destra e viceversa.

Figura 4. Emoji bidirezionale rivolta verso sinistra.

Figura 5. Emoji bidirezionale rivolta verso destra.

Selettore di emoji con più persone

Gli utenti possono toccare e tenere premute le coppie di emoji per visualizzare le selezioni di emoji con più persone.

Figura 6. Tocca e tieni premuta una coppia di emoji per visualizzare le selezioni di emoji con più persone.

Figura 7. Seleziona un'emoji di una persona nella metà sinistra.

Immagine 8. Seleziona una persona emoji nella metà destra.

Quando l'utente seleziona la persona emoji sinistra o destra di una coppia di emoji, il selettore mostra un'anteprima in basso a destra, come mostrato nelle figure 7 e 8. Dopo aver selezionato entrambe le metà della coppia di emoji, gli utenti possono selezionare l'anteprima per comporre la coppia di emoji personalizzata.

Compatibilità con EmojiCompat

Se l'opzione è attiva, nel selettore di emoji viene utilizzata un'istanza EmojiCompat per visualizzare il maggior numero possibile di emoji. Tuttavia, il selettore di emoji non richiede EmojiCompat.

Prerequisiti

La tua app deve avere come target Android 5.0 (livello API 21) o versioni successive.

Utilizza la libreria

1. Importa androidx.emoji2:emojipicker:$version nel file build.gradle della tua app.

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

2. Espandi la visualizzazione del selettore di emoji e, facoltativamente, imposta emojiGridRows e emojiGridColumns.

   • Il numero predefinito di emojiGridColumns è 9.
   • Il numero di righe viene calcolato in base all'altezza della vista genitore e al valore di emojiGridColumns.
   • Utilizza un valore in virgola mobile per emojiGridRows per indicare che l'utente può scorrere per visualizzare altre emoji.

   <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. Utilizza setOnEmojiPickedListener() per aggiungere l'emoji selezionata a una visualizzazione. Ad esempio, per aggiungere un elemento a un EditText, segui questi passaggi:

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

4. Facoltativamente, imposta RecentEmojiProvider. Per un esempio di implementazione, consulta l'app di esempio.

5. Personalizza gli stili (facoltativo). Crea il tuo stile per eseguire l'override degli attributi del tema comune e applica lo stile a EmojiPickerView. Ad esempio, l'override di colorControlNormal cambia il colore dell'icona della 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 di esempio

L'app di esempio Selettore di emoji mostra i casi d'uso di base insieme ai seguenti scenari aggiuntivi:

• Ricalcolo del layout quando emojiGridRows o emojiGridColumns vengono reimpostati.
• Un provider di emoji recenti sottoposto a override che ordina per frequenza.
• Personalizzazione aggiuntiva dello stile.