Selettore di emoji

Il selettore di emoji è una soluzione UI che offre un aspetto moderno, aggiornato emoji e facilità d'uso. Gli utenti possono sfogliare e selezionare le emoji e le loro varianti o scegli una delle emoji usate di recente.

Figura 1. Selettore di emoji

Con questa libreria, le app provenienti da una varietà di fonti possono offrire un'esperienza inclusiva e un'esperienza unificata con emoji per i 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 EmojiPicker è 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.

varianti di emoji
Figura 2. Varianti di emoji.

Emoji recenti

emoji recente
Figura 3. Emoji recenti.

RecentEmojiProvider è responsabile della fornitura delle emoji nella categoria Utilizzate di recente. La raccolta ha un fornitore di emoji recente 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 inverso in ordine cronologico.

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

Tuttavia, potresti dover personalizzare il comportamento del provider. 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 emoji bidirezionale. Gli utenti possono toccare il selettore bidirezionale per attivare/disattivare tra le versioni delle emoji rivolte a sinistra e a destra.

emoji bidirezionale sinistra

Figura 4. Emoji bidirezionale rivolta a sinistra.

emoji destra bidirezionale

Figura 5. Emoji bidirezionale rivolta a destra.

Selettore di emoji a più persone

Gli utenti possono toccare e tenere premute le coppie di emoji per visualizzare la selezione di emoji multiple.

tocca e tieni premuta una coppia di emoji

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

tocca persona emoji sinistra

Figura 7. Seleziona una persona emoji con la metà sinistra.

tocca persona emoji a destra

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

Quando l'utente seleziona la metà destra o sinistra dell'emoji di una coppia di emoji, il selettore visualizza 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 abilitato, 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

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 numero di righe viene calcolato in base all'altezza della vista principale e al valore emojiGridColumns.
    • Utilizza un valore in virgola mobile per emojiGridRows per indicare che l'utente può scorri per 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. (Facoltativo) Imposta RecentEmojiProvider; vedi app di esempio per un esempio implementazione.

  5. (Facoltativo) Personalizza gli stili. Crea il tuo stile per eseguire l'override degli attributi del tema comuni e applicarlo 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 casi d'uso di base, oltre a i seguenti scenari aggiuntivi:

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