Power Up Xamarin.Forms avec FontAwesome 5

L'utilisation des dernières polices FontAwesome 5 dans votre application Xamarin.Forms 2.5 vous a simplifié la tâche.

Il existe de nombreux exemples d'utilisation de polices personnalisées dans vos applications Xamarin.Forms flottant sur Internet. Mais comme le temps, la technologie marche et certains changements récents l'ont rendu un peu plus difficile, alors j'ai pensé que je prendrais quelques minutes pour vous montrer comment utiliser les dernières polices FontAwesome dans Xamarin.Forms 2.5.

FontAwesome est un jeu de polices personnalisées qui a des symboles qui remplacent les caractères normaux et fournissent (principalement) aux développeurs web une iconographie facile à utiliser FontAwesome propose des fonctionnalités CSS / Less et JavaScript faciles à utiliser pour afficher une icône de recherche aussi facilement que l'ajout d'un élément mais sous toutes les astuces Web, il existe une collection de polices TrueType et OpenType peut être utilisé dans n'importe quelle application.

FontAwesome version 5 est divisé en un niveau gratuit qui inclut 946 icônes et une version Pro qui a une autre icône 1535. Ceci est un changement par rapport à la version 4.7 où toutes les icônes étaient contenues dans un fichier de police unique et ils étaient tous disponible gratuitement. Les fichiers gratuits de la version 5 sont répartis entre 3 fichiers de polices:

• fa-marques-400.ttf / otf
• fa-regular-400.ttf / otf [19659008] fa-solid-900.ttf / otf

Vous pouvez en apprendre plus sur FontAwesome et télécharger les fichiers de polices avec les fichiers CSS / Less d'accompagnement à https://fontawesome.com/ . Les fichiers que nous utiliserons dans cette démo se trouvent dans le répertoire fontawesome-free-5.0.8 web-fonts-with-css webfonts .

Ajout de fichiers FontAwesome à vos projets de plateforme [19659012] Je vais utiliser des icônes de la police de caractères fa-regular-400.ttf donc la première chose à faire est d'ajouter le fichier TrueType à chacun des projets spécifiques à votre plate-forme. Visual Studio. Pour Android et UWP, vous ajoutez le fichier sous votre répertoire Assets . Pour iOS, ajoutez-le à votre répertoire Resources . Ajouter le fichier en cliquant-droit sur le dossier et en sélectionnant "Ajouter un élément existant", localisez le fichier et il sera ajouté au projet.

L'étape suivante consiste à s'assurer que l'action de construction est correctement définie. Pour Android, l'action de construction doit être définie sur "AndroidAsset", pour iOS, sur "BundledResource", et enfin pour UWP, sur "Contenu" et le paramètre Copier dans le répertoire de sortie "Copier toujours".

Police dans votre interface utilisateur Xamarin.Forms

Maintenant que ces polices sont ajoutées à vos projets de plate-forme respectifs, l'utiliser dans Xamarin.Forms est facile, sinon tout à fait simple. Cela est dû aux différences dans la façon dont les ressources / ressources sont référencées par la plateforme et par la structure de nommage des nouveaux fichiers FontAwesome.

Le XAML ci-dessus montre un bouton et une étiquette qui affiche l'icône FontAwesome "meh". Pour utiliser la police personnalisée, vous devez spécifier l'attribut FontFamily. Le format de cet attribut est différent pour chaque plate-forme.

• Android: #
• iOS:
• UWP: #

Chaque icône de la bibliothèque FontAwesome est associée à une valeur Unicode. . L'icône "meh" ci-dessus utilise le caractère Unicode, f11a . Ceci est représenté dans le code C # via fu11a; et dans XAML via & # xf11a . Trouvez les caractères Unicode pour chaque icône sur le site FontAwesome.

C'est tout ce qu'il y a à faire. Voici à quoi cela ressemble dans les applications.

Icon Sizing

De nombreuses fonctionnalités de la librairie FontAwesome sont implémentées par CSS, incluant la possibilité de spécifier un multiplicateur de taille tel que fa-9x. Bien que ces fonctionnalités ne soient pas prises en charge dans l'application elle-même, vous pouvez simplement augmenter la taille de votre texte en utilisant l'attribut FontSize

Animations

Il existe des bibliothèques populaires qui vous permettent d'ajouter des animations à votre application, comme Font Awesome Animation . Ces bibliothèques utilisent également CSS mais la fonctionnalité peut facilement être dupliquée à l'aide des animations de classes Xamarin Forms ViewExtensions . Par exemple, le code suivant fera pivoter l'objet contenant l'objet FontAwesome de 180 degrés:

 en attente this.AwesomeText.RotateTo (180, 2000); 

Vous pouvez obtenir tout le code source ici

Codage heureux

(Image en-tête gracieuseté de Galerie gratuite de FontAwesome )

---