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
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!
