O X do Xamarin Forms — 4.0 — CollectionView e CarouselView

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!