• laurent@lioncoding.com

Utiliser des Emojis dans Xamarin.Forms 🤓🤔👨 🤹‍


Les emojis, vous les connaissez; ce sont ces fameuses petites images que nous utilisons souvent sur les réseaux sociaux tels que WhatsApp, Facebook, Messenger, Twitter, Telegram,… et aussi dans les SMS.

Ils utilisent un encode particulier, ce qui rend un peu complexe leur affichage dans une chaîne de caractères.

Mais comment se fait-il que nous arrivons à les insérer dans nos messages sur les réseaux sociaux ?

Les claviers de nos smartphones sont très intelligents; dès qu’ils détectent que nous avions sélectionné un emoji, ils le convertissent automatiquement en chaîne de caractères avec encode UTF-8. C’est un travail d’arrière plan effectué par les claviers.

Le principe sera le même dans Xamarin.Forms:

  • Pour un affichage statique dans XAML, nous indiquerons qu’il s’agit d’un émoji pour qu’une conversion automatique soit effectuée.
  • Pour un affichage via le Data Binding, un classe spéciale de conversion sera mise en place.

A la découverte des Emojis

Sur ce site, vous trouverez la plupart des emojis que nous utilisons chaque jour. Ce site est très intéressant parce qu’il nous fournit la liste des emojis avec leur code respectif.

Exemple:

  • 🤔 est représenté par le code U+1F914

Affichage statique dans XAML

Le langage XAML étant un langage de balisage basé sur XML, nous devons utiliser le caractère d’échappement XML &#; et remplacer le préfixe U+ par x pour chaque partie de notre emoji:

Ainsi pour l’emoji de l’exemple précédant , voici son affichage dans un label:

<Label Text="&#x1F914;" />

Affichage via le Data Binding

Définissons une classe qui représentera un emoji:

using System;
using System.Text;

namespace EmojiInXaml.Models
{
    /// <summary>
    /// Emoji class.
    /// </summary>
    public class Emoji
    {
        readonly int[] codes;

        public Emoji(int[] codes)
        {
            this.codes = codes;
        }

        public Emoji(int code)
        {
            codes = new int[] { code };
        }

        public override string ToString()
        {
            if (codes == null)
                return string.Empty;

            var sb = new StringBuilder(codes.Length);

            foreach (var code in codes)
                sb.Append(Char.ConvertFromUtf32(code));

            return sb.ToString();
        }
    }
}

Ici, le préfixe U+ doit être remplacé par 0x pour spécifier la notation hexadécimale. La méthode ToString() nous effectue la conversion automatiquement.

Si nous reprenons l’exemple précédant, 🤔 est représenté par le code U+1F914, ce qui deviendra 0x1F914 et pour utiliser notre classe Emoji, voici la syntaxe:

string bikingEmoji = new Emoji(0x1F914).ToString();
<Label Text="{Binding bikingEmoji}" />

Ressources

Voir un exemple de Projet sur Github dans lequel j’ai utilisé des emojis .


Commentaires