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…”.

 

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.

 

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

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

 

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