Xamarin Rocket #8 — Indicador de Progresso
Fala galera,
Tentando manter a periodicidade semanal chegamos novamente com uma dica rápida de Xamarin.Forms!
A ideia é ser um artigo bem rápido e todas as dicas vão ficar em um único repositório, se você perdeu algum veja as que ja saíram :
· Xamarin Rocket #1 — LineBreakMode
· Xamarin Rocket #2 — Alterando o espaço das linhas e colunas do Grid
· Xamarin Rocket #3 — Tela Cheia, ocultando a barra de status
· Xamarin Rocket #4 — Imagens em botões
· Xamarin Rocket #5 — Notificação ao alterar a conexão
Muitas pessoas ja viram aquele indicador de progresso em Aplicativos, principalmente de exercício ( No meu caso só vi mesmo, porque fazer exercício .. bem hahuahahuaa ) .
Hoje vou lhes mostrar um código bem legal, que precisei utilizar em um App e pode ser muito útil para vocês para gerar um indicador de progresso.
Para ajudar em nosso controle vamos utilizar o incrível SkiaSharp!
Se você não conhece o SkiaSharp :
O SkiaSharp é uma API de gráficos 2D multiplataforma para plataformas .NET ,baseada na Biblioteca de Gráficos Skia do Google. Ele fornece uma API 2D abrangente que pode ser usada em mobile, e desktop para renderizar imagens.
Em resumo com o SkiaSharp, poremos criar controles com Modelos 2D. Muito útil para exibir gráficos por exemplo ;)
O Microcharts que demonstrei nesse artigo utiliza o SkiaSharp como base.
Agora vamos utiliza-lo para nos ajudar e criar o Indicador.
Criando nosso Indicador
Vamos ao nuget Baixar o pacote SkiaSharp.Views.Forms e instalar no projeto compartilhado :
Vamos criar um Helper que vai nos ajudar a pegar os tamanhos das telas para o controle ficar correto :
Agora vamos criar nossa pagina utilizando o namespace : xmlns:skia=”clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms” para utilizar o Skiasharp , SKCanvasView :
Nessa mesma pagina vamos adicionar um Switch e um Slider para manipular nosso controle.
Em seguida vamos implementar o backEnd ,para gerar o controle :
O que estamos fazendo ? Estamos utilizando o SkiaSharp para gerar um desenho 2D de um controle de indicador. Apenas para demonstrar o switch indica se você quer ver o Progresso Diário ou Mensal e chama o método : InitiateProgressUpdate.
O método DrawGaugeAsync cria todos os vetores necessários para exibir o controle. Com isto é possível demonstrar a flexibilidade do Skiasharp, você pode customizar seu controle da forma que desejar.
Vamos rodar :
Skiasharp é muito poderoso, e com criatividade é possível criar controles incríveis como o acima :)
Caso queira baixar o código utilizado no Exemplo: Clique aqui.
Quer ver outros artigos sobre Xamarin ? Clique aqui.
Espero ter ajudado!
Aquele abraço!
