Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Xamarin.Forms : gérer les fontes natives

S’il est vrai que laisser l’utilisateur et l’OS se débrouiller de ces détails visuels est le plus sage, il peut s’avérer nécessaire parfois d’avoir à utiliser une fonte bien particulière et forcément native à la plateforme. Mais comment le faire depuis un système cross-plateforme comme les Xamarin.Forms ?

Les fontes

Tous les OS utilisables avec les Xamarin.Forms acceptent l’installation de nouvelles fontes, chacun avec ses méthodes propres. Mais tous sont aussi fournis avec un certain nombre de fontes pré-installées.

Le plus sage est de laisser l’utilisateur et l’OS se débrouiller avec les fontes, comme il en va avec les couleurs de fond et tous ces paramètres visuels qui peuvent être modifiés sans que le programme ne le sache. Cette philosophie est en tout cas la meilleure dans le monde mobile si on ne veut pas entrer en collision avec les éventuelles modifications apportées soit par l’OS soit par l’utilisateur (paramètres de la machine, utilisation d’un thème, d’un launcher ayant son propre look & feel…). On peut opposer à cette vision très normative l’absolu contraire et vouloir créer une App ayant un visuel totalement original et déconnecté des exigences ergonomiques de chaque plateforme… Les fournisseurs d’OS ne le souhaitent pas, mais après tout chacun est libre de suivre ou non leurs consignes !

Le sujet reste toutefois un peu plus complexe que cela et c’est pourquoi le chapitre 2 “Les bases” du livre sur les Xamarin.Forms s’attache à clarifier de nombreux concepts liés aux thèmes, couleurs et bien sûr aux fontes (leur taille d’un OS à l’autre notamment). Ceux d’entre-vous qui possèdent cet ouvrage pourront ainsi s’y référer. Pour les autres il suffit de cliquer sur le lien précédent pour se procurer un exemplaire !

S’il est donc préférable d’utiliser les fontes par défaut il peut s’avérer très utile, voire nécessaire, dans certains cas de spécifier une fonte directement. Toutefois chaque OS utilise sa propre gamme de fontes installées par défaut et il n’est pas possible dans un page Xamarin.Forms de figer un nom tel que Arial ou Symbol qui ne serait reconnu en l’espèce que par UWP (iOS possède aussi une fonte Arial mais par Android par défaut en tout cas).

Il est possible d’installer de nouvelles fontes et de les utiliser dans une App. Par exemple une application de musique qui souhaite afficher des partitions ou des symboles musicaux pourrait installer une fonte spécialisée et y faire référence. C’est à la fois le cas le plus complexe et le plus simple tout simplement parce que le développeur sait exactement quel nom de fonte utiliser puisqu’il l’a installée lui-même.

En dehors de ces cas particuliers on peut jouer sur les deux tableaux : utiliser le stock de fonte de base et ne spécifier que la famille (“sans serif” par exemple) et laisser l’OS choisir la fonte répondant à cette exigence.

Bref il existe bien des façons de tirer partie des fontes installées. Reste que chaque OS utilise ses propres noms de fontes et qu’on en revient au problème de fixer ce genre de paramètre au sein d’une page Xamarin.Forms.

Android

Comme tous les autres OS Android permet l’installation de fontes personnalisées. Il suffit d’utiliser leur nom pour y faire référence, comme partout. Toutefois la logique d’Android est de fournir un visuel harmonieux se fondant sur un choix de fontes propres à Google comme la fonte Roboto. Sous cet OS on préférera souvent n’agir que sur les noms de famille de fonte. “sans-serif”, “sans-serif-condensed”, “monospace”, etc, sont autant de familles utilisables pour obtenir des effets différents pour un titre, des données ou autres.

iOS

iOS se comporte de la même façon ce qui est assez logique tous les OS ayant à régler les mêmes problèmes il y a forcément convergence des possibilités, un peu comme la convergence de forme dans la nature qui fait que dans l’eau les mammifères ont fini par adopter des formes de poissons parce que c’est la mieux adaptée au milieu.

Toutefois iOS propose de base toute une gamme de polices portant des noms différents dont on peut vouloir tirer profit plutôt que de jouer sur les seuls noms de famille. “AcademicEngravedletPlain”, “AppleSDGothicNeo-Thin”, “Avenir-Medium”, “Papyrus”, etc, sont les noms de ces fontes disponibles sans installation particulière.

UWP

UWP c’est Windows pour PC la partie smartphone ayant disparue presque totalement du marché (et dans l’attente d’un éventuel renouveau, un jour). La gestion des polices sur un PC est l’une des plus simples puisque l’installation se limite à copier le TTF dans le répertoire des fontes de l’OS et c’est tout… Mais là encore on retrouve une liste de fontes installées par défaut dont on peut vouloir tirer partie. La technique ne sera pas démontrée ici explicitement puisque cela revient exactement au même que le cas de iOS.

Equivalences

Le véritable problème qui va se poser pour celui qui souhaite utiliser des fontes natives sera de trouver des équivalences entre les OS …

En effet, utiliser Papyrus sous iOS en taille 22 ne donnera pas du tout le même effet que de l’Arial 22 sur PC ou du “sans-serif” 22 sur Android…

Or il n’existe pas de base d’équivalences entre les fontes d’un OS à l’autre. Pas de fonte Papyrus de base sous Android ou un PC…

Le problème sera donc visuel et esthétique plus que technique.

Les Xamarin.Forms permettent dans le code partagé de détecter sur quelle plateforme qui est en train de s’exécuter. Il reste donc possible d’utiliser des listes de fontes spécifiques que l’application aura personnalisées à son initialisation par exemple. L’utilisation de constantes (initialisées différemment selon l’OS) permettra ensuite d’utiliser une fonte plus qu’une autre en XAML sans avoir à se livrer à des contorsions syntaxiques.

Exemple

S’il est difficile dans cet article de traiter tous les cas possibles sous tous les OS, une petite application exemple permettra tout de même de voir comment les différentes fontes natives peuvent s’utiliser depuis les Xamarin.Forms.

Ici rien de compliqué, une page principale affichant une liste de fontes. La description de chaque fonte s’affiche en utilisant la fonte en question. Il est possible de modifier la couleur de fond ainsi que celle des textes tout autant que la taille d’affichage des polices. Le tout étant géré par le biais du plugin “xam.plugins.settings” installable depuis Nuget (pour gérer la persistance des choix sans s’embêter avec les différences d’OS).

Sous iOS

Sous iOS on aura un affichage de ce type :

2017-04-15_07-12-12- 2017-04-15_07-12-16-

Sous Android

XFontListDroid

 

XFontListDroid2

 

Le code

Plutôt que de vous gaver de pages de code je préfère vous laissez jouer vous-mêmes avec le source à télécharger ici : http://www.e-naxos.com/download/nativefonts.zip (attention le projet UWP n’est pas fourni car non utilisé mais la solution peut encore y faire référence, supprimez cette dernière si cela vous dérange).

Conclusion

Gérer un bon visuel est indispensable et les fontes permettent à peu de frais d’obtenir des résultats intéressants notamment pour les titrages par exemple. Utiliser une fonte plus qu’une autre sous Xamarin.Forms n’est pas compliqué, le véritable challenge sera de trouver des équivalences acceptables d’un OS à l’autre… C’est l’une des raisons qui peut pousser à installer directement de nouvelles fontes avec son App afin d’en maîtriser la disponibilité et assurer la continuité du look & feel d’un OS à l’autre. Mais cela réclame d’utiliser des fontes libres disponibles sur toutes les plateformes ou bien d’acheter des fontes cross-plateformes.

Chacun fera en fonction de ses besoins et du budget dont il dispose, les limitations viendront de là et non pas des Xamarin.Forms !

 

Stay Tuned !

blog comments powered by Disqus