Sélecteur d'emoji

Le sélecteur d'emoji est une solution d'interface utilisateur qui offre une apparence moderne, des emoji à jour et une grande 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.

Grâce à cette bibliothèque, les applications provenant de diverses sources peuvent offrir une expérience d'emoji inclusive et unifiée à leurs utilisateurs, sans que les développeurs aient à créer et à gérer leur propre sélecteur d'emoji de toutes pièces.

Fonctionnalités

Le sélecteur d'emoji présente les fonctionnalités suivantes.

Emoji à jour

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

Variantes persistantes

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

Grâce à cette fonctionnalité, les utilisateurs peuvent envoyer leurs variantes d'emoji préférées d'un simple geste.

Emoji récents

Le RecentEmojiProvider est chargé de fournir les emoji dans la catégorie Utilisés 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 par 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().

Toutefois, vous devrez peut-être personnaliser le comportement du fournisseur. Voici plusieurs scénarios courants :

• Vous souhaitez stocker différents emoji sélectionnés par 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 d'Emoji 15.1, le sélecteur d'emoji est compatible avec les emoji bidirectionnels. Les utilisateurs peuvent appuyer sur le bouton bidirectionnel pour basculer entre les versions d'emoji orientées vers la gauche et vers la droite.

Figure 4. Emoji bidirectionnel orienté vers la gauche.

Figure 5. Emoji bidirectionnel orienté vers la droite.

Sélecteur d'emoji pour plusieurs personnes

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

Figure 6. Appuyez de manière prolongée sur un couple d'emoji pour afficher les sélections d'emoji représentant plusieurs personnes.

Figure 7. Sélectionnez un emoji représentant la moitié gauche d'une personne.

Figure 8. Sélectionnez un emoji représentant la moitié droite d'une personne.

Lorsque l'utilisateur sélectionne la moitié gauche ou droite d'un emoji représentant un couple, 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é.

Compatibilité avec EmojiCompat

Si cette option est activée, une instance EmojiCompat est utilisée dans le sélecteur d'emoji pour afficher autant d'emoji que possible. Toutefois, le sélecteur d'emoji ne nécessite pas 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. Gonflez la vue du sélecteur d'emoji, puis 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 parente et de la valeur de emojiGridColumns.
   • Utilisez une valeur flottante pour emojiGridRows afin d'indiquer que l'utilisateur peut faire défiler l'écran pour afficher d'autres 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 des éléments à un EditText, procédez comme suit :

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

4. Vous pouvez éventuellement définir RecentEmojiProvider. Consultez l'application exemple pour voir un exemple d'implémentation.

5. Personnalisez les styles (facultatif). Créez votre propre style pour remplacer les attributs de thème courants et appliquez-le à 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 illustre des cas d'utilisation de base ainsi que les scénarios supplémentaires suivants :

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