Xamarin Forms - Apresentando o FlexLayout

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

Referências:

José Carlos Macoratti