Opções de layout em Xamarin.Forms
Cada Xamarin.Forms modo de exibição tem as propriedades HorizontalOptions e VerticalOptions, do tipo LayoutOptions. Este artigo explica o efeito que cada valor de LayoutOptions tem no alinhamento e expansão de um modo de exibição.
Visão geral
A LayoutOptions
estrutura encapsula duas preferências de layout:
- Alinhamento – o alinhamento preferencial da exibição, que determina sua posição e tamanho dentro de seu layout pai.
- Expansão – usada apenas por um
StackLayout
, e indica se a exibição deve usar espaço extra, se estiver disponível.
Essas preferências de layout podem ser aplicadas a um View
, relativo a seu pai, definindo a HorizontalOptions
propriedade ou VerticalOptions
do View
para um dos campos públicos da LayoutOptions
estrutura. Os campos públicos são os seguintes:
Os Start
campos , Center
, End
e Fill
são usados para definir o alinhamento do modo de exibição no layout pai:
- Para alinhamento horizontal,
Start
posiciona oView
no lado esquerdo do layout pai e, para alinhamento vertical, posiciona oView
na parte superior do layout pai. - Para alinhamento horizontal e vertical,
Center
centraliza horizontal ou verticalmente oView
. - Para alinhamento horizontal,
End
posiciona oView
no lado direito do layout pai e, para alinhamento vertical, posiciona oView
na parte inferior do layout pai. - Para alinhamento horizontal,
Fill
garante que oView
preenche a largura do layout pai e, para alinhamento vertical, garante que oView
preenche a altura do layout pai.
Os StartAndExpand
valores , CenterAndExpand
, EndAndExpand
e FillAndExpand
são usados para definir a preferência de alinhamento e se a exibição ocupará mais espaço se disponível no pai StackLayout
.
Observação
O valor padrão das propriedades HorizontalOptions
e VerticalOptions
de uma exibição é LayoutOptions.Fill
.
Alinhamento
O alinhamento controla como um modo de exibição é posicionado em seu layout pai quando o layout pai contém espaço não utilizado (ou seja, o layout pai é maior do que o tamanho combinado de todos os seus filhos).
A StackLayout
apenas respeita os Start
campos , Center
, End
e Fill
LayoutOptions
em modos de exibição filho que estão na direção oposta à StackLayout
orientação. Portanto, os modos de exibição filho dentro de um orientado StackLayout
verticalmente podem definir suas HorizontalOptions
propriedades para um dos Start
campos , Center
, End
ou Fill
. Da mesma forma, os modos de exibição filho em uma orientação StackLayout
horizontal podem definir suas VerticalOptions
propriedades como um dos Start
campos , Center
, End
ou Fill
.
A StackLayout
não respeita os Start
campos , Center
, End
e Fill
LayoutOptions
em modos de exibição filho que estão na mesma direção que a StackLayout
orientação. Portanto, um orientado StackLayout
verticalmente ignora os Start
campos , Center
, End
ou Fill
se eles estiverem definidos nas VerticalOptions
propriedades de modos de exibição filho. Da mesma forma, uma orientação StackLayout
horizontal ignora os Start
campos , End
Center
, ou Fill
se eles estiverem definidos nas HorizontalOptions
propriedades de modos de exibição filho.
Observação
LayoutOptions.Fill
geralmente substitui solicitações de tamanho especificadas usando as HeightRequest
propriedades e WidthRequest
.
O exemplo de código XAML a seguir demonstra uma orientação StackLayout
vertical onde cada filho Label
define sua HorizontalOptions
propriedade para um dos quatro campos de alinhamento da LayoutOptions
estrutura:
<StackLayout Margin="0,20,0,0">
...
<Label Text="Start" BackgroundColor="Gray" HorizontalOptions="Start" />
<Label Text="Center" BackgroundColor="Gray" HorizontalOptions="Center" />
<Label Text="End" BackgroundColor="Gray" HorizontalOptions="End" />
<Label Text="Fill" BackgroundColor="Gray" HorizontalOptions="Fill" />
</StackLayout>
O código C# equivalente é mostrado abaixo:
Content = new StackLayout
{
Margin = new Thickness(0, 20, 0, 0),
Children = {
...
new Label { Text = "Start", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Start },
new Label { Text = "Center", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Center },
new Label { Text = "End", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.End },
new Label { Text = "Fill", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Fill }
}
};
O código resulta no layout mostrado nas seguintes capturas de tela:
Expansão
A expansão controla se uma exibição ocupará mais espaço, se disponível, dentro de um StackLayout
arquivo . Se o StackLayout
espaço não utilizado contiver (ou seja, o StackLayout
for maior que o tamanho combinado de todos os seus filhos), o espaço não utilizado será compartilhado igualmente por todos os modos de exibição filho que solicitarem expansão definindo suas HorizontalOptions
propriedades ou VerticalOptions
como um LayoutOptions
campo que usa o AndExpand
sufixo. Observe que quando todo o espaço no StackLayout
é usado, as opções de expansão não têm efeito.
Um StackLayout
só pode expandir exibições filho na direção de sua orientação. Portanto, um orientado StackLayout
verticalmente pode expandir modos de exibição filho que definem suas VerticalOptions
propriedades como um dos StartAndExpand
campos , CenterAndExpand
, EndAndExpand
ou FillAndExpand
, se o StackLayout
contém espaço não utilizado. Da mesma forma, uma orientação StackLayout
horizontal pode expandir modos de exibição filho que definem suas HorizontalOptions
propriedades para um dos StartAndExpand
campos , CenterAndExpand
, EndAndExpand
ou FillAndExpand
, se o StackLayout
contém espaço não utilizado.
A StackLayout
não pode expandir as visualizações da criança na direção oposta à sua orientação. Portanto, em uma orientação StackLayout
vertical, definir a HorizontalOptions
propriedade em um modo de exibição filho para StartAndExpand
tem o mesmo efeito que definir a propriedade como Start
.
Observação
Observe que habilitar a expansão não altera o tamanho de um modo de exibição, a menos que ele use LayoutOptions.FillAndExpand
o .
O exemplo de código XAML a seguir demonstra uma orientação StackLayout
vertical onde cada filho Label
define sua VerticalOptions
propriedade para um dos quatro campos de expansão da LayoutOptions
estrutura:
<StackLayout Margin="0,20,0,0">
...
<BoxView BackgroundColor="Red" HeightRequest="1" />
<Label Text="Start" BackgroundColor="Gray" VerticalOptions="StartAndExpand" />
<BoxView BackgroundColor="Red" HeightRequest="1" />
<Label Text="Center" BackgroundColor="Gray" VerticalOptions="CenterAndExpand" />
<BoxView BackgroundColor="Red" HeightRequest="1" />
<Label Text="End" BackgroundColor="Gray" VerticalOptions="EndAndExpand" />
<BoxView BackgroundColor="Red" HeightRequest="1" />
<Label Text="Fill" BackgroundColor="Gray" VerticalOptions="FillAndExpand" />
<BoxView BackgroundColor="Red" HeightRequest="1" />
</StackLayout>
O código C# equivalente é mostrado abaixo:
Content = new StackLayout
{
Margin = new Thickness(0, 20, 0, 0),
Children = {
...
new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
new Label { Text = "StartAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.StartAndExpand },
new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
new Label { Text = "CenterAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.CenterAndExpand },
new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
new Label { Text = "EndAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.EndAndExpand },
new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
new Label { Text = "FillAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.FillAndExpand },
new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 }
}
};
O código resulta no layout mostrado nas seguintes capturas de tela:
Cada um Label
ocupa a mesma quantidade de espaço dentro do StackLayout
. No entanto, somente o último Label
, que define sua propriedade VerticalOptions
como FillAndExpand
tem um tamanho diferente. Além disso, cada Label
um é separado por um pequeno vermelho BoxView
, o que permite que o espaço que ocupa Label
seja facilmente visualizado.
Resumo
Este artigo explicou o efeito que cada LayoutOptions
valor de estrutura tem no alinhamento e expansão de uma exibição, em relação ao seu pai. Os Start
campos , Center
, End
e Fill
são usados para definir o alinhamento do modo de exibição no layout pai, e os StartAndExpand
campos , CenterAndExpand
, EndAndExpand
e FillAndExpand
são usados para definir a preferência de alinhamento e determinar se o modo de exibição ocupará mais espaço, se disponível, em um StackLayout
arquivo .