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!
