O X do Xamarin Forms — Carregando controles de uma forma mais bonita
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 :
Sim, é exatamente isso que vamos aprender a utilizar e quem vai nos ajudar é o incrivel Controle Xamarin.Forms.Skeleton. Então bora?
Antes de tudo vamos configurar um pacote de Mocks
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 :
Para ver a documentação de utilização do mesmo, basta clicar aqui.
Configurando o Controle
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 :
Simples assim !
Utilizando o Controle
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 :
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!
