Selettore di emoji

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

Figura 1. Selettore di emoji

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

Funzionalità

Il selettore di emoji ha le seguenti funzionalità.

Emoji aggiornate

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

Varianti fisse

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

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

Figura 2. Varianti di emoji.

Emoji recenti

Figura 3. Emoji recenti.

L'RecentEmojiProvider è tenuta a fornire le emoji nella categoria Utilizzate di recente. La libreria ha un fornitore di emoji recenti predefinito che soddisfa il caso d'uso più comune:

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

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

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

• Vuoi memorizzare diverse emoji selezionate per account utente.
• Vuoi utilizzare uno spazio di archiviazione dei dati diverso dalle preferenze condivise.
• Vuoi visualizzare le emoji recenti ordinate in base alla frequenza.

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

Selettore di 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 rivolte verso sinistra a quelle rivolte verso destra delle emoji.

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 una persona emoji con la metà sinistra.

Figura 8. Seleziona un'emoji di una persona con la metà destra del corpo.

Quando l'utente seleziona la metà sinistra o destra della persona emoji 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, gli utenti possono selezionare l'anteprima per comporre la coppia di emoji personalizzate.

Compatibilità con EmojiCompat

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

Prerequisiti

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

Utilizzare la libreria

1. Importa androidx.emoji2:emojipicker:$version nel file build.gradle dell'app.

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

2. Carica la visualizzazione del selettore di emoji e, se vuoi, imposta emojiGridRows e emojiGridColumns.

   • Il numero predefinito di emojiGridColumns è 9.
   • Il conteggio righe viene calcolato in base all'altezza della visualizzazione principale e al valore di emojiGridColumns.
   • Utilizza un valore float 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. Usa setOnEmojiPickedListener() per aggiungere l'emoji selezionata a una visualizzazione. Ad esempio, per aggiungere un elemento a un EditText:

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

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

5. (Facoltativo) Personalizza gli stili. Crea il tuo stile per sostituire gli attributi comuni del tema e applicare lo stile all'elemento EmojiPickerView. Ad esempio, la sostituzione 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 Emoji Picker mostra casi d'uso di base, oltre ai seguenti scenari aggiuntivi:

• Ricalco del layout quando emojiGridRows o emojiGridColumns vengono reimpostati.
• Un provider di emoji recenti sostituito che ordina in base alla frequenza.
• Personalizzazione aggiuntiva dello stile.