Compartilhar via

Opções de layout em Xamarin.Forms

  • Artigo

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 Startcampos , Center, Ende Fill são usados para definir o alinhamento do modo de exibição no layout pai:

  • Para alinhamento horizontal, Start posiciona o View no lado esquerdo do layout pai e, para alinhamento vertical, posiciona o View na parte superior do layout pai.
  • Para alinhamento horizontal e vertical, Center centraliza horizontal ou verticalmente o View.
  • Para alinhamento horizontal, End posiciona o View no lado direito do layout pai e, para alinhamento vertical, posiciona o View na parte inferior do layout pai.
  • Para alinhamento horizontal, Fill garante que o View preenche a largura do layout pai e, para alinhamento vertical, garante que o View preenche a altura do layout pai.

Os StartAndExpandvalores , CenterAndExpand, EndAndExpande 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 Startcampos , Center, Ende FillLayoutOptions 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 Startcampos , Center, Endou Fill . Da mesma forma, os modos de exibição filho em uma orientação StackLayout horizontal podem definir suas VerticalOptions propriedades como um dos Startcampos , Center, Endou Fill .

A StackLayout não respeita os Startcampos , Center, Ende FillLayoutOptions 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 Startcampos , Center, Endou Fill se eles estiverem definidos nas VerticalOptions propriedades de modos de exibição filho. Da mesma forma, uma orientação StackLayout horizontal ignora os Startcampos , EndCenter, 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:

Opções de layout de alinhamento

Expansão

A expansão controla se uma exibição ocupará mais espaço, se disponível, dentro de um StackLayoutarquivo . 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 StartAndExpandcampos , CenterAndExpand, EndAndExpandou 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 StartAndExpandcampos , CenterAndExpand, EndAndExpandou 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 StackLayoutvertical, 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.FillAndExpando .

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:

Opções de layout de expansão

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 Startcampos , Center, Ende Fill são usados para definir o alinhamento do modo de exibição no layout pai, e os StartAndExpandcampos , CenterAndExpand, EndAndExpande 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 StackLayoutarquivo .