Fala, galera!
Tentando manter a periodicidade semanal, chegamos novamente com uma dica rápida de Xamarin.Forms!
Se você perdeu alguma parte desta série, veja as que já saíram:
- Xamarin Rocket – Parte 01: LineBreakMode
- Xamarin Rocket – Parte 02: alterando o espaço das linhas e colunas do Grid
- Xamarin Rocket – Parte 03: tela cheia, ocultando a barra de status
- Xamarin Rocket – Parte 04: imagens em botões
- Xamarin Rocket – Parte 05: 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 performance do seu aplicativo está sendo totalmente afetada.
Para criar tabelas e layouts mais complexos, eu sempre recomendo o Grid , e aqui vão algumas dicas de como utilizá-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 seu controle sobre como sua tela se comportará – principalmente se for uma ViewCell.
Nas linhas configuramos sua altura, e nas colunas, a largura.
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Existem três 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 terá um tamanho fixo:
<RowDefinition Height=”80" />
- Estrela (Star): expande proporcionalmente ao tamanho do espaço. Por exemplo, se eu configurar assim:
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="2*" />
<RowDefinition Height="6*" />
</Grid.RowDefinitions>
Isso quer dizer que as linhas vão ocupar 20%, 20% e 60% do espaço disponível.
Sendo assim, no exemplo:
<Grid VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<BoxView BackgroundColor="Blue" Grid.Row="0" />
<BoxView BackgroundColor="DarkOrchid" Grid.Row="0" Grid.Column="1" />
<BoxView BackgroundColor="Black" Grid.Row="1" Grid.Column="0" />
<BoxView BackgroundColor="DarkSeaGreen" Grid.Row="1" Grid.Column="1" />
<BoxView BackgroundColor="Magenta" Grid.Row="2" Grid.Column="0" />
<BoxView BackgroundColor="DarkRed" Grid.Row="2" Grid.Column="1" />
</Grid>
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. Isso é feito através das tags Grid.Row=”0" Grid.Column=”1"
.
Caso não especifique a linha e a coluna, o padrão será 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:
<Grid VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="6*" />
</Grid.ColumnDefinitions>
<BoxView BackgroundColor="Blue" Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" />
<BoxView BackgroundColor="DarkOrchid" Grid.Row="0" Grid.Column="1" />
<BoxView BackgroundColor="Black" Grid.Row="1" Grid.Column="1" />
</Grid>
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 dá pra fazer qualquer coisa:
É uma dica bem simples, mas que ajuda muito!
Caso queira baixar o código utilizado no exemplo, acesse este link.
Quer ver outros artigos sobre Xamarin? Clique aqui.
Espero ter ajudado.
Aquele abraço!