Loupe

[Xamarin / iOS] Comment utiliser plusieurs style (font, typo, etc.) sur un même UILabel ?

Lorsque l’on passe de XAML à Xamarin, il y a parfois des choses simples qui deviennent vite “complexes” à mettre oeuvre, notamment l’utilisation de plusieurs styles sur un UILabel.

En effet, avec XAML, il est relativement aisé de comprendre ce que va faire ce code:

<TextBlock>
    <Run FontWeight="Bold">Hello </Run>
    <Run Foreground="Red">World!</Run>
</TextBlock>

Avec iOS, il n’existe pas de code de description d’interface comme on y est habitué en XAML, on est donc obligé d’utiliser les Storyboard/XIB pour concevoir son interface et modifier les propriétés des contrôles (ou on peut également le faire par code).

Pour afficher du texte, il est de bon gout d’utiliser le contrôle adéquat à savoir un UILabel cependant, celui-ci ne supporte pas la notion de “Run” donc comment parvenir à nos fins ?

Depuis iOS 6, la réponse tient en une classe: NSMutableAttributedString. Cette classe permet de définir une chaine de caractères qu’il sera possible découper (range par range) pour y appliquer les styles désirés.

Ainsi, le code XAML précédent peut être écrit de la manière suivante:

var boldAttribute = new UIStringAttributes { Font = UIFont.BoldSystemFontOfSize(16) };
var redColorAttribute = new UIStringAttributes { ForegroundColor = UIColor.Red } ;

var helloString = new NSMutableAttributedString("Hello World!");
helloString.SetAttributes(boldAttribute, new NSRange(1, 5));
helloString.SetAttributes(redColorAttribute, new NSRange(7, 6));

myLabel.AttributedText = helloString;

On commence par définir les différents attributs (styles) que l’on voudra appliquer à notre chaîne de caractères puis on les applique (via la méthode SetAttributes) en indiquant l’attribut et la range (i.e le point de départ et la longueur) sur laquelle on veut que cet attribut soit utilisé.

Enfin, on affecte la propriété AttributeText de notre UILabel, afin de lui permettre d’être affiché en utilisant les styles que nous avons définis.

Même si l’implémentation est un peu différente, le résultat est visuellemet le même !

 

Happy coding!

Ces billets pourraient aussi vous intéresser

Vous nous direz ?!

Commentaires

comments powered by Disqus