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!