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

Figura 1. Selettore di emoji

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

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 persistenti

Tieni premuto a lungo su 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 solo tocco.

varianti di emoji
Figura 2. Varianti di emoji

Emoji recenti

emoji recente
Figura 3. Emoji recenti

L'RecentEmojiProvider è tenuta a fornire le 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 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, potresti dover 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 l'opzione è attiva, nel selettore di emoji viene utilizzata un'istanza EmojiCompat per visualizzare il maggior numero possibile di emoji. Il selettore di emoji non richiede però 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 dell'app.

    dependencies {
        implementation "androidx.emoji2:emojipicker:$version"
    }
    
  2. Aumenta 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 padre 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 EditText, segui questi passaggi:

    emojiPickerView.setOnEmojiPickedListener {
        findViewById<EditText>(R.id.edit_text).append(it.emoji)
    }
    
  4. Se vuoi, imposta RecentEmojiProvider. Vedi app di esempio per un'implementazione di esempio.

  5. Se vuoi, puoi personalizzare gli stili. Crea il tuo stile per sostituire gli attributi comuni del tema e applicare lo stile all'elemento EmojiPickerView. Ad esempio, se esegui l'override di colorControlNormal, il colore dell'icona della categoria cambia.

    <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 insieme ai seguenti scenari aggiuntivi:

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