TRABALHANDO COM FLEXLAYOUT NO XAMARIN FORMS

DESIGN ADAPTADO USANDO FLEXLAYOUT (MOBILE)

Escrito  por David Ortinau,

Traduzido por Adriano D’lucca 

O Xamarin.Forms é fantástico para um rápido envio de um único código para varias plataformas e dispositivos. Assim que estiver presentes em todas essas telas diferentes, você precisará ter certeza que sua Interface de usuário pareça como você imaginou, e até adapte o layout para seus objetivos específicos. O FlexLayout faz isso mais fácil do que nunca, e te dá novas opções para espaçar e distribuir sua interface de usuário para colocar em diferentes dimensões.

Deixa Fluir

As tags Children colocada em um FlexLayout container irão fluir tanto na linha horizontal quanto em uma coluna vertical, chamado de eixo principal. Isso é setado pela propriedade de Direção. Usando essa propriedade sozinha, o container se comporta como um StackLayour. Abaixo temos uma página de login que irá mostrar.

O interior do layout coloca um label e entra de forma vertical configurado pelo flex-directon com a propriedade coluna do CSS

Nota: Se o CSS não for sua preferência, essas propriedades também estarão disponíveis em XAML e C #. <FlexLayout Direction="Column" ...>.

Para adicionar a linha e a coluna (padrão), você também pode mudar a ordem da “Children” usando a “ColumnReverse” e “RowReverser”. Vamos ver um StackLayout fazer isso”

Note como o form de Login está centralizado na tela. Isso é algo que o FlexFlayout faz facilmente usando “align-items” para centralizar junto com os eixos escolhidos (nesse caso o Y ou eixo vertical), e o “justify-content” para distribuir as “children” para o centro do container (nesse caso junto com outros eixos).

Baixe este exemplo do GitHub https://github.com/davidortinau/flexibility.

Envolva-o para ir

Agora que você viu como o FlexLayout irá fluir o conteúdo da sua view, o que acha quando seu conteúdo ultrapassa a largura ou altura?

É agora que você toma vantagem de amarrar. Você pode escolher muitas opções :

  • wrap
  • nowrap
  • reverse

Vamos dizer que seu aplicativo tem um grid de conquistas assim como esse mostrado no demo da Conference Vision da Build 2018.  Você popula o container com uma serie de itens iguais e quer ter a certeza que eles fluiram na mesma direção.


Assim como você usou o justify-content no exemplo prévio para centralizar o container de login com a view, você pode usar essa propriedade aqui para uniformizar o espaço do conteúdo. Escolha:

Center Indicates that child elements will be grouped toward the center of the parent.
End Indicates that child elements will be justified to the end of the line.
SpaceAround Indicates that child elements will be spaced with one unit of space at the beginning and end, and two units of space between them, so that the elements and the space fill the line.
SpaceBetween Indicates that child elements will be spaced with equal space between units and no space at either end of the line, so that the elements and the space fill the line.
SpaceEvenly Indicates that child elements will be spaced to have the same space between each element as there is between the beginning and end elements and the nearest edges of the parent.
Start Indicates that child elements will be justified to the start of the line.

Fonte: Docs

Explore mais como o FlexLayout foi usado no app Conference Vision pelo link do GitHub:

https://github.com/microsoft/ConferenceVision.

Posicionando no espaço

Construindo nesses exemplos, vamos explorar um layout mais avançado onde você quer espaçar o conteúdo proporcionalmente. Voltando ao exemplo da flexibilidade, há uma foto da página que amarra fotos e também redimensiona por porcentagem. Vamos dizer que você tem 3 imagens na linha por padrão, mas ocorre que você quer a imagem cheia, ou 2 imagens por linha; Você pode usar a propriedade “flex-basis” para ver por posição.

⠀⠀

O “Basis” é o quanto o item toma dos eixos principais. Nesse caso estamos trabalhando juntamente com o eixo X (flex-direction:row). O “Basis” é colocado no dispositivo por pixels ou porcentagem, fazendo então, um poderoso layout responsivo. Atribuindo as classes abaixo para as imagens do conteúdo, você pode posicionar nesse incrível grid.


Para um exemplo adicional de como usar o “Basis”, de uma olhada neste this Grid page sample.

Layout Avançado

O FlexLayout também pode ser usado para situações mais avançadas como esta página. Você pode construir nos mesmos métodos abaixo para facilmente conseguir. Abaixo está um layout que amarra linhas e usa um truque para alinhar. Para forçar a quebra de linha, adicione um elemento vazio com a “basis” em 100%.

⠀⠀

Há muitas outras propriedades que virão na sua mão quando começar a usar o FlexLayout, como “Grow” e “Shrink”. Essas propriedades fazem o que elas dizem. O “Grow” padroniza o 0 e qualquer numero positivo que ira ocupar o espaço disponível junto com o eixo principal. Isso é útil quando você quer que alguma coisa consuma o espaço disponível entre os eixos. O “Shrink”, por sua vez, fará o oposto, o padrão 0 ira ter certeza que não ira encolher se o irmão tentar ocupar mais espaço, quando o padrão usa um número positivo, ira permitir que o elemento entregue espaço a outro.

Note que os elementos “.year”, .”rating”, “.lenght” tem “flex-grow:1;” que ira forçar eles a ocupar mais espaço do que eles conseguem, dando um bom espaço e puxando a estrela principal para o lado. Use essas propriedades e veja como elas se adaptam.

Adaptando ao Layout do Tablet

Quando o design do layout não for apenas para mobiles, mas também para tablets, você pode ir longe com a flexibilidade do FlexLayout e usar a porcentagem para setar o “basis”. Irá chegar um tempo que você precisará de um layout diferente, que levemente se ajustará ao outro tamanho de tela. Para isso, você pode usar o “OnIdiom”. Esse pequeno ajudante, similar ao “OnPlataform”, deixara você especificar o estilo baseado no “idioma”: desktop, celular, tv e relógio.

Veja o primeiro exemplo, de uma pagina de login, e considere como você pode mover o form de login para a direita da tela no tablete enquanto coloca uma imagem na esquerda.

Nesse layout, colocamos a nova imagem logo após o form de login, e usamos a margem para dar mais espaço. Para ter certeza que aparecera apenas em tablets, usamos o “OnIdiom” para deixar visível.

⠀⠀

Quando usamos “justify-content: center” o FlexLayout irá espaçar as coisas para melhor, Isso deixará o layout Incrivel!Nota: O “OnIdiom” é novo no Xamarin.Forms 3.2.0, então tenha certeza de atualizar para a ultima versão para usar. Para um exemplo antigo acesse unit test sample here.

 ⠀

Começando a usar o FlexLayout hoje com o Xamarin.Forms

Atualize seus projetos para o Xamarin.Forms 3.1.0 hoje via Gerenciador de Pacotes do Visual Studio e aproveite a ultima release estável com o FlexLayout. E se quiser receber as novas atualizações, olhe a prévia do Xamarin.Forms 3.2.0 como o “OnIdiom” e muito mais!

FONTE:  blog.xamarin.com

 

RelatedPost

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *