Partilhar via

Resumo do Capítulo 27. Renderizadores personalizados

  • Artigo

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:

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:

O Android ViewRenderer<TView, TNativeView> tem argumentos genéricos:

A UWP ViewRenderer<TElement, TNativeElement> tem argumentos genéricos com nomes diferentes:

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:

Captura de tela tripla do Hello View

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 elemento
  • Control, 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:

A classe EllipseDemo exibe vários destes EllipseView objetos:

Captura de tela tripla de Ellipse Demo

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:

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 StepSliderqual faz com que o dispare StepSlider um ValueChanged evento.

O exemplo StepSliderDemo demonstra esse novo controle deslizante.