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
iOS
UWP
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="utf-8" ?> | |
| <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" | |
| xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" | |
| xmlns:local="clr-namespace:DemoLoading" | |
| x:Class="DemoLoading.DemoLoadingPage" > | |
| <StackLayout > | |
| <Button x:Name="botao" Clicked="Show" Text="Login" TextColor="White" BackgroundColor="#3b5998" Margin="10,30,10,30"/> | |
| <ActivityIndicator x:Name="actInd" | |
| IsRunning="{Binding IsLoading}" | |
| IsVisible="{Binding IsLoading}" Color="Red"/> | |
| </StackLayout> | |
| </ContentPage> |
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| using System; | |
| using System.ComponentModel; | |
| using System.Threading.Tasks; | |
| using Xamarin.Forms; | |
| namespace DemoLoading | |
| { | |
| public partial class MainPage : ContentPage, INotifyPropertyChanged | |
| { | |
| public MainPage() | |
| { | |
| InitializeComponent(); | |
| IsLoading = false; | |
| BindingContext = this; | |
| } | |
| public async void Show(object sender, EventArgs e) | |
| { | |
| try | |
| { | |
| aparece(); | |
| //Chame sua função aqui | |
| await Task.Delay(4000); | |
| some(); | |
| } | |
| catch (Exception ex) | |
| { | |
| some(); | |
| if (ex != null) | |
| { | |
| //Trate seu erro aqui | |
| } | |
| } | |
| } | |
| public async void aparece() | |
| { | |
| IsLoading = true; | |
| } | |
| public async void some() | |
| { | |
| IsLoading = false; | |
| } | |
| private bool isLoading; | |
| public bool IsLoading | |
| { | |
| get | |
| { | |
| return this.isLoading; | |
| } | |
| set | |
| { | |
| this.isLoading = value; | |
| RaisePropertyChanged("IsLoading"); | |
| } | |
| } | |
| public event PropertyChangedEventHandler PropertyChanged; | |
| public void RaisePropertyChanged(string name) | |
| { | |
| if (PropertyChanged != null) | |
| { | |
| PropertyChanged(this, new PropertyChangedEventArgs(name)); | |
| } | |
| } | |
| } | |
| } |
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
iOS
UWP
Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.
Juliano Custódio 
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
CurtirCurtir
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.
CurtirCurtir
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?
CurtirCurtir
Olá Gustavo,
Verifique se você está setando o BindingContext no método construtor.
Verifique também se você está utilizando o INotifyPropertyChanged.
CurtirCurtir
Ola Frederico, muito obrigado pelo retorno. Realmente eu tinha esquecido de colocar o INotifyPropertyChanged. Valeu mesmo!!! Gostei muito de seus posts!!!
CurtirCurtir
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, =]
CurtirCurtir
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.
CurtirCurtir
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.
CurtirCurtir
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
CurtirCurtir
Boa noite Juliano,
Cara, sou novo no desenvolvimento com xamarin e seus posts tem me ajudado muito.
Seus posts são simples e objetivo e vão direto ao ponto… show de bola!!
CurtirCurtir
Olá William,
Fico feliz em saber que os meus posts estão te ajudando. 😀
CurtirCurtir