Xamarin Forms - Carousel de Imagens com CardsView
 Neste tutorial vamos criar um visualizador de imagens usando os plugins CardsView e FFImageLoading para exibir um carousel de imagens no Xamarin Forms.

Nada como um bom plugin para resolver um problema e deixar o desenvolvedor feliz. Não é mesmo ???

Ao usar um plugin fique atento no histórico de atualizações, e, confira se o mesmo esta sendo mantido e atualizado com frequência para não usar um plugin depreciado que vai quebrar o seu código.

Neste tutorial vamos usar dois plugins :

  1. CardsView - Este plugin permite criar aplicativos CardsView em aplicativos Xamarin.Forms, como semelhante ao Tinder;
  2. FFImageLoading.Forms - É uma biblioteca para carregar imagens de forma rápida e fácil no ecosistema Xamarin, incluindo ai o Xamarin Forms;

Neste exemplo vamos criar um carousel de imagens obtidas a partir de uma URL cujos dados foram definidos em um arquivo JSON. Assim teremos que acessar o arquivo JSON -  DataCollectorJson.json - onde iremos definir as informações que vamos exibir.

Para deserializar as informações JSON vamos precisar do pacote Newtowsoft.Json no projeto.

Assim juntando os dois plugins e o pacote JSON vamos criar uma galeria de imagens roláveis com dados obtidos de um arquivo JSON.

recursos usados:

Criando o projeto Xamarin Forms

Abra o  VS 2017 Community e clique em New Project e a seguir escolha Cross Platform -> Mobile App (Xamarin.Forms) e informe o nome XF_CardCarousel;

A seguir selecione a Plataforma (eu marquei somente Android) e escolha a estratégia de compartilhamento que será .NET Standard.

Clique no botão OK.

Pronto, nosso projeto já esta criado.

Vamos incluir agora a referência aos plugins em nosso projeto.

No menu Tools, clique em Nuget Package Manager e a seguir em Manage Nuget Packages for Solution;

Selecione os seguintes pacotes :

E instale-os em todos os projetos.

Ao final teremos o projeto pronto para usar os recursos que vamos tratar.

Fazendo o ajuste no projeto Android

Segundo a documentação temos que fazer a inicialização do plugin FFImageLoading incluindo a seguinte linha de código:

FFImageLoading.Forms.Platform.CachedImageRenderer.Init();

no iOS, no arquivo AppDelegate.

Para o Android inclua a seguinte linha de código:

FFImageLoading.Forms.Platform.CachedImageRenderer.Init(enableFastRenderer: [true]/[false]);

no método OnCreate do arquivo MainActivity.cs como mostrado a seguir:

        protected override void OnCreate(Bundle savedInstanceState)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;
            base.OnCreate(savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            FFImageLoading.Forms.Platform.CachedImageRenderer.Init(enableFastRenderer:true);
            LoadApplication(new App());
        }

Definindo o modelo e o arquivo JSON

Vamos definir um modelo de domínio criando uma pasta Model no projeto e a seguir criando uma classe MainModel nesta pasta com o código abaixo:

    public class MainModel
    {
        public string Source { get; set; }
        public int Ind { get; set; }
        public string Color { get; set; }
    }

A seguir crie uma pasta chamada MetaData e crie um arquivo no formato JSON nesta pasta chamado DataCollectorJson.json com o código a seguir:

 [
  {
    "Source": "http://www.macoratti.net/Imagens/animais/tigre.jpg",
    "Color": "White"
  },
  {
    "Source": "http://www.macoratti.net/Imagens/animais/esquilo.jpg",
    "Color": "White"
  },
  {
    "Source": "http://www.macoratti.net/Imagens/animais/pato.jpg",
    "Color": "White"
  },
  {
    "Source": "http://www.macoratti.net/Imagens/animais/cao1.jpg",
    "Color": "White"
  },
  {
    "Source": "http://www.macoratti.net/Imagens/animais/cao2.jpg",
    "Color": "White"
  },
  {
    "Source": "http://www.macoratti.net/Imagens/animais/cao3.jpg",
    "Color": "White"
  },
  {
    "Source": "http://www.macoratti.net/Imagens/animais/tucano.jpg",
    "Color": "White"
  },
  {
    "Source": "http://www.macoratti.net/Imagens/animais/gato.jpg",
    "Color": "White"
  },
  {
    "Source": "http://www.macoratti.net/Imagens/animais/coelho.jpg",
    "Color": "White"
  },
  {
    "Source": "http://www.macoratti.net/Imagens/animais/cobra.jpg",
    "Color": "White"
  }
]

Neste arquivo definimos as propriedades Source com a url da imagem que vamos exibir e Color com a cor de fundo da imagem.

Também precisamos definir a propriedade Build Action deste arquivo como Embedded resource.

Criando uma ViewModel para obter os dados

Cria na raiz do projeto o arquivo MainPageViewModel.cs com o código abaixo:

using Newtonsoft.Json;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Reflection;
using XF_CardCarousel.Model;

namespace XF_CardCarousel
{
    public class MainPageViewModel  
   {
        private ObservableCollection<MainModel> imagemInfo;
        public ObservableCollection<MainModel> ImagemInfo
        {
            get { return imagemInfo; }
            set { this.imagemInfo = value; }
        }

        public MainPageViewModel ()
        {
            GeraDadosImagens();
        }

        private void GeraDadosImagens()
        {
            var nodeImageInfo = new ObservableCollection<MainModel>();

            Assembly assembly = typeof(MainPage).GetTypeInfo().Assembly;

            Stream stream = assembly.GetManifestResourceStream("XF_CardCarousel.MetaData.DataCollectorJson.json");

            using (var reader = new StreamReader(stream))
            {
                var json = reader.ReadToEnd();

                List<MainModel> minhaListaImagens = JsonConvert.DeserializeObject<List<MainModel>>(json);
                ImagemInfo = new ObservableCollection<MainModel>(minhaListaImagens);
            }
        }
    }
}

Criamos a propriedade ImagemInfo do tipo ObservableCollection para o MainModel.

A seguir no construtor chamamos o método GeraDadosImagens que acessa o arquivo JSON e retorna as informações das imagens a exibir.

Criando a interface com o usuário

Abra o arquivo MainPage.xaml e Inicialmente incluia os seguintes namespaces:

xmlns:controls="clr-namespace:PanCardView.Controls;assembly=PanCardView"
xmlns:cards="clr-namespace:PanCardView;assembly=PanCardView"
xmlns:ffimage="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"

Abaixo o código completo:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF_CardCarousel"
             xmlns:controls="clr-namespace:PanCardView.Controls;assembly=PanCardView"
             xmlns:cards="clr-namespace:PanCardView;assembly=PanCardView"
             xmlns:ffimage="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms" 
             BackgroundColor="Black"
             x:Class="XF_CardCarousel.MainPage">
    <ContentPage.BindingContext>
        <local:MainPageViewModel/>
    </ContentPage.BindingContext>
    <cards:CarouselView 
        ItemsSource="{Binding ImagemInfo}"
        SlideShowDuration="3500"
        SelectedIndex="{Binding CurrentIndex}">
        <cards:CarouselView.ItemTemplate>
            <DataTemplate>
                <ContentView>
                    <Frame 
                        VerticalOptions="Center"
                        HorizontalOptions="Center"
                        HeightRequest="300"
                        WidthRequest="300"
                        Padding="0" 
                        HasShadow="false"
                        IsClippedToBounds="true"
                        CornerRadius="10"
                        BackgroundColor="{Binding Color}">
                        <ffimage:CachedImage Source="{Binding Source}"/>
                    </Frame>
                </ContentView>
            </DataTemplate>
        </cards:CarouselView.ItemTemplate>
        <controls:IndicatorsControl ToFadeDuration="1500"/>
        <controls:LeftArrowControl ToFadeDuration="2500"/>
        <controls:RightArrowControl ToFadeDuration="2500"/>
    </cards:CarouselView>
</ContentPage>

 

No código estamos vinculando o BindingContext ao nosso ViewModel, e, a seguir definimos a exibição das imagens no Cards.

Observe que usamos CachedImage que faz o papel da classe Image para acessar e exibir as imagens.

Executando o projeto iremos obter o seguinte resultado:

Pegue o código do projeto compartilhado aqui :  XF_CardCarousel.zip

"Não sejais vagarosos no cuidado; sede fervorosos no espírito, servindo ao Senhor;
Alegrai-vos na esperança, sede pacientes na tribulação, perseverai na oração;"
Romanos 12:11,12

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti