Sélecteur d'emoji

Le sélecteur d'emoji est une solution d'UI qui offre une apparence moderne, des emoji à jour et une facilité d'utilisation. Les utilisateurs peuvent parcourir et sélectionner des emoji et leurs variantes, ou choisir parmi les emoji qu'ils ont récemment utilisés.

Figure 1. Sélecteur d'emoji

Grâce à cette bibliothèque, les applications provenant de sources diverses peuvent fournir un environnement une expérience d'emoji unifiée à leurs utilisateurs, sans que les développeurs aient à créer et gérer entièrement son propre sélecteur d'emoji.

Fonctionnalités

Le sélecteur d'emoji propose les fonctionnalités suivantes.

Emoji à jour

Les emoji nouvellement publiés sont inclus de manière sélective dans le sélecteur d'emoji. La bibliothèque Emoji Picker est compatible avec plusieurs versions et appareils Android.

Variantes persistantes

Appuyez de manière prolongée sur un emoji pour afficher un menu de variantes, telles que différents genres ou tons de peau. La variante que vous choisissez est enregistrée dans le sélecteur d'emoji, et la dernière la variante sélectionnée est utilisée dans le panneau principal.

Cette fonctionnalité permet aux utilisateurs d'envoyer les variantes d'emoji de leur choix d'un simple geste.

variantes d'emoji
Figure 2 : Variantes d'emoji.

Emoji récents

emoji récents
Figure 3 Emoji récents.

Le RecentEmojiProvider est chargé de fournir les emoji dans le Utilisées récemment. La bibliothèque dispose d'un fournisseur d'emoji récents par défaut qui répond au cas d'utilisation le plus courant:

  • Tous les emoji sélectionnés sont enregistrés au niveau de l'application dans les préférences partagées.
  • Le sélecteur affiche au maximum trois lignes d'emoji sélectionnés, dédupliqués, dans l'ordre antichronologique.

Si ce comportement par défaut est suffisant, vous n'avez pas besoin d'utiliser setRecentEmojiProvider().

Vous devrez peut-être personnaliser le comportement du fournisseur. Voici quelques scénarios courants :

  • Vous souhaitez stocker différents emoji sélectionnés pour chaque compte utilisateur.
  • Vous souhaitez utiliser un stockage de données autre que les préférences partagées.
  • Vous souhaitez afficher les emoji récents triés par fréquence.

Vous pouvez ensuite implémenter l'interface RecentEmojiProvider et la définir à l'aide de setRecentEmojiProvider()

Sélecteur de direction

À partir de la version 15.1 d'Emoji, le sélecteur d'emoji est compatible avec des emoji bidirectionnels. Les utilisateurs peuvent appuyer sur le bouton bidirectionnel pour basculer entre les versions de l'emoji orientées vers la gauche et vers la droite.

emoji gauche bidirectionnel

Figure 4. Emoji bidirectionnel orienté vers la gauche.

emoji bidirectionnel vers la droite

Figure 5. Emoji bidirectionnel orienté vers la droite.

Sélecteur d'emoji à plusieurs personnes

Les utilisateurs peuvent appuyer de manière prolongée sur les couples d'emoji pour afficher les emoji sélectionnés pour plusieurs personnes.

emoji couple appuyer de manière prolongée

Figure 6. Appuyez de manière prolongée sur un couple d'emoji pour afficher l'emoji de plusieurs personnes sélectionnées.

appuyer sur l'emoji représentant une personne à gauche

Figure 7. Sélectionnez un emoji représentant une personne à moitié à gauche.

appuie sur l'emoji droite de la personne

Figure 8. Sélectionnez la moitié droite de l'emoji.

Lorsque l'utilisateur sélectionne la moitié gauche ou droite d'un emoji d'un couple d'emoji, le sélecteur affiche un aperçu en bas à droite, comme illustré dans les figures 7 et 8. Après avoir sélectionné les deux moitiés du couple d'emoji, les utilisateurs peuvent sélectionner l'aperçu pour composer le couple d'emoji personnalisés.

Compatibilité avec EmojiCompat

Si cette option est activée, une instance EmojiCompat est utilisée dans le sélecteur d'emoji pour s'afficher sous la forme autant d'emoji que possible. Cependant, le sélecteur d'emoji n'a pas besoin de EmojiCompat.

Prérequis

Votre application doit cibler Android 5.0 (niveau d'API 21) ou version ultérieure.

Utiliser la bibliothèque

  1. Importez androidx.emoji2:emojipicker:$version dans le fichier build.gradle de votre application.

    dependencies {
        implementation "androidx.emoji2:emojipicker:$version"
    }
    
  2. Inflatez la vue du sélecteur d'emojis, et définissez éventuellement emojiGridRows et emojiGridColumns.

    • Le nombre par défaut de emojiGridColumns est 9.
    • Le nombre de lignes est calculé en fonction de la hauteur de la vue parent et de la valeur de emojiGridColumns
    • Utilisez une valeur flottante pour emojiGridRows afin d'indiquer que l'utilisateur peut faites défiler l'écran pour afficher plus d'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. Utilisez setOnEmojiPickedListener() pour ajouter l'emoji sélectionné à une vue. Par exemple, pour ajouter à un EditText, procédez comme suit:

    emojiPickerView.setOnEmojiPickedListener {
        findViewById<EditText>(R.id.edit_text).append(it.emoji)
    }
    
  4. Vous pouvez également définir RecentEmojiProvider. Pour voir un exemple d'implémentation, consultez l'exemple d'application.

  5. Personnalisez les styles (facultatif). Créer votre propre style pour remplacer le thème commun et appliquer le style à EmojiPickerView. Par exemple : le remplacement de colorControlNormal modifie la couleur de l'icône de catégorie.

    <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" />
    

Application exemple

L'application exemple de sélecteur d'emoji présente des cas d'utilisation de base les scénarios supplémentaires suivants:

  • Recalcul de la mise en page lorsque emojiGridRows ou emojiGridColumns sont réinitialisés.
  • Fournisseur d'emoji récents ignoré qui trie par fréquence.
  • Personnalisation supplémentaire du style.