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 récemment utilisés.

Figure 1 : Sélecteur d'emoji

Avec cette bibliothèque, des applications provenant de sources diverses peuvent proposer une expérience d'emoji inclusive et unifiée à leurs utilisateurs sans que les développeurs n'aient à créer et à gérer leur propre sélecteur d'emoji à partir de zéro.

Fonctionnalités

Emoji à jour

Les nouveaux emoji sont inclus dans le sélecteur d'emoji de manière sélective. La bibliothèque du sélecteur d'emoji 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 sexes ou 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 en un seul geste.

variantes d'emoji
Figure 2. Variantes d'emoji

Emoji récents

emoji récent
Figure 3. Emoji récents

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écent 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 chronologique inverse.

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 quelques scénarios courants:

  • Vous souhaitez stocker différents emoji sélectionnés par compte utilisateur.
  • Vous souhaitez utiliser un espace de 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().

Compatibilité avec EmojiCompat

Si cette option est activée, une instance EmojiCompat est utilisée dans le sélecteur d'emoji pour afficher un maximum d'emoji. Toutefois, le sélecteur d'emoji ne nécessite pas EmojiCompat.

Conditions préalables

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, 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 faire défiler l'écran vers le bas 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 les emoji sélectionnés à une vue. Par exemple, pour ajouter un élément à un élément EditText, procédez comme suit:

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

  5. Si vous le souhaitez, personnalisez les styles. Créez votre propre style pour remplacer les attributs de thème courants et l'appliquer à EmojiPickerView. Par exemple, si vous remplacez colorControlNormal, la couleur de l'icône de catégorie est modifiée.

    <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 du sélecteur d'emoji illustre des cas d'utilisation de base ainsi que les scénarios supplémentaires suivants:

  • Nouveau calcul de la mise en page lorsque emojiGridRows ou emojiGridColumns sont réinitialisés.
  • Fournisseur d'emoji récents ignoré qui effectue un tri par fréquence.
  • Plus de personnalisation du style.