Acelerar a criação de controles personalizados Xamarin.Forms com SkiaSharpFiddle

Muitos anos atrás eu estava trabalhando em um aplicativo de turbina eólica e tive que criar um controle medidor para ele. Eu estava procurando por qualquer biblioteca disponível que fizesse o trabalho para mim. Foi o primeiro projeto de controle personalizado da minha vida sem experiência prévia da plataforma. Uma das coisas que me incomodava naquela época era o ciclo infinito de procedimentos de “mudança de execução de verificação” enquanto ajustava o componente.

Hoje quero mostrar como podemos simplificar e acelerar o processo de desenvolvimento de controles personalizados. Como inspiração, usei a amostra  Xamarin Forms de Glenn Stephens e o controle android CodeAndMagic que eu tenho portado de java / Android para C # / Xamarin.Android. Decidi combiná-los e criar algo “no meio” :).

Por: Yuriy Holembyovskyy
Traduzido por: Adriano D’lucca [Repost Traduzido]
Fonte: trailheadtechnology.com/accelerate-creation-of-xamarin-forms-custom-controls-with-skiasharpfiddle

Criando e configurando o projeto

Crie um projeto Xamarin.Forms em branco e adicione o pacote nuget SkiaSharp.Views.Forms a todos os seus projetos.⠀

Fazendo o controle

O artigo pressupõe que você esteja familiarizado com os controles personalizados SkiaSharp e Xamarin.Forms.

Documentação:

Biblioteca SkiaSharp

Documentação SkiaSharp

O controle é basicamente composto de uma visualização de tela ( SKCanvasView ), os  OnPaintSurfaceMethod e Propriedades Bindable .

Agora precisamos adicionar partes de nosso futuro controle que colocaremos no  OnPaintSurfaceMethod. Os principais blocos de construção são:

O SKPaint  é usado para definir o estilo do nosso gráfico a ser desenhado.

O SKRect  define nosso retângulo com coordenadas (X1, Y1) (X2, Y2).

O SKPath  é usado para desenhar um gráfico ao longo de um caminho.

Geralmente você precisaria fazer muitos ciclos de “change-run-check” (em qualquer uma das plataformas XF: iOS, Android, UWP) enquanto cria e ajusta o controle. “ Mas não hoje ” © (Family Guy)

SkiaSharpFiddle

Recebam a incrível ferramenta criada por Matthew Leibowitz, chamada SkiaSharpFiddle . Esta ferramenta está disponível para Windows e Mac (uma extensão para VS para mac).

Vamos ver como é fácil usar essa ferramenta e economizar nosso tempo). Basicamente, vamos adicionar camada por camada para obter o resultado desejado. Primeiro vamos adicionar um fundo e o arco principal com cores diferentes. Para obter cores diferentes no arco principal, usei 4 caminhos diferentes. Cada cor representa um intervalo de velocidade separado.

Em seguida, vamos adicionar uma agulha com um parafuso. A agulha deve vir antes do parafuso. O parafuso é afinado com um bom gradiente radial

Também precisamos adicionar um rótulo para mostrar o valor atual

Como você pode ver, podemos ajustar facilmente nosso controle e ver as alterações em tempo real sem executar o Visual Studio.

Animação

E por último mas não menos importante :), vamos adicionar alguma animação. Animar nossa agulha é basicamente redesenhar o medidor em vários intervalos de dados e, finalmente, parar no valor alvo.

Para demonstrar a animação, adicionei um temporizador e um gerador RND que geram novos valores a cada dois segundos no intervalo determinado [0-100]

Empacotando

Como você pode ver, o SkiaSharpFiddle é uma grande economia de tempo e nos permite ajustar controles facilmente e ver as mudanças em tempo real.

Você pode baixar o código fonte completo  aqui  e o arquivo de amostra SkiaSharpFiddle com o controle ajustado  aqui

Por: Yuriy Holembyovskyy
Traduzido por: Adriano D’lucca [Repost Traduzido]
Fonte: trailheadtechnology.com/accelerate-creation-of-xamarin-forms-custom-controls-with-skiasharpfiddle

RelatedPost

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *