CarouselView.FormsPlugin Vs CardsView

Thiago Bertuzzi

Jun 28, 2019·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 :