Resumo do Capítulo 27. Renderizadores personalizados
Observação
Este livro foi publicado na primavera de 2016, e não foi atualizado desde então. Há muito no livro que permanece valioso, mas parte do material está desatualizado, e alguns tópicos não estão mais totalmente corretos ou completos.
Um Xamarin.Forms elemento como Button
é renderizado com um botão específico da plataforma encapsulado em uma classe chamada ButtonRenderer
. Aqui está a versão iOS do ButtonRenderer
, a versão Android do ButtonRenderer
, e a versão UWP do ButtonRenderer
.
Este capítulo discute como você pode escrever seus próprios renderizadores para criar exibições personalizadas mapeadas para objetos específicos da plataforma.
A hierarquia de classes completa
Há quatro assemblies que contêm o código específico da Xamarin.Forms plataforma. Você pode exibir o código-fonte no GitHub usando estes links:
- Xamarin.Forms. Plataforma (muito pequena)
- Xamarin.Forms. Plataforma.iOS
- Xamarin.Forms. Plataforma.Android
- Xamarin.Forms. Plataforma.UAP
Observação
As WinRT
assembleias mencionadas no livro não fazem mais parte dessa solução.
O exemplo PlatformClassHierarchy exibe uma hierarquia de classes para os assemblies que são válidos para a plataforma em execução.
Você notará uma classe importante chamada ViewRenderer
. Essa é a classe da qual você deriva ao criar um renderizador específico da plataforma. Ele existe em três versões diferentes, porque está vinculado ao sistema de visualização da plataforma de destino:
O iOS ViewRenderer<TView, TNativeView>
tem argumentos genéricos:
TView
restrito aXamarin.Forms.View
TNativeView
restrito aUIKit.UIView
O Android ViewRenderer<TView, TNativeView>
tem argumentos genéricos:
TView
restrito aXamarin.Forms.View
TNativeView
restrito aAndroid.Views.View
A UWP ViewRenderer<TElement, TNativeElement>
tem argumentos genéricos com nomes diferentes:
TElement
restrito aXamarin.Forms.View
TNativeElement
restrito aWindows.UI.Xaml.FrameworkElement
Ao escrever um renderizador, você derivará uma classe de View
, e escreverá várias ViewRenderer
classes, uma para cada plataforma suportada. Cada implementação específica da plataforma fará referência a uma classe nativa que deriva do tipo especificado como o TNativeView
parâmetro ou TNativeElement
.
Olá, renderizadores personalizados!
O programa HelloRenderers faz referência a um modo de exibição personalizado nomeado HelloView
em sua App
classe.
A HelloView
classe está incluída no projeto HelloRenderers e simplesmente deriva de View
.
A HelloViewRenderer
classe no projeto HelloRenderers.iOS deriva de ViewRenderer<HelloView, UILabel>
. OnElementChanged
Na substituição, ele cria um iOS UILabel
nativo e chama SetNativeControl
.
A HelloViewRenderer
classe no projeto HelloRenderers.Droid deriva de ViewRenderer<HelloView, TextView>
. OnElementChanged
Na substituição, ele cria um Android TextView
e chama SetNativeControl
.
A HelloViewRenderer
classe no HelloRenderers.UWP e outros projetos do Windows deriva de ViewRenderer<HelloView, TextBlock>
. OnElementChanged
Na substituição, ele cria um Windows TextBlock
e chama SetNativeControl
.
Todas as ViewRenderer
derivadas contêm um ExportRenderer
atributo no nível do assembly que associa a HelloView
classe com a classe específica HelloViewRenderer
. É assim que Xamarin.Forms localiza os renderizadores nos projetos de plataforma individuais:
Renderizadores e propriedades
O próximo conjunto de renderizadores implementa o desenho em elipse e está localizado nos vários projetos da Xamarin.Formssolução Book.Platform .
A EllipseView
aula está na Xamarin.Formsplataforma Book.Platform . A classe é semelhante e BoxView
define apenas uma única propriedade: Color
do tipo Color
.
Os renderizadores podem transferir valores de propriedade definidos em um View
para o objeto nativo substituindo o OnElementPropertyChanged
método no renderizador. Dentro desse método (e na maioria do renderizador), duas propriedades estão disponíveis:
Element
, o Xamarin.Forms elementoControl
, o modo de exibição nativo ou widget ou objeto de controle
Os tipos dessas propriedades são determinados pelos parâmetros genéricos para ViewRenderer
. Neste exemplo, Element
é do tipo EllipseView
.
A OnElementPropertyChanged
substituição pode, portanto, transferir o Color
valor do para o Element
objeto nativo Control
, provavelmente com algum tipo de conversão. Os três renderizadores são:
- iOS:
EllipseViewRenderer
, que usa umaEllipseUIView
classe para a elipse. - Android:
EllipseViewRenderer
, que usa umaEllipseDrawableView
classe para a elipse. - UWP:
EllipseViewRenderer
, que pode usar a classe nativa do WindowsEllipse
.
A classe EllipseDemo exibe vários destes EllipseView
objetos:
O BouncingBall quica EllipseView
um fora das laterais da tela.
Renderizadores e eventos
Também é possível que os renderizadores gerem eventos indiretamente. A StepSlider
classe é semelhante à normal Xamarin.FormsSlider
, mas permite especificar um número de etapas discretas entre os Minimum
valores e Maximum
.
Os três renderizadores são:
- iOS:
StepSliderRenderer
- Android:
StepSliderRenderer
- UWP:
StepSliderRenderer
Os renderizadores detectam alterações no controle nativo e, em seguida, chamam SetValueFromRenderer
, que faz referência a uma propriedade vinculável definida no , uma alteração para a StepSlider
qual faz com que o dispare StepSlider
um ValueChanged
evento.
O exemplo StepSliderDemo demonstra esse novo controle deslizante.