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

Figura 1. Selettore di emoji

Con questa libreria, app provenienti da una varietà di origini possono fornire agli utenti un'esperienza di emoji inclusiva e unificata senza che gli sviluppatori debbano creare e gestire da zero il proprio selettore di emoji.

Funzionalità

Emoji aggiornate

Le emoji appena rilasciate sono incluse selettivamente nel selettore di emoji. La raccolta del selettore di emoji è compatibile con diversi dispositivi e versioni Android.

Varianti persistenti

Premi a lungo 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 riquadro principale.

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

varianti di emoji
Figura 2. Varianti di emoji

Emoji recenti

emoji recenti
Figura 3. Emoji recenti

RecentEmojiProvider si occupa di fornire emoji nella categoria Utilizzate di recente. La libreria ha un provider di emoji recente 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 3 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 account utente.
  • Desideri utilizzare uno spazio di archiviazione dei dati diverso dalle preferenze condivise.
  • Vuoi visualizzare le emoji recenti ordinate per frequenza.

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

Compatibilità con EmojiCompat

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

Prerequisiti

La tua 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 della tua app.

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

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

    • Il numero predefinito di emojiGridColumns è 9.
    • Il conteggio delle righe viene calcolato in base all'altezza della vista principale e al valore di emojiGridColumns.
    • Utilizza un valore in virgola mobile per emojiGridRows per indicare che l'utente può scorrere verso il basso 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 le emoji selezionate a una visualizzazione. Ad esempio, per aggiungere un elemento a un EditText, procedi nel seguente modo:

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

  4. Facoltativamente, imposta RecentEmojiProvider. Visualizza un'app di esempio per un'implementazione di esempio.

  5. Se vuoi, personalizza gli stili. Crea il tuo stile per sostituire gli attributi comuni del tema e applicare lo stile a EmojiPickerView. Ad esempio, se esegui l'override di colorControlNormal, viene modificato 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 illustra casi d'uso di base e i seguenti scenari aggiuntivi:

  • Ricalcolo del layout quando vengono reimpostati i valori emojiGridRows o emojiGridColumns.
  • Un fornitore di emoji recente sostituito che ordina per frequenza.
  • Personalizzazione aggiuntiva dello stile.