O X do Xamarin Forms — 4.0 — CollectionView e CarouselView

Thiago Bertuzzi

Fala galera,

beleza?

Acho que vocês ja cansaram de ler o quanto eu falo que o Xamarin.Forms é incrível não é? Bom eu não cansei de escrever hehehehe

Este framework ❤ tem uma curva de evolução muito bacana, e nos últimos meses tem tido releases a cada +- 15 dias, com funcionalidades uteis e muitas coisas que antes tínhamos que resolver no custom renderer.

Pois bem agora enquanto você lê (supondo que esta lendo no dia que eu publiquei :P ) esta em desenvolvimento a versão 4.0 trazendo novas funcionalidades incríveis (Meu logo também vai pro 4.0 :D hahahahah )!

Vou tentar trazer algumas para vocês terem o gostinho do que vem por ai. Então nada mais justo do que começar com uma das que mais gostei a Incrível Collection View e CarouselView !!! AEEEEEEEEEEEEEEE CAROUSELLLL!!!!!!! Desculpem..

Vamos ver?


Só um aviso : Ate o dia que escrevi esse artigo (29/01/2019), o Xamarin.Forms 4.0 estava em Pré-release! Ou seja, algumas correções e alterações podem ser feitas ate a versão final. Não recomendo que seja utilizado em produção :)


A ideia CollectionView é ser um sucessor do ListView, com aprimoramentos de design, permitindo mais flexibilidade de layout e novas funções. Alem disso temos o novo CarouselView, que a muito tempo é aguardado(funcionando :P) em Xamarin.Forms !

Warning: Hoje o carousel view "Oficial" da xamarin, não funciona muito bem. porem caso precisem recomendo este controle clicando aqui

Configurando o projeto

Antes de entrar nas funcionalidades em si, precisamos configurar o Xamarin.Forms 4.0 pré-release.

Para isso vamos ao nuget atualizar todos os nossos projetos para o Xamarin.Forms 4.0-pre:

Beleza! Agora vamos precisar habilitar um flag no projeto iOS e Android :

global::Xamarin.Forms.Forms.SetFlags(“CollectionView_Experimental”);

iOS AppDelegate.cs :

Android MainActivity.cs :

Fiquem tranquilos esse flag é apenas da Versão pré-release, a oficial não vai precisar :)

Novidades da CollectionView

Antes de tudo, para facilitar os exemplos vamos criar uma Model e ViewModel com alguns dados de teste:

Pronto, agora podemos começar a brincadeira :)

Um novo Layout

Uma das primeiras coisas que podemos notar é a ausência do ViewCell.

O novo modelo proporciona ganhos de perfomance, principalmente no Android.

Se você reparar bem, o novo formato é parecido com o antigo, inclusive na utilização do DataTemplate :

Rodando :

Bem simples não ? Creio que se você estava acostumado com o ListView o novo collection não sera um problema.

De baixo para cima da esquerda para direita , Grid Layout

Quando utilizamos o ListView estamos acostumados em uma lista vertical. Existiam controles customizados para resolver isso , como o FlowListView e o DynamicLayout .

Porem agora é possível definir a orientação da CollectionView, o que me lembra do GridItemsLayout !!

Podemos customizar nosso CollectionView para ficar com uma aparencia mais profissional, alem de que é possível fazer ele rolar para o Lado. Incrível não?

Veja a implementação abaixo :

Nós podemos utilizar o Grid no template definindo a Orietation para Horizontal, e o Span para 2. Assim podemos criar 2 linhas e fazer a lista andar para o lado :

Tudo isso do próprio controle!! Sem a necessidade de implementações de terceiros :D

A Nova Collection view suporta :

  • GridItemsLayout Horizontal
  • GridItemsLayout Vertical
  • ListItemsLayout Horizontal
  • ListItemsLayout Vertical

Ta vazio?

Você não tem itens para Exibir? isso não é um problema! Agora existe uma simples propriedade para isso CollectionView.EmptyView:

Então se o Source estiver vazio :

No exemplo utilizei um Label, mas você pode utilizar praticamente qualquer controle, exibindo uma imagem por exemplo :D

Finalmente!!!! CarouselView :

Talvez não seja correto escrever e sim sentir hahahaha.

CarouselView é algo muito esperado, pois podemos exibir os dados no bom e velho estilo cartão, com uma simples implementação :

Coloquei um slider para mover o carousel :

Muito louco né?!!

Warning: Em alguns testes tive alguns bugs com o iOS, mas é preview ainda .. ate a versão final estará corrigido :)

Snap, pare agora:

Pra fechar é possível configurar pontos de "Snap",com essa nova propriedade é possível fazer com que apenas um cartão apareça no centro por vez.

Para isso basta adicionar as propriedades SnapPointsAlignment e SnapPointsType como abaixo :

Com isso ele centraliza automaticamente :

Mais facil impossível :D

Ufa quanta coisa em ? O que eu posso dizer é que o Xamarin.Forms 4.0 vai mudar muita coisa e facilitar a nossa vida criando apps… Isso porque eu não mostrei o Shell para vocês ainda ;) … Mas fica para um próximo artigo :)

Caso queira baixar o código utilizado no Exemplo: Clique aqui.

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!

Thiago Bertuzzi

Written by

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade