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 usate di recente.

Figura 1. Selettore di emoji

Con questa libreria, le app di varie origini possono fornire un'esperienza 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 selettivamente nel selettore di emoji. La libreria del selettore di emoji è compatibile con più versioni e dispositivi Android.

Varianti permanenti

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

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

varianti delle emoji
Figura 2. Varianti di emoji.

Emoji recenti

emoji recenti
Figura 3. Emoji recenti.

Il RecentEmojiProvider è responsabile della fornitura di emoji nella categoria Usate 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 devi utilizzare setRecentEmojiProvider().

Tuttavia, potresti dover personalizzare il comportamento del provider. Di seguito sono riportati alcuni scenari comuni:

  • Vuoi memorizzare emoji selezionate diverse per account utente.
  • Vuoi utilizzare un'archiviazione dei dati diversa dalle preferenze condivise.
  • Vuoi visualizzare le emoji recenti ordinate per frequenza.

A questo punto, puoi 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 alternare le versioni delle emoji rivolte a sinistra e a destra.

emoji bidirezionale sinistra

Figura 4. Emoji bidirezionale rivolta a sinistra.

emoji bidirezionale destra

Figura 5. Emoji bidirezionale rivolta a destra.

Selettore di emoji per più persone

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

toccare e tenere premuto l'emoji della coppia

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

Tocca la persona con l'emoji a sinistra.

Figura 7. Seleziona una persona emoji nella metà sinistra.

tocca l'emoji della persona a destra

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

Quando l'utente seleziona la persona emoji nella metà 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 abilitata, nel selettore di emoji viene utilizzata un'istanza EmojiCompat per eseguire il rendering del maggior numero possibile di emoji. Tuttavia, il selettore di emoji non richiede EmojiCompat.

Prerequisiti

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

Utilizzare la libreria

  1. Importa androidx.emoji2:emojipicker:$version nel 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 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. Utilizza setOnEmojiPickedListener() per aggiungere l'emoji selezionata a una visualizzazione. Ad esempio, per aggiungere a un EditText, procedi nel seguente modo:

    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. Facoltativamente, personalizza gli stili. Crea il tuo stile per sostituire gli attributi del tema comuni e applica lo stile a 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 del selettore di emoji mostra i casi d'uso di base e i seguenti scenari aggiuntivi:

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