Xamarin Forms - Apresentando o FlexLayout - II

 Neste artigo vou apresentar os conceitos sobre o FlexLayout que foi  introduzido na versão 3.0 do Xamarin Forms.

Continuando a primeira parte do artigo vamos continuar abordando os recursos do FlexLayout.

Veremos agora um exemplo de como usar o FlexLayout para envolver views filhas em linhas ou colunas adicionais usando as propriedades Wrap e JustfyContent.

Vamos exibir uma lista de fotos que esta neste endereço: https://developer.xamarin.com/demo/stock.json usando um leaiute FlexLayout.

Vamos baixar as imagens e criar uma coleção de imagens atribuindo as imagens à coleção Children do FlexLayout.

  • Recursos Usados

    Usando o projeto Xamarin.Forms

    Vamos usar o projeto  XF_FlexLayout1 criado no artigo anterior e incluir uma nova Content Page com o nome FlexLayoutPage.xaml. Para poder exibir esta página basta alterar o código do arquivo App.xaml.cs conforme abaixo:

    ....
    	public App ()
    	{
    		InitializeComponent();
    		MainPage = new FlexLayoutPage();
    	}
    ...

    Usando o FlexLayout para envolvimento automático de itens

    No exemplo vamos definir uma página XAML onde vamos organizar duas views Label , uma view Image e uma view Button.

    Estamos usando os seguintes elementos:
    • Grid
    • ScrollView
    • FlexLayout
    • ActivityIndicator

    Observe que o FlexLayout é um filho de um ScrollView, assim, se houver muitas linhas para caber na página, a view ScrollView tem uma propriedade padrão Orientation com valor Vertical que permite a rolagem vertical.

    No código XAML estamos usando 2 propriedades no leiaute FlexLayout: Wrap e JustifyContent.

    Como não definimos a propriedade Directions ela é configurada com o valor padrão que é : Row, e isso indica que os filhos serão organizados em linhas e o eixo principal é o eixo horizontal.

    A propriedade Wrap, como já vimos, atua assim: se houver itens demais para caber em uma linha, a configuração dessa propriedade faz com que os itens 'quebrem' para a próxima linha.

    A propriedade JustifyContent vai alocar o espaço remanescente no eixo principal (o eixo horizontal), de modo que cada item fica com a mesma quantidade de espaço em branco.

    Vamos a seguir definir o código do arquivo FlexLayoutPage.xaml.cs que vai acessar uma coleção de fotos e vai adicioná-la à coleção Children do FlexLayout.

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Net;
    using System.Runtime.Serialization;
    using System.Runtime.Serialization.Json;
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;
    namespace XF_FlexLayout1
    {
        [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class FlexLayoutPage : ContentPage
        {
            // Classe para deserializar uma lista JSON de bitmaps
            [DataContract]
            class ImageList
            {
                [DataMember(Name = "photos")]
                public List<string> Photos = null;
            }
            public FlexLayoutPage ()
            {
                InitializeComponent();
                LoadBitmapCollection();
            }
            async void LoadBitmapCollection()
            {
                //define as dimensões para as plataformas iOS e Android
                int dimensaoImagem = Device.RuntimePlatform == Device.iOS ||
                                                   Device.RuntimePlatform == Device.Android ? 240 : 120;
                string urlSuffix = String.Format("?width={0}&height={0}&mode=max", dimensaoImagem);
                using (WebClient webClient = new WebClient())
                {
                    try
                    {
                        // baixa a lista de fotos
                        Uri uri = new Uri("http://docs.xamarin.com/demo/stock.json");
                        byte[] data = await webClient.DownloadDataTaskAsync(uri);
                        // Converte o strem para objeto
                        using (Stream stream = new MemoryStream(data))
                        {
                            // Deserializa o JSON em um objeto ImageList
                            var jsonSerializer = new DataContractJsonSerializer(typeof(ImageList));
                            ImageList listaImagens = (ImageList)jsonSerializer.ReadObject(stream);
                            // Cria um objeto image para cada bitmap
                            foreach (string caminhoArquivo in listaImagens.Photos)
                            {
                                Image imagem = new Image
                                {
                                    Source = ImageSource.FromUri(new Uri(caminhoArquivo + urlSuffix))
                                };
                                //adiciona a imagem a coleção Children do FlexLayout
                                flexLayout.Children.Add(imagem);
                            }
                        }
                    }
                    catch
                    {
                        flexLayout.Children.Add(new Label
                        {
                            Text = "Não foi possível acessar a lista de arquivos bitmaps"
                        });
                    }
                }
                //exibe o activityIndicator
                activityIndicator.IsRunning = false;
                activityIndicator.IsVisible = false;
            }
        }
    }

    Executando o projeto iremos obter o seguinte resultado:

    Assim, de forma bem simples, usamos o FlexLayout para exibir uma coleção de imagens. Podemos além de exibir as imagens também rolar a tela graças ao ScrollView.

    Pegue o código aqui:  XF_FlexLayout2.zip

    Na próxima parte do artigo vou continuar a tratar do leiaute FlexLayout.

    Havendo Deus antigamente falado muitas vezes, e de muitas maneiras, aos pais, pelos profetas, a nós falou-nos nestes últimos dias pelo Filho; A quem constituiu herdeiro de tudo, por quem fez também o mundo.
    Hebreus 1:1,2

    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 ?

      Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

    Referências:


    José Carlos Macoratti