Loading – Xamarin.Forms

Algumas vezes é necessário indicar para o usuário que o aplicativo está realizando alguma atividade, ou mesmo para que ele não pense que o app travou.

Um exemplo bastante comum é quando necessita ser realizada uma requisição ao servidor e a internet do usuário está um pouco lenta, enquanto a requisição não termina, é preciso informar ao usuário que algo está ocorrendo ali, por isso então, é usado o Loading ou também conhecido como indicador de atividade. Podendo ser de diferentes formas, neste post irei demonstrar como criar o indicador de atividade padrão das três principais plataformas, sendo elas:

 

Android

 aa

 

 

iOS

printiOS

UWP

printUWP

Para este exemplo, crie um botão para chamar o método “Show” e abaixo do botão adicione um ActivityIndicator como demonstrado a seguir.

XAML

Em seguida, no Code-Behind crie o método RaisePropertyChanged e a variável do tipo bool chamada de IsLoading, sete ela como false no método construtor da classe e por último crie o método Show como demonstrado a seguir.

Code-Behind

Neste caso para fins de exemplo, no método Show apenas criei um Delay para que o ActivityIndicator apareça  e depois de um tempo desapareça.

Resultado

 

Android

loadingAndroid

 

 

iOS

loadingiOS

 

 

UWP

Untitled Project

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

9 comentários em “Loading – Xamarin.Forms

  1. Sou novo no trabalho com Xamarin e seus posts estão me ajudando muito. Parabéns! Gostaria de saber se ao habilitar o indicator teria como travar a tela para o usuário não mexer até o processamento terminar

    Curtir

    1. Olá Frederico, obrigado ! Fico feliz em saber que os post’s estão te ajudando.

      Tem sim, sabe a variável IsLoading ? Crie uma igual, e faça um binding na propriedade isEnabled.

      Montei um exemplo e chamei a variável de isDisabled.
      Acabei de subir no github, da uma olhada lá.

      Espero ter ajudado.

      Curtir

  2. Ola Frederico, tudo bem?

    Tentei realizar o teste com o seu exemplo, mas não consegui exibir a animação do loading. Aparece tudo normalmente…até debuguei para ver se estava chamando os métodos corretamente. O que pode ser?

    Curtir

    1. Olá Gustavo,

      Verifique se você está setando o BindingContext no método construtor.

      Verifique também se você está utilizando o INotifyPropertyChanged.

      Curtir

      1. Ola Frederico, muito obrigado pelo retorno. Realmente eu tinha esquecido de colocar o INotifyPropertyChanged. Valeu mesmo!!! Gostei muito de seus posts!!!

        Curtir

  3. Parabéns Juliano excelente artigo.
    Uma dúvida este exemplo pode ser utilizado na espera da resposta de uma webApi ?

    Eu fiz da forma que você exemplificou e funciona perfeitamente, mais ele tem este Delay de 4000, que acredito que talvez a resposta da Api, possa demorar mais do que o tempo determinado.

    Seria viável fazer desta forma ?

    Obrigado, =]

    Curtir

    1. Olá Gleidson,

      Obrigado 🙂

      Sim, é viável.

      O Delay de 4000 eu utilizei apenas para exemplificar, substitua essa linha pela chamada da sua API, observe que é ativado o loading antes do Delay e finalizado depois, se você substituir o Delay pela chamada da sua API, o loading será ativado antes e desativado após o termino da sua chamada. (Lembre-se de utilizar async e await)

      Qualquer dúvida estou a disposição.

      Curtir

  4. Boa tarde Juliano, tudo bem?

    Gostei muito do artigo, as fiquei com uma dúvida: tem como bloquear toda a tela durante o loader? No caso da sua resposta ao Frederico, o isEnabled bloquearia apenas um botão, certo? Como fazer nos casos onde existem vários botões na tela? Como por exemplo na tela de login, onde posso realizar o login, ou navegar paras as telas de criação e recuperação de senha? Teria que colocar um isEnabled em cada um?

    Muito obrigado.

    Abraços.

    Curtir

    1. Olá André, tudo bem e você ?

      Outra alternativa fácil é, Coloque todos os elementos da tela dentro de um StackLayout, exceto o ActivityIndicator. De um nome para esse StackLayout e apenas utilize o NomeStackLayout.IsVisible, false enquanto aparece o Loading e True quando sumir.

      Espero ter ajudado.

      Abraços

      Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s