O X do Xamarin Forms — Carregando controles de uma forma mais bonita

Image for post
Image for post

Fala galera,

Tudo beleza?

Falando em beleza esse é um ponto que queremos que nosso app tenha ( Ou sera que não? ). Deixar uma interface agradavel pode ser uma tarefa complicada, porque alem da propria interface podemos deixar ate os carregamentos mais agradaveis.

Como assim? Assim :

Image for post
Image for post

Sim, é exatamente isso que vamos aprender a utilizar e quem vai nos ajudar é o incrivel Controle Xamarin.Forms.Skeleton. Então bora?

Image for post
Image for post

Para facilitar a vida eu vou usar um pacote que fiz para meus exemplos, você inclusive pode utilizar ele caso queira fazer Apps de teste. Eu não recomendo utilizar em produção, pois ele é fixo para Mocks.

Vamos ao Nuget instalar o pacote Bertuzzi.Xamarin.Forms.Mocks e instalar no projeto principal , ele nos dara uma BaseViewModel, BasePage e uma Api da PokeApi com um service implementado, assim facilita nosso App de Exemplo :

Image for post
Image for post

Para ver a documentação de utilização do mesmo, basta clicar aqui.

Image for post
Image for post

Muito bem agora que temos o Mock configurado vamos configurar o Sekeleton. Vamos ao querido Nuget baixar o pacote Xamarin.Forms.Skeleton e instalar em todos os projetos :

Image for post
Image for post

Simples assim !

Vamos criar uma ViewModel e uma View que graças a nosso Mock ficou facil termos dados de testes :

Certo mas e o controle do Sekeleton?

Então é ai que entra a "magica" desse incrivel controle. O Skeleton se integra nos seus controles existentes , so precisamos declarar o Namespace : xmlns:extension=”clr-namespace:Xamarin.Forms.Skeleton;assembly=Xamarin.Forms.Skeleton” em nossa View e podemos usar suas propriedades em nosso ListView , como no exemplo abaixo :

Para ficar mais legal o efeito eu adicionei um Frame na Listview. Notem que nos controles temos as propriedades Skeleton.IsBusy e Skeleton.BackgroundColor , elas determinam se o controle vai exibir o carregamento e a cor que ele deve exibir.

Existe tambem a propriedade Skeleton.Hide=”True” que determina se vai aparecer o efeito de carregamento ou não.

Por fim o extension:Skeleton.Animation que define o tipo de animação e o extension:Skeleton.IsParent que determina o controle pai que vai controlar as animações.

Existem outras propriedades e você pode verificar elas na documentação clicando aqui.

Agora vamos mudar nossa model, a partir da que temos no mock vamos inserir uma nova propriedade chamada Ocupado:

Ela vai nos ajudar para auxliar se o conteudo da ListView esta carregando ou não.

Agora vamos modificar toda nosso ViewModel :

Notem que eu adicionei alguns dados "Falsos" para ja preenche o ListView dando a ideia de que os dados estão sendo carregados.

Para poder ver melhor o efeito eu adicionei um Task.Delay , simulando que a consulta esta demorando um pouco para carregar.

Tanto a Propriedade Ocupado da ViewModel como do meu PokemonModel, serão responsaveis por informar o controle se ele esta carregando ou não.

Em seguida eu preencho com os dados originais e altero o valor da propriedade.

Warning: Eu criei um helper ObjectConverter para facilitar a conversão do retorno da Api para meu objeto PokemonModel. Pode ser uma mão na roda em algumas situações

Agora vamos rodar :

Image for post
Image for post

Bem legal não?

Voce pode utilizar o Sekeleton fora do ListView tambem para carregar os controles da sua tela por exemplo.

Existem mais 2 exemplos no repositorio oficial do controle e você pode conferir clicando aqui.

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!

Written by

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store