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

O FlexLayout é o novo layout disponível no Xamarin Forms e pode ser usado para empilhar ou envolver uma coleção de views filhas. Ele 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 uma proporção melhor para os componentes internos, pois organiza elementos 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 e 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:

• Visual Studio 2017 Community
• Xamarin

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.

Para finalizar esta etapa, clique no botão OK.

Pronto. Nosso projeto já está criado.

Usando o FlexLayout para empilhamento simples

Podemos usar o FlexLayout para substituir o StackLayout através de uma notação mais simples.

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

Estamos usando três propriedades no layout 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

• 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 tivéssemos 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

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

O 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, teríamos que atribuir a propriedade VerticalOptions de cada item para o valor CenterAndExpand para conseguir um efeito semelhante. Ocorre que a opção CenterAndExpand alocaria 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 inicio 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

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 todos colocados 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

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 também podemos usar as propriedades FlexLayout.Grow e FlexLayout.Basis.

A propriedade FlexLayout.Grow

Essa propriedade nos permite ter ainda mais controle na 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 layout FlexLayout.

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