CarouselView.FormsPlugin Vs CardsView

Thiago Bertuzzi
Jun 28 · 6 min read

Fala galera,

Beleza?

Este artigo começa de uma forma incomum , devido a este Tweet :

Muito Bem, alem de ter a honra de ser mencionado no tweet do Andrei, como dizem os americanos Challenge Accepted!!

Andrei Misiukevich costuma fazer controles muito legais para Xamarin.Forms, inclusive eu ja fiz artigos de 2 controles bem legais dele :

· O X do Xamarin Forms — ExpandableView

· O X do Xamarin Forms — TouchView

Então segundo o tweet dele ele queria alguém para comparar 2 controles para Carousel com Xamarin.Forms. Um do Alexander Reyes (CarouselView.FormsPlugin) e o outro dele mesmo (CardsView).

Pois bem se você costuma ler meus artigos (mas se é o primeiro que lê, seja bem vindo :D ) , deve lembrar que a um tempo atrás eu escrevi o artigo :O X do Xamarin Forms — Uma opção ao Carousel View .

Neste artigo eu explico como utilizar o Controle do Alexander Reyes e como ele tinha sido minha alternativa oficial ao CarouselView do Xamarin.Forms (Que era descontinuado e cheio de Bugs)… Inclusive eu sugiro que você leia este artigo, antes de continuar lendo a comparação :)

Pois bem, agora chegou a hora de dar uma olhada no controle do Andrei Misiukevich e ver o que temos de diferente entre os dois !! Bora ?

Antes de mais nada uma coisa que me deixa feliz é o controle do Andrei ainda estar sendo atualizado de forma constante, incluindo novas funcionalidades :

Falando desse pequeno detalhe, vamos implementar o CardsView.

Configurando o Pacote

Its Time to Nuget !!!! Vamos instalar o pacote CardsView em todos os nossos projetos :

Em seguida , tanto no Android como no iOS , precisamos inicializar o pacote com CardsViewRenderer.Preserve() após o Init do Xamarin.Forms :

Pronto! Agora é só utilizar :D

Utilizando e Comparando o Carousel

Para deixarmos a comparação justa eu vou implementar a mesma fonte de dados utilizado no exemplo do CarouselView.FormsPlugin neste aqui.

Vamos criar a ViewModel :

Warning: Não esqueça de adicionar as imagens no iOS e no Android

Vou deixar o Command , exatamente como utilizei no exemplo anterior. Adicionei apenas um "Position" para pegar a posição atual. Isto também existia no controle passado, eu acabei não utilizando na Época.

Muito bem, agora vamos implementar em nosso MainPage.Xaml :

Notem que eu adicionei 2 namespaces xmlns:cards=”clr-namespace:PanCardView;assembly=PanCardView” e
xmlns:controls=”clr-namespace:PanCardView.Controls;assembly=PanCardView”

É necessário utilizar 2 pois o CardView é modular. Os Indicators estão separados do controle principal. Mais a frente vamos ver o porque.

O que eu não vi foi uma opção de orientação ao Carousel.. O CarouselView.FormsPlugin me permitia orientação vertical e horizontal. Mas vamos seguir Rodando :

A esquerda temos o CardView e direita temos o CarouselView.FormsPlugin, ambos rodando de forma bem simples sem criar frames e etc… E utilizando uma View como source.

Perfomance vai ser meio difícil eu comparar , afinal são exemplos bem simples. Não é nenhum app complexo :P

Certo, e eventos , Commands e etc?

Assim como o controle anterior, o CardView possui um event chamado ItemSwiped ( ItemSwipedCommand para Command :P ) , com ele podemos saber que o item foi alterado no carousel.

Alem de também poder utilizar o SelectedIndex para isso em nossa ViewModel.

Lembra que eu falei dos Módulos ? Pois bem, é possível adicionar controles em nosso Carousel :

Nesse exemplo eu adicionei um frame e o LeftArrow/RightArrowControl , ele adiciona setas na esquerda e direita.

O legal de ser modular é que eu poderia adicionar apenas a seta da Direita por exemplo.

O controle CarouselView.FormsPlugin possui uma customização do IndicatorsTintColor , alem de podermos configurar o tipo de indicador com a propriedade IndicatorsShape.

Mas e o CardsView ?

Através de Styles :

Podemos configurar Styles tanto para o Selecionado, como o não selecionado :

Mas pelo que entendi o Indicador ainda só possui a opção de circulo.

Existe uma configuração muito legal tanto para os indicadores quanto para as setas, o ToFadeDuration. Com esta opção podemos definir o tempo de exibição dos controles na tela, ou seja se o carousel ficar parado eles desaparecem :O !

Vamos configurar da seguinte forma :

A medida utilizada na configuração é "segundos", ou seja como esta configurado após 1.5 Segundos vai sumir os indicadores e após 2.5 sem utilizar as setas, vamos rodar :

Muito legal , não?

Pra fechar existe a propriedade SlideShowDuration , onde podemos definir um intervalo para o Carousel exibir as imagens automaticamente.

Agora vem um destaque sensacional a esse controle. Alem do Carousel padrão , existem mais 3 implementações que podemos fazer.

CardsView, CoverFlowView e CubeView

Rodando :

O Lega é que podemos utilizar os controles igual no CarouselView :

Rodando :

Facil, facil não?

CoverFlowView: da mesma forma que o card, basta substituir o controle :

A propriedade IsCyclical , deixa escolhermos se vai ser cíclico ou não o efeito.

Rodando :

CubeView : pra fechar com chave de ouro o tipo de Carousel o cubo :

Rodando :

Ufa acho que abordei todos xD

Conclusão

Porem o CardsView tem muito mais opções de Carousel e a modularização dos controles me deixa mais confortável em customizar.

Pontos que eu melhoraria no CardsView :

1 — Possibilidade de outros tipos de indicadores

2 — Possibilidade de Carousel Vertical

Tirando isso, creio que por estar atualizado com mais frequência ,alem de ter mais mais funcionalidades, hoje o CardsView é meu Carousel principal :)


Update : Após publicar o artigo algumas considerações do Andrei :

Isso responde os 2 pontos que questionei :D

Fica aqui o agradecimento ao Andrei por ler o artigo , foi muito legal comparar os dois controles ;)


E na sua opinião, qual controle de Carousel é melhor? Comenta ae :D

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!