Xamarin Forms - Apresentando o FlexLayout - I

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

O FlexLayout é o novo leiaute disponível no Xamarin Forms e pode ser usado para empilhar ou envolver uma coleção de views filhas.

O FlexLayout fornece diferentes maneiras de alocar componentes na tela, facilitando o alinhamento, o design e a organização do espaço. Esse layout tem o poder de fornecer um tamanho proporcional melhor para os componentes internos, pois organiza elementos em uma proporção com base nas dimensões da tela e entre os elementos na tela. Mantendo assim sua view mais limpa e organizada.

Este layout é parecido com o StackLayout pois ele pode organizar seus filhos horizontalmente e verticalmente em uma pilha. No entanto, o FlexLayout também pode envolver seus filhos se houver muitas views para caber em uma única linha ou coluna, e também tem muitas opções para a orientação, alinhamento se adaptando a vários tamanhos de tela.

O FlexLayout deriva de Layout<View> e herda uma propriedade Children do tipo IList<View>, definindo seis propriedades vinculáveis públicas e cinco propriedades vinculáveis anexadas que afetam o tamanho, a orientação e o alinhamento dos elementos filhos.

Para facilitar o entendimento vamos iniciar apresentando alguns cenários comuns de uso do FlexLayout que descreve muitas dessas propriedades de modo mais informal.

  • Recursos Usados

    Criando o projeto no VS 2017

    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_FlexLayout1:

    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. ( Atualmente(08/2018) a versão mais atual estável é a 3.1.0)

    Usando o FlexLayout para empilhamento simples

    Podemos usar o FlexLayout para substituir o StackLayout usando uma notação mais simples.

    No exemplo a seguir vamos definir o código abaixo no arquivo MainPage.xaml, onde vamos organizar duas views Label , uma view Image e uma view Button.

    Estamos usando 3 propriedades no leiaute FlexLayout:

    1 - Direction - Esta propriedade é definida pelos valores da enumeração FlexDirection. O valor padrão é row.

    O valor definido no exemplo é Column que faz com que as views filhas do FlexLayout sejam organizadas em uma única coluna de itens.

    Quando os itens de um FlexLayout são organizados em uma coluna, o FlexLayout é considerado como tendo um eixo vertical principal e um eixo horizontal transversal.

    Assim, Direction indica a direção dos elementos na tela e os valores possíveis são:

    • Row - Organiza os elementos da esquerda para a direita de forma vertical; (padrão)
    • RowReverse -  Organiza os elementos da direita para a esquerda de forma vertical;
    • Column - Organiza os elementos do topo para a base de maneira horizontal;
    • ColumnReverse - Organiza os elementos da base para o topo de maneira horizontal;

    Row RowReverse
    Column ColumnReverse

    2 - AlignItens - Esta propriedade é do tipo FlexAlignItens e define o comportamento do alinhamento dos elementos no contâiner, especificando como os itens são alinhados no eixo transversal.

    No exemplo foi definido o valor Center que faz com que cada item seja centralizado horizontalmente.

    Se tivessemos usado um StackLayout em vez de uma FlexLayout para essa tarefa, poderíamos ter centralizado todos os itens por meio do uso da propriedade HorizontalOptions com o valor Center.

    A propriedade HorizontalOptions não funciona para os filhos de um FlexLayout, mas definindo uma única propriedade AlignItems obtemos o mesmo resultado. Se precisar você pode usar a propriedade bindable AlignSelf para substituir a propriedade AlignItems para itens individuais: Exemplo:      <Label Text="FlexLayout em Ação"  FontSize="Large" FlexLayout.AlignSelf="Start" />

    Com essa alteração, essa Label será posicionada na borda esquerda do FlexLayout quando a ordem de leitura for da esquerda para a direita.

    Os valores suportados para AlignItems são:

    • Start - Organiza os elementos no início do contâiner apenas obtendo um espaço de linha;
    • Center - Põe os elementos no centro do contâiner;
    • End - Organiza os elementos no fim do contâiner;
    • Stretch - Organiza os elementos no início do contâiner em um esticamento horizontal;

    Start Center
    End Stretch

    3 - JustifyContent - A propriedade JustifyContent é do tipo FlexJustify e especifica como os itens são organizados no eixo principal.

    A valor definido no exemplo foi SpaceEvenly e aloca todo o espaço vertical que sobra à esquerda igualmente entre todos os itens e acima do primeiro item e abaixo do último item.

    Se tivéssemos usado um StackLayout, teriamos que atribuir a propriedade VerticalOptions de cada item para o valor CenterAndExpand para conseguir um efeito semelhante. Ocorre que a opção CenterAndExpand iria alocar duas vezes mais espaço entre cada item que antes do primeiro item e depois do último item.

    Para imitar a opção CenterAndExpand de VerticalOptions podemos definir a propriedade JustifyContent com a opção SpaceAround.

    Os valores suportados para JustifyContent são:

    • Start - Organiza os elementos no ínicio do contâiner (padrão);

    • Center - Organiza os elementos no centro;

    • End - Organiza os elementos no fim;

    • SpaceAround - Começa com uma unidade de espaço para as bordas e duas unidades respectivas a outros elementos no contêiner.

    • SpaceBetween - Define o mesmo espaço entre os elementos;

    • SpaceEvenly - Define o mesmo espaço entre as bordas e os outros elementos no contêiner.

    Start

    Center

    End

    SpaceAround SpaceBetween SpaceEvenly

    Além dessas propriedades temos a propriedade Wrap que não foi usada no exemplo.

    4 - Wrap - Organiza a localização dos componentes. Por padrão, os elementos do FlexLayout são colocados todos em apenas uma linha. Com essa propriedade, podemos mudar esse comportamento.

    Temos os seguintes valores suportados:

    • NoWrap - Organiza todos os elementos na mesma linha; (padrão);

    • Wrap - Organiza os elementos em múltiplas linhas do topo para a base;

    • Reverse - Organiza os elementos em múltiplas linhas da base para  o topo;

    NoWrap Wrap Reverse

    Além de poder alterar o comportamento do Layout graças às suas propriedades principais, podemos adaptar diferentes opções usando as propriedades de cada elemento.

    A grande contribuição do FlexLayout é permitir que seus elementos sejam "flexíveis" e para isso podemos também usar as propriedades : FlexLayout.Grow e FlexLayout.Basis.

    A propriedade FlexLayout.Grow

    Essa propriedade nos permite ter ainda mais controle a organização dos itens no contâiner. O valor da propriedade pode ser de zero a qualquer valor numérico positivo.

    Por padrão, o valor da propriedade é 0. Esse valor faz com que o elemento não cresça para caber no espaço disponível. Se tivermos um elemento em um contêiner e definirmos o valor como 1, o elemento ocupará todo o espaço.

    Basicamente, essa propriedade define a capacidade de um elemento crescer, se necessário. Aceita um valor sem unidades que serve como proporção. Indica quanto espaço disponível no contêiner flexível deve ocupar o elemento.

    Se todos os elementos tiverem um crescimento flexível definido como 1, o espaço restante no contâiner será distribuído igualmente para todas as views filhas. Se uma das filhas tiver um valor de 2, o espaço restante ocuparia o dobro do espaço que as outras (ou pelo menos tentaria).

    A propriedade FlexLayout.Basis

    Essa propriedade define o tamanho padrão de um elemento antes que o espaço disponível restante seja distribuído. Pode ser uma proporção, por exemplo, uma porcentagem (5%, 25%, etc.). Você também pode usar algumas palavras invertidas, como Auto.

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

    Pegue o código aqui: XF_FlexLayout1.zip (sem as referências)

    "Porque o coração deste povo está endurecido,E ouviram de mau grado com seus ouvidos,E fecharam seus olhos;Para que não vejam com os olhos,E ouçam com os ouvidos,e compreendam com o coração,e se convertam,e eu os cure."
     Mateus 13:15

    Referências:

    José Carlos Macoratti