CarouselView.FormsPlugin Vs CardsView
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!
