ListView com Infinite Scroll – Xamarin.Forms

Neste artigo irei demonstrar como você pode implementar uma lista com Infinite Scroll, dessa forma a sua lista será carregada “em partes”, com paginação e a quantidade de itens que você deseja por página. Esse tipo de carregamento é muito utilizado quando é necessário carregar uma lista com muitos elementos, evitando que o usuário espere toda a lista carregar para que possa selecionar o elemento desejado.

 

ADICIONANDO O NUGET PACKAGE

Clique com o botão direito em cima de sua Solution e selecione “Manage NuGet Packages for Solution…”.

1

 

No momento em que escrevo este artigo, o plugin utilizado encontra-se em prerelease, então para que possa encontra-lo, selecione a opção “Include prerelease”.

Digite “Xamarin.Forms.Extended.InfiniteScrolling” e selecione o plugin como demonstrado na imagem a seguir.

2

 

Selecione todos os projetos e clique no botão “Install”.

2

Service.cs

Está classe será necessária para simular uma requisição, observe que no método GetPessoasAsync está sendo utilizado um Delay de 3000 milissegundos.

MainViewModel.cs

Crie a classe MainViewModel, elá irá herdar de INotifyPropertyChanged e terá as seguintes propriedades:

  • PageSize – Tamanho da página
  • _isBusy – Indica quando começa(true) e quando termina(false) a requisição.
  • Service – Objeto do tipo da classe Service criada anteriormente.
  • Items – A lista com os elementos que serão apresentados.

 

Download

Crie o método Download que será responsável em pegar a primeira página da lista.

 

OnPropertyChanged

Crie o método OnPropertyChanged que será responsável  por notificar a cada modificação de propriedade.

 

Construtor

No construtor da classe instancie a lista, observe que OnLoadMore também busca os itens e adiciona na lista,  pois ele será chamado a cada página carregada. No construtor adicione uma chamada para o método Download, ele será chamado para carregar apenas a primeira página.

MainPage.xaml

Comece setando a MainViewModel no BindingContext, depois crie uma lista como você já deve estar acostumado.

Referencie o plugin Xamarin.Forms.Extended e sete o InfiniteScrollBehavior no ListView.Behaviors.

No footer da lista, adicione um ActivityIndicator que será apresentado enquanto a próxima página é carregada.

Resultado

ezgif.com-gif-maker

ezgif.com-video-to-gif.gif

 

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

icongithub

5 comentários em “ListView com Infinite Scroll – Xamarin.Forms

  1. Muito bom Juliano ! Agora você poderia nos ensinar a fazer utilizando GroupCollection, tenho uma lista enorme dentro de outra lista, e estou apanhando para fazer… 😦

    Curtir

  2. Fala juliano beleza… Então tenho uma lista dentro de outra lista, aí pelo que pesquisei deve-se montar um group collection, tentei mas não consegui carregar por demanda de forma correta, podia criar um artigo assim ?

    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