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

Antes de mais nada é bom dizer que este controle não é apenas um CarouselView, é um pacote de controles com CardsView, CarouselView, CoverFlowView e CubeView. Sim, tudo isso em um só pacote!

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

CardsView: Praticamente temos a mesma implementação, apenas mudamos de Carousel para CardsView :

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

CarouselView.FormsPlugin é um controle muito bom, era o que eu utilizava para Carousel em meus projetos.

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!

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