Você provavelmente já acessou algum site que enquanto carregava ficou assim: Este tipo de loading é chamado de Skeleton Screen. Skeleton Screen é mais amigável de serem exibido enquanto carregamos os dados da tela do que o tradicional spinner, ou não carregarmos nada e mostrarmos a tela em branco. Além de que os usuários já estão mais acostumados a vê-los enquanto os dados são carregados. O termo Skeleton Screen foi citado a primeira vez neste post pelo Luke Worblewski. No post ele discute sobre loadings e aconselha designers a evitarem o uso de spinners (Activity indicator). Se você quiser ler um pouco mais sobre Sekeleton Screen, este post do Bill Chung é excelente. O Skeleton Screen se tornou muito popular ao ser adotado pelo Facebook e passou a também ser conhecido como Shimmer. Você pode ver o repositório do Shimmer do Facebook clicando aqui. O Skeleton Screen também tem sido bastante utilizado por outros portais como Youtube, Linkedin, Submarino. Sem mais delongas, vamos ver como implementar o Skeleton Screen com Xamarin.Forms! StateSquid Para implementar o Skeleton Screen no nosso projeto Xamarin Forms, vamos utilizar o pacote Xamarin.Forms.StateSquid desenvolvido pelo Steve Thewissen. Ele é open source, está no Github e disponível para ser instalado via NuGet . Após criado o projeto Xamarin.Forms (se você é novo com Xamarin, veja mais aqui) Vamos instalar o StateSquid apenas no projeto compartilhado do Xamarin.Forms, ele não precisa ser instalado nos projetos das plataformas específicas. Para o exemplo que vamos ver no post ser mais didático, vamos trabalhar com o padrão MVVM, se você não conhece MVVM, veja este material. Com isto, vou usar o pacote Refactored.MvvMHelpers do James Montemagno para facilitar o trabalho com Bindings. O StateSquid possui um objeto chamado SkeletonView. É com ele que iremos representar o loading. A personalização dele para representar bem o está sendo carregando ficará a nosso cargo, definido o tamanho do objeto, largura, cor e se possui bordas arredondadas (você pode controlar o arredondamento da borda para representar círculos). Para controlar o estado do SkeletenView vamos utilizar dois outros objetos do StateSquid: O StateLayout e o StateView. O StateView é quem controlará o estado do SkeletonView. Ele faz isso através da propriedade StateKey que possui as seguintes opções: LoadingSavingSuccessErrorEmptyCustom None Para que o SkeletonView apareça na tela como carregando, vamos utilizar o estado Loading, e para desativa-lo, vamos utilizar o estado None. O StateLayout é um agrupador de StateViews, ou seja, dentro dele você poderá ter vários StateViews que atendam a estados diferentes. Legal! Agora vamos juntar o SkeletonView e o que queremos representar com ele enquanto o dado é carregado, para isto vamos utilizar um StackLayout. O StackLayout irá conter o StateLayout, o StateView, o SkeletonView e um Label, que no nosso exemplo será o objeto que queremos mostrar somente após o carregamento. Para o StackLayout atualizar o StateLayout que está dentro dele, vamos adicionar a propriedade StateLayout.CurrentState do StateSquid com o valor SkeletonState. Ela será atualizada via binding pela nossa MainPageViewModel que iremos criar mais a frente. Por fim, vamos adicionar um botão que irá atualizar a SkeletonState através do command SkeletonCommand. Veja abaixo como ficou a MainPage.xaml: <?xml version="1.0" encoding="utf-8" ?> <ContentPage x:Class="SkeletonScreen.MainPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" xmlns:state="clr-namespace:Xamarin.Forms.StateSquid;assembly=Xamarin.Forms.StateSquid" ios:Page.UseSafeArea="true"> <StackLayout> <StackLayout state:StateLayout.CurrentState="{Binding SkeletonState}"> <state:StateLayout.StateViews> <state:StateView StateKey="Loading"> <state:SkeletonView BackgroundColor="#cccccc" CornerRadius="6" HeightRequest="20" HorizontalOptions="Start" WidthRequest="100" /> </state:StateView> </state:StateLayout.StateViews> <Label Text="Carregamento concluído!" /> </StackLayout> <Button BackgroundColor="Navy" Command="{Binding SkeletonCommand}" HeightRequest="40" Text="Ativar Skeleton" TextColor="White" /> </StackLayout> </ContentPage> Agora que já temos a MainPage criada com o SkeletonView, vamos criar a MainPageViewModel com as propriedade SkeletonState do tipo State e o command SkeletonCommand, que irão controlar a visibilidade do SkeletonView. O SkeletonCommand irá atualizar o estado da SkeletonState para Loading, fazendo com que o SkeletonView seja exibido, aguardar 3 segundos para simular um carregamento e depois atualizar novamente o estado da SkeletonState para None, fazendo com que o SkeletonView seja ocultado e exibida o Label. Veja abaixo a MainPageViewModel: public class MainPageViewModel : BaseViewModel { public State SkeletonState { get; set; } public ICommand SkeletonCommand { get; set; } public MainPageViewModel() { SkeletonCommand = new Command(async (x) => { SkeletonState = State.Loading; await Task.Delay(3000); SkeletonState = State.None; }); } } Feito tudo isto, rode o app, clique no botão Ativar Skeleton e veja se funcionou! Conclusão Você pode trabalhar esta atualização de estado de várias maneiras, por exemplo quando receber o retorno da API ou quando terminar algum processamento. Trabalhe a mudança de estado do jeito que melhor atenda a sua regra de negócio. — Você pode conferir o código completo post no meu GitHub #Ubuntu Compartilhe isso:Clique para compartilhar no Twitter(abre em nova janela)Clique para compartilhar no Facebook(abre em nova janela)Curtir isso:Curtir Carregando...