Xamarin Rocket #6 — Como utilizar o GridLayout

Fala galera,

Tentando manter a periodicidade semanal chegamos novamente com uma dica rápida de Xamarin.Forms!

A ideia é ser um artigo bem rápido e todas as dicas vão ficar em um único repositório, se você perdeu algum veja as que ja saíram :

· Xamarin Rocket #1 — LineBreakMode

· Xamarin Rocket #2 — Alterando o espaço das linhas e colunas do Grid

· Xamarin Rocket #3 — Tela Cheia, ocultando a barra de status

· Xamarin Rocket #4 — Imagens em botões

· Xamarin Rocket #5— Notificação ao alterar a conexão


Layout é o pilar do Xamarin.Forms, como criar uma interface sem um Layout é a pergunta chave..

Existem diversos tipos de layouts para Xamarin.Forms, e um dos mais usados e customizáveis é o Grid!

Tem muita gente utilizando StackLayout para simular Grid/Tabela, colocando um dentro do outro… Se você faz isso, pare agora! A perfomance do seu aplicativo esta sendo totalmente afetada.

Para criar tabelas, layouts mais complexos eu sempre recomendo o Grid :), e aqui vão algumas dicas de como utiliza-lo :

1 — Configurando o tamanho das Colunas e Linhas

A primeira dica que eu dou, é sempre configurar o tamanho das linhas e das colunas do Grid. Isso evita problemas de interface e facilita que você esteja no controle de como sua tela ira se comportar.. Principalmente se for uma ViewCell.

Nas linhas configuramos sua altura e nas colunas a largura.

Existem 3 formas de limitar/configurar o tamanho :

Automático (Auto) : A Coluna/Linha se adaptará ao tamanho do controle filho.

<RowDefinition Height=”Auto” />

Absoluto (você define um valor) : A Coluna/Linha ira ter um tamanho fixo.

<RowDefinition Height=”80" />

Estrela (Star) : Expande proporcionalmente ao tamanho do espaço. Por exemplo se eu configurar assim :

Isso quer dizer que as linhas vão ocupar 20%,20% e 60% do espaço disponível.

Sendo assim no exemplo :

Teríamos um Grid :

2 — Elementos, Colunas ,Linhas e Span :

Se você notar no exemplo acima cada controle foi incluído em uma linha e coluna diferente, isto é feito através das tags Grid.Row=”0" Grid.Column=”1".

Caso você não especifique a linha e a coluna, o padrão sera 0.

É possível utilizar a propriedade Span , como Grid.ColumnSpan ou Grid.RowSpan. Com essas duas podemos dizer que um controle ocupa mais de uma linha ou coluna :

Temos :

É bem simples!!

3 — Espaço

Caso queira configurar um espaço entre as linhas e colunas basta utilizar as propriedades RowSpacing e ColumnSpacing ou na tag do grid :

<Grid RowSpacing=”20" ColumnSpacing=”20" VerticalOptions=”CenterAndExpand”>

Então temos :

Dominando as propriedades do Grid da pra fazer qualquer coisa :

É uma dica bem simples mas que ajuda muito :D

Caso queira baixar o código utilizado no Exemplo: Clique aqui.

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!