Sélecteur d'emoji

Le sélecteur d'emoji est une solution d'interface utilisateur offrant une apparence moderne, à jour les emoji et la facilité d'utilisation. Les utilisateurs peuvent parcourir et sélectionner les emoji et leurs variantes ou choisir l'un des emoji qu'ils ont utilisés récemment.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> 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 son propre sélecteur d'emoji à partir de zéro.

Fonctionnalités

Emoji à jour

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

Variantes persistantes

Appuyez de manière prolongée sur un emoji pour afficher un menu de variantes, comme différentes le sexe ou la couleur 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 avec une appuyez.

<ph type="x-smartling-placeholder">
</ph> variantes d&#39;emoji <ph type="x-smartling-placeholder">
</ph> Figure 2. Variantes d'emoji

Emoji récents

<ph type="x-smartling-placeholder">
</ph> emoji récent <ph type="x-smartling-placeholder">
</ph> 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 pour 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 inverse. ordre chronologique.

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 exemples 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 autant d'emoji que possible. Le sélecteur d'emoji n'exige pas EmojiCompat, en revanche.

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, 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 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 EditText, procédez comme suit:

    emojiPickerView.setOnEmojiPickedListener {
        findViewById<EditText>(R.id.edit_text).append(it.emoji)
    }
    
  4. Vous pouvez également définir RecentEmojiProvider. Consultez un exemple d'application. la mise en œuvre.

  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:

  • Nouveau calcul de la mise en page lorsque emojiGridRows ou emojiGridColumns sont réinitialisés.
  • Fournisseur d'emoji récent remplacé qui effectue le tri par fréquence.
  • Personnalisation supplémentaire du style.