Layouts – Xamarin.Forms

Com Xamarin.Forms você tem diferentes formas de organizar seu conteúdo na tela, e hoje irei falar um pouco sobre cada uma delas.

Caso possua alguma dúvida sobre o que é Xamarin.Forms recomendo ler o post Introdução ao Xamarin.Forms .

StackLayout

Layouts - Copia

O StackLayout consiste em dispor os elementos em pilhas, podendo ser Horizontal ou Vertical. É considerada a forma mais simples dentre as cinco abordadas nesse post, a ordem dos elementos segue a ordem que foi adicionado no código.
Com StackLayout é possível utilizar “LayoutOptions” para determinar o posicionamento do elemento, são eles: VerticalOptions e HorizontalOptions. Para cada um deles você pode utilizar um dos seguintes valores:

Start – Coloca o elemento no início do Layout.
Center – Centraliza o elemento no centro do Layout.
End – Coloca o elemento no final do Layout (Embaixo caso seja utilizado no VerticalOptions, ou à direita caso seja utilizado no HorizontalOptions)
Fill – Permite que o elemento preencha espaços vazios.

AbsoluteLayout

Layouts - Copia(1)
O AbsoluteLayout é usado para dispor os elementos em posições absolutas, definindo coordenadas e tamanhos. Esses valores podem ser definidos com valores estáticos ou proporcionais.

Os valores estáticos definem onde os elementos serão posicionados no layout e o seu tamanho, são definidos utilizando coordenadas (x,y) e o tamanho exato (Altura, Largura).

Exemplo: AbsoluteLayout.LayoutBounds = “x, y, Altura, Largura”

RelativeLayout

Layouts - Copia (2)

Exibe os elementos da view em posições relativas. A posição de um elemento pode ser definida de acordo com a posição definida para outro elemento, por exemplo: “Ao lado esquerdo ou abaixo de um determinado elemento”.

Também é possível determinar a posição de acordo com a posição relativa da própria área (RelativeLayout).

Exemplo: “Na parte inferior à esquerda do centro ”

 

Grid

Layouts - Copia (3)
Usado para organizar os elementos da view em linhas e colunas. As linhas e as colunas podem ser configuradas para possuírem tamanhos proporcionais ou tamanhos absolutos.

Não deve ser confundido com tabelas tradicionais, pois não se destina a apresentar dados tabulados, também não possui o conceito de formatação de linha, coluna ou célula. Neste caso Grid é totalmente destinado a colocar conteúdo.

ScrollView

Layouts - Copia (4)

O ScrollView é utilizado para apresentar vários elementos da view que não cabem todos na tela.

Por exemplo, Uma tela de formulário com vários campos que necessitam ser preenchidos a partir dos dados informados  pelo teclado. O ScrollView possibilita apresentar o teclado na tela sem sobrepor os elementos. Dessa forma todos os elementos podem ser acessados através do movimento de rolagem.

Outro fator de grande relevância no uso do ScrollView é a variedade de dispositivos,  ele garante que todos os elementos serão apresentados em dispositivos de diferentes tamanhos.

Por exemplo, um layout que ocupa a tela inteira de um iPhone 7 plus pode ser cortado em um iPhone SE. O uso de um ScrollView possibilita que as partes cortadas do layout sejam exibidas na tela menor.

 

Essas foram as principais formas de organizar os elementos na tela do seu aplicativo Xamarin.Forms.

 

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

w

Conectando a %s