Résumé du chapitre 27. Renderers personnalisés
Remarque
Ce livre a été publié au printemps 2016 et n’a pas été mis à jour depuis. Il y a beaucoup dans le livre qui reste précieux, mais certains documents sont obsolètes, et certains sujets ne sont plus entièrement corrects ou complets.
Un Xamarin.Forms élément tel qu’il Button est rendu avec un bouton spécifique à la plateforme encapsulé dans une classe nommée ButtonRenderer. Voici la version iOS de ButtonRenderer, la version Android de ButtonRenderer, et la version UWP de ButtonRenderer.
Ce chapitre explique comment écrire vos propres renderers pour créer des vues personnalisées qui mappent à des objets spécifiques à la plateforme.
Hiérarchie complète des classes
Il existe quatre assemblys qui contiennent le code spécifique à la Xamarin.Forms plateforme. Vous pouvez afficher la source sur GitHub à l’aide de ces liens :
- Xamarin.Forms. Plateforme (très petite)
- Xamarin.Forms. Platform.iOS
- Xamarin.Forms. Platform.Android
- Xamarin.Forms. Platform.UAP
Remarque
Les WinRT assemblys mentionnés dans le livre ne font plus partie de cette solution.
L’exemple PlatformClassHierarchy affiche une hiérarchie de classes pour les assemblys valides pour la plateforme en cours d’exécution.
Vous remarquerez une classe importante nommée ViewRenderer. Il s’agit de la classe à partir de laquelle vous dérivez lors de la création d’un renderer spécifique à la plateforme. Il existe dans trois versions différentes, car il est lié au système d’affichage de la plateforme cible :
L’iOS ViewRenderer<TView, TNativeView> a des arguments génériques :
TViewcontrainte àXamarin.Forms.ViewTNativeViewcontrainte àUIKit.UIView
ViewRenderer<TView, TNativeView> Android a des arguments génériques :
TViewcontrainte àXamarin.Forms.ViewTNativeViewcontrainte àAndroid.Views.View
L’UWP ViewRenderer<TElement, TNativeElement> a des arguments génériques nommés différemment :
TElementcontrainte àXamarin.Forms.ViewTNativeElementcontrainte àWindows.UI.Xaml.FrameworkElement
Lors de l’écriture d’un renderer, vous dérivez une classe, Viewpuis écrivez plusieurs ViewRenderer classes, une pour chaque plateforme prise en charge. Chaque implémentation spécifique à la plateforme fait référence à une classe native qui dérive du type que vous spécifiez en tant que paramètre ouTNativeElement.TNativeView
Bonjour, convertisseurs personnalisés !
Le programme HelloRenderers fait référence à une vue personnalisée nommée HelloView dans sa App classe.
La HelloView classe est incluse dans le projet HelloRenderers et dérive simplement de View.
La HelloViewRenderer classe du projet HelloRenderers.iOS dérive de ViewRenderer<HelloView, UILabel>. Dans le OnElementChanged remplacement, il crée un iOS UILabel natif et appelle SetNativeControl.
La HelloViewRenderer classe du projet HelloRenderers.Droid dérive de ViewRenderer<HelloView, TextView>. Dans le OnElementChanged remplacement, il crée un Android TextView et appelle SetNativeControl.
La HelloViewRenderer classe dans helloRenderers.UWP et d’autres projets Windows dérive de ViewRenderer<HelloView, TextBlock>. Dans le OnElementChanged remplacement, il crée un Windows TextBlock et appelle SetNativeControl.
Tous les ViewRenderer dérivés contiennent un ExportRenderer attribut au niveau de l’assembly qui associe la HelloView classe à la classe particulière HelloViewRenderer . Voici comment Xamarin.Forms localiser les renderers dans les projets de plateforme individuels :
Renderers et propriétés
L’ensemble suivant de renderers implémente le dessin ellipse et se trouve dans les différents projets de la Xamarin.Formssolution Book.Platform.
La EllipseView classe se trouve dans la Xamarin.Formsplateforme Book.Platform . La classe est similaire à BoxView et définit une seule propriété : Color de type Color.
Les renderers peuvent transférer des valeurs de propriété définies sur un View objet natif en remplaçant la OnElementPropertyChanged méthode dans le renderer. Dans cette méthode (et dans la plupart des renderer), deux propriétés sont disponibles :
Element, l’élément Xamarin.FormsControl, l’affichage natif ou l’objet de widget ou de contrôle
Les types de ces propriétés sont déterminés par les paramètres génériques à ViewRenderer. Dans cet exemple, Element est de type EllipseView.
Le OnElementPropertyChanged remplacement peut donc transférer la Color valeur de l’objet Element natif Control , probablement avec un type de conversion. Les trois renderers sont les suivants :
- iOS :
EllipseViewRenderer, qui utilise uneEllipseUIViewclasse pour l’ellipse. - Android :
EllipseViewRenderer, qui utilise uneEllipseDrawableViewclasse pour l’ellipse. - UWP :
EllipseViewRenderer, qui peut utiliser la classe WindowsEllipsenative.
La classe EllipseDemo affiche plusieurs de ces EllipseView objets :
Le BouncingBall rebondit EllipseView sur les côtés de l’écran.
Renderers et événements
Il est également possible pour les renderers de générer indirectement des événements. La StepSlider classe est similaire à la normaleXamarin.FormsSlider, mais permet de spécifier un certain nombre d’étapes discrètes entre les valeurs et Maximum les Minimum valeurs.
Les trois renderers sont les suivants :
- iOS :
StepSliderRenderer - Android :
StepSliderRenderer - UWP:
StepSliderRenderer
Les renderers détectent les modifications apportées au contrôle natif, puis appellent SetValueFromRenderer, qui fait référence à une propriété pouvant être liée définie dans le StepSlider, une modification à laquelle l’événement StepSliderValueChanged est déclenché.
L’exemple StepSliderDemo illustre ce nouveau curseur.