Share
Lorsque vous créez des applications avec Xamarin.Forms, vous apprécierez sans aucun doute la simplicité de la création d'interfaces utilisateur. Grâce à Xamarin.Forms, vous pouvez utiliser la même terminologie pour les contrôles sur plusieurs plates-formes..
Bien que ce concept puisse être très puissant, en tant que concepteur ou développeur, il peut être quelque peu limitatif. Il peut sembler que nous soyons obligés d'utiliser les contrôles d'interface utilisateur natifs fournis avec chacune des plates-formes sans possibilité d'ajouter de personnalisation. Ce n'est pas le cas.
Pour pouvoir personnaliser l'interface utilisateur de certaines plates-formes, vous devez d'abord comprendre le processus de rendu de Xamarin.Forms..
Lorsqu’il s’agit d’utiliser Xamarin.Forms pour créer une interface utilisateur pour votre application mobile multiplate-forme, vous devez comprendre deux pièces importantes du puzzle..
La première pièce du puzzle est la élément. Vous pouvez considérer un élément comme la définition agnostique de la plate-forme d'un contrôle dans Xamarin.Forms. Si vous avez lu la documentation, vous saurez que ces contrôles sont également appelés Vue objets. Pour être encore plus précis, chaque élément de Xamarin.Forms découle de la Vue classe.
Ces éléments sont utilisés pour décrire un élément visuel. Les éléments fournissent une définition agnostique de plate-forme des caractéristiques de l'apparence et du comportement du contrôle. Un élément seul ne peut pas créer un contrôle affiché à l'utilisateur. Il a besoin d'aide. C’est là que la deuxième partie du processus de rendu intervient, une moteur de rendu.
Un moteur de rendu entre en jeu lorsque vous exécutez votre application. Le travail du moteur de rendu consiste à transformer l'élément indépendant de la plate-forme en quelque chose de visuel à présenter à l'utilisateur..
Par exemple, si vous utilisiez un Étiquette Dans votre projet partagé, lors de l’exécution de votre application, le framework Xamarin.Forms utiliserait une instance du LabelRenderer classe pour dessiner le contrôle natif. Si vous commencez à vous demander comment cela se produit à partir d'un projet de code partagé, c'est une très bonne question. La réponse est non.
Illustrons ceci avec un exemple. Commencez par ouvrir Xamarin Studio ou Visual Studio. Le processus et les concepts sont les mêmes pour les deux. Si vous utilisez Xamarin Studio, les projets Windows Phone ne sont pas pris en charge et vous ne créez donc que trois projets dans votre solution. Si vous utilisez Visual Studio, vous allez créer quatre projets..
Dans Visual Studio, créez un nouveau projet et sélectionner la Mobile applications famille de projet sur la gauche et choisissez le Application vierge (Xamarin.Forms Portable) modèle de projet à droite. Vous pouvez nommer votre projet comme bon vous semble, mais si vous souhaitez suivre avec moi, utilisez le nom Personnalisation, et le clic D'accord.
Maintenant, en fonction de votre IDE, vous devriez voir trois ou quatre projets dans votre solution. Si vous développez le Références dossier dans votre Personnalisation (Portable) projet, vous verrez une référence d'assemblage à Xamarin.Forms.Core. C'est ici que tous les différents éléments sont définis pour que vous les utilisiez dans votre projet d'interface utilisateur partagée. Rien d'extraordinaire là-bas.
Si vous ouvrez chacun des projets spécifiques à la plate-forme et développez leur Références vous verrez que chacun contient une implémentation spécifique à la plate-forme de cette bibliothèque Xamarin.Forms, nommée Xamarin.Forms.Platform.Android, Xamarin.Forms.Platform.iOS, et Xamarin.Forms.Platform.WP8 respectivement.
C'est dans ces assemblages que vous trouverez les moteurs de rendu pour chacun des éléments Xamarin.Forms. Vous commencez maintenant à voir la structure du processus. Les éléments agnostiques de la plateforme, ou Vue objets, sont dans le projet de code partagé, mais tous les moteurs de rendu spécifiques aux éléments sont dans les projets spécifiques à la plate-forme.
Cela signifie que pour chacun des éléments que vous utilisez, deux moteurs de rendu seront créés dans Xamarin Studio et trois dans Visual Studio. Maintenant que vous voyez comment cela est structuré dans Xamarin.Forms, la question logique suivante est généralement: "Quand devrais-je utiliser les personnalisations?".
Il existe certainement un bon nombre de propriétés et de caractéristiques définies dans les éléments Xamarin.Forms qui peuvent être utilisés pour personnaliser le contrôle final sur chacune des plates-formes. Cela dit, toutes les personnalisations disponibles sur chacune des plates-formes n'existent pas dans Xamarin.Forms. Cela étant, il existe deux scénarios principaux lorsque vous souhaitez créer des personnalisations..
Le premier scénario lorsque des personnalisations seront nécessaires est celui où vous souhaitez créer un contrôle entièrement personnalisé. Supposons que vous vouliez créer un contrôle de calendrier ou peut-être une sorte de contrôle graphique. Malheureusement, rien de tel n'existe aujourd'hui dans Xamarin.Forms, ce qui ne veut pas dire qu'il ne le sera jamais.
C'est certainement une situation où vous devrez commencer à zéro et tout créer à partir de zéro. Vous devrez définir l'élément que vous allez utiliser pour décrire les caractéristiques du contrôle de manière indépendante de la plate-forme. Ensuite, vous devrez également créer un moteur de rendu personnalisé pour chacune des plates-formes que vous souhaitez prendre en charge..
Selon ce que vous construisez, cela peut être un projet plutôt volumineux. Cela étant, je vais enregistrer cela pour un autre tutoriel en soi. Au lieu de cela, dans ce tutoriel, nous nous concentrerons sur le deuxième scénario dans lequel vous aurez besoin de personnalisation..
La deuxième situation dans laquelle vous constaterez que vous avez besoin de personnalisation est lorsqu'un élément intégré ne prend pas en charge une fonctionnalité spécifique d'une plateforme que vous souhaitez prendre en charge. Un exemple de ceci serait sur le Étiquette contrôle. Dans Xamarin.Forms, aucun mécanisme, ni aucune propriété, ne vous permet de créer l'équivalent sur chacune des plates-formes afin de rendre le texte en gras ou en italique. Cela peut sembler un scénario très simple, mais vous constaterez que le processus de base consistant à rendre cette modification disponible dans l'élément et à faire en sorte que le moteur de rendu comprenne que ce sera la même chose ici que dans certains des scénarios plus complexes..
Avec le second scénario en tête, vous avez deux options. Vous pouvez remplacer le moteur de rendu existant pour une plate-forme spécifique (ou pour toutes les plates-formes) et créer vos propres fonctionnalités et votre logique de dessin pour toutes les fonctionnalités de l'élément. Vous pouvez également créer votre propre élément à partir de l'élément existant et associer ce nouvel élément à un rendu personnalisé. De cette façon, vous conserverez toutes les fonctions de logique et de rendu par défaut de l'élément de base et le personnaliserez comme vous le souhaitez. Ce sera la route que nous prenons pour cet exemple. Voyons maintenant comment ajouter cette fonctionnalité à notre propre projet..
Commençons ce processus en définissant la structure de base de notre application afin que nous puissions voir notre base de référence, puis apporter des modifications. Commencez par ouvrir votre App.cs déposer dans le Personnalisation (Portable) projet dans le Explorateur de solution. Modifier le GetMainPage méthode pour ressembler à ceci:
page statique publique GetMainPage () var iLabel = nouvelle étiquette TextColor = Color.Black, Text = "Je veux être en italique!", HorizontalOptions = LayoutOptions.CenterAndExpand; var bLabel = new Label Text = "Je veux être gras!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand; var bothLabel = new Label "Text =" Je veux être en italique et en gras! ", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand; return new ContentPage BackgroundColor = Color.White, Content = new StackLayout Padding = 100, Spacing = 100, Children = iLabel, bLabel, bothLabel;
Comme vous pouvez le voir ici, nous avons créé trois simples Étiquette les contrôles. On veut être en italique, on veut être audacieux et le troisième est gourmand et veut être les deux. Si vous deviez exécuter cette application sur iOS, Android et Windows Phone, elles ressembleraient à ceci:
iOS
Android
Téléphone Windows
Comme vous pouvez le constater, ils ne veulent pas être aussi ennuyeux. Eh bien, ne restez pas assis là, aidez-les.
La première chose que nous devons faire est de créer un nouvel élément que nous pourrons utiliser pour fournir des personnalisations supplémentaires aux éléments existants. Étiquette contrôle. Commencez par ajouter une nouvelle classe à votre Personnalisation (Portable) projet et nommez-le StyledLabel. Remplacez son contenu par ce qui suit:
public enum StyleType Italic, Bold, BoldItalic public class StyledLabel: Label public StyleType Style get; ensemble;
Nous définissons une énumération et une classe très simples. Nous avons défini l'énumération en italique, gras et gras plus italique valeurs. Nous créons ensuite une classe StyledLabelqui dérive de la Étiquetteclasse de base et ajouter une nouvelle propriété, Style,tenir le style approprié que nous voulons appliquer au contrôle.
Pour vous assurer que tout fonctionne toujours, et nous devrions le faire, modifions le App.cs déposer une fois de plus et remplacer le Étiquette éléments dans notre premier exemple avec notre nouvelle StyledLabel éléments. Parce que le StyleLabel la classe hérite de la Étiquette classe, tout devrait encore fonctionner.
page statique publique GetMainPage () var iLabel = new StyledLabel TextColor = Color.Black, Text = "Je veux être en italique!", HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.Italic; var bLabel = new StyledLabel Text = "Je veux être gras!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.Bold; var bothLabel = new StyledLabel Text = "Je veux être en italique et en gras!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.BoldItalic; return new ContentPage BackgroundColor = Color.White, Content = new StackLayout Padding = 100, Spacing = 100, Children = iLabel, bLabel, bothLabel;
Encore une fois, voici les résultats de ce changement.
iOS
Android
Téléphone Windows
Comme vous pouvez le constater, rien n’a changé. Maintenant que nous avons un nouvel élément personnalisé, il est temps de créer les rendus personnalisés pour prendre en charge les contrôles natifs..
La première étape pour créer un moteur de rendu consiste à ajouter une nouvelle classe à la plate-forme que vous ciblez. Nous allons commencer avec le Xamarin.Android projet. Dans ce projet, créez un nouveau fichier de classe et nommez-le. StyledLabelRenderer et remplacez son contenu par ce qui suit:
en utilisant Android.Graphics; en utilisant la personnalisation; using Customization.Droid; using Xamarin.Forms; using Xamarin.Forms.Platform.Android; [assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer)))] espace de noms Customization.Droid public class StyledLabelRenderer: LabelRenderer annulation protégée voilée OnElementChanged (ElementChangedEventArgs
Regardons de plus près ce bloc de code.
[assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer)))]
Nous commençons avec une spéciale Assemblée attribut qui indique à Xamarin.Forms de l'utiliser StyledLabelRenderer classe en tant que rendu chaque fois qu'il essaie de rendre StyledLabel objets. Cela est nécessaire pour que vos personnalisations fonctionnent correctement.
Juste comme quand nous avons créé un nouveau StyledLabel élément, nous avons hérité de la Étiquette classe, nous aurons notre nouveau StyledLabelRenderer classe hériter de la LabelRenderer classe. Cela nous permettra de conserver les fonctionnalités existantes afin que nous n'ayons à remplacer que ce que nous voulons changer ou personnaliser.
Pour appliquer notre nouveau formatage, nous allons devoir passer au processus de rendu et nous le faisons via le OnElementChanged méthode. Dans cette méthode, nous pouvons faire toutes nos personnalisations.
Lors de vos personnalisations, vous allez utiliser deux propriétés très importantes. Tout d'abord, vous devrez obtenir une référence à l'élément d'origine que vous avez créé et qui est rendu dans notre méthode de rendu personnalisé. Vous faites cela en utilisant le Élément propriété. Ceci est un objet générique, vous devrez donc le convertir en n'importe quel type de rendu. Dans ce cas, c’est un StyledLabel.
var styledLabel = (StyledLabel) Element;
La deuxième propriété importante dont vous avez besoin est la Contrôle propriété. Cette propriété contient une référence typée au contrôle natif sur la plate-forme. Dans ce cas, puisque vous avez hérité de la LabelRenderer classe, le code sait déjà que le Contrôle dans ce cas est un Affichage.
À partir de ce moment, vous utiliserez une logique simple pour déterminer quelle personnalisation effectuer et appliquer les personnalisations natives appropriées. Dans ce cas, vous utiliserez le mécanisme Android pour modifier la police de caractères d’un Affichage en utilisant le SetTypeface méthode.
switch (styledLabel.Style) case StyleType.Bold: Control.SetTypeface (null, TypefaceStyle.Bold); Pause; case StyleType.Italic: Control.SetTypeface (null, TypefaceStyle.Italic); Pause; case StyleType.BoldItalic: Control.SetTypeface (null, TypefaceStyle.BoldItalic); Pause;
Si vous deviez exécuter cette application maintenant, vous devriez voir quelque chose comme ceci dans l'émulateur Android, et c'est exactement ce que nous voulions..
Le processus de création du rendu iOS est exactement le même jusqu’au point de remplacer le OnElementChanged méthode. Commencez par créer une nouvelle classe dans votre Personnalisation.iOS projet. Nomme le StyledLabelRenderer et remplacez le contenu par ce qui suit:
en utilisant la personnalisation; using Customization.iOS; using MonoTouch.UIKit; using Xamarin.Forms; using Xamarin.Forms.Platform.iOS; [assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer)))] espace de noms Customization.iOS classe publique StyledLabelRenderer: LabelRenderer protégé annulation de la sauvegarde OnElementChanged (ElementChangedEventArgs
Comme vous pouvez le constater, tout est exactement pareil. Vous avez le même Assemblée attribut, vous remplacez le même OnElementChanged méthode, vous lancez la Élément propriété à un StyledLabel, et vous avez la même coquille d'un commutateur déclaration de travailler à travers le Style propriété.
La seule différence réside dans le fait que vous appliquez le style au fichier natif. UILabel contrôle.
Accentsconagua
commutateur (styledLabel.Style) case StyleType.Bold: Control.Font = UIFont.BoldSystemFontOfSize (16.0f); Pause; case StyleType.Italic: Control.Font = UIFont.ItalicSystemFontOfSize (16.0f); Pause; case StyleType.BoldItalic: Control.Font = UIFont.FromName ("Helvetica-BoldOblique", 16.0f); Pause; La façon dont vous faites un UILabelde Police de caractère propriété soit en gras ou en italique dans iOS est par le biais d'une méthode d'assistance statique sur la UIFont classe nommée soit BoldSystemFontOfSize ou ItalicSystemFontOfSize. Cela fonctionnera dans le cas d'une police en gras ou en italique, mais pas les deux. Si vous essayez d’appliquer les deux à un UILabel, seul le dernier rendra.
Pour obtenir les deux styles, nous allons tricher un peu et utiliser une police intégrée dans iOS nommée Helvetica-BoldOblique. Cette police a les caractères gras et italique intégrés afin que nous n'ayons pas à les faire individuellement.
En l'exécutant dans le simulateur iOS, vous obtiendrez le résultat suivant:
Enfin, nous arrivons à Windows Phone. Comme vous l'avez peut-être déjà deviné, le processus est exactement le même. Créer une nouvelle classe dans le Personnalisation.WinPhone projet, nommez-le StyledLabelRenderer et remplacez le contenu par ce qui suit:
using System.Windows; en utilisant la personnalisation; using Customization.WinPhone; using Xamarin.Forms; using Xamarin.Forms.Platform.WinPhone; [assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer)))] espace de noms Customization.WinPhone classe publique StyledLabelRenderer: LabelRenderer protégé annule la suppression OnElementChanged (ElementChangedEventArgs
Encore une fois, tout est pareil sauf la logique. Dans ce cas, pour rendre le texte en italique, vous définissez la valeur TextBlockde Le style de police propriété à Italique. Ensuite, pour mettre le texte en gras, vous définissez la FontWeight propriété à Audacieux. Si vous voulez appliquer les deux, vous définissez simplement les deux.
L'exécution de cette application dans l'émulateur Windows Phone vous donnera le résultat suivant:
Vous avez maintenant créé avec succès un élément multi-plateforme personnalisé, entièrement fonctionnel, qui se rend parfaitement sur les trois plates-formes. Vous devriez maintenant vous sentir prêt à affronter le monde. Enfin presque.
Le processus que nous avons suivi tout au long de ce didacticiel est totalement valide et, dans la plupart des cas, fonctionnera parfaitement. Cependant, il existe un cas très spécifique dans lequel nous manquerons certaines fonctionnalités si nous utilisons cette approche. Ce cas est une liaison de données en XAML.
L'une des fonctionnalités très intéressantes de Xamarin.Forms est le fait que vous pouvez utiliser XAML et la liaison de données comme si vous créiez une application Windows Phone, WPF ou Silverlight. Malheureusement, la liaison de données et XAML sortent du cadre de ce didacticiel, mais je vous encourage à en savoir plus à ce sujet sur la page XAML pour Xamarin.Forms..
Commençons par créer une simple page XAML qui duplique l’interface utilisateur précédemment créée dans le code. Commencez par ajouter un nouveau fichier à votre Personnalisations (Portable) projet, en sélectionnant le Formulaires XAML type de fichier et en lui donnant un nom StyledLabelPage.
Une fois le fichier créé, remplacez le contenu par ce qui suit:
