Xamarin.Forms AbsoluteLayout

Baixar exemplo Baixar o exemplo

Xamarin.Forms AbsoluteLayout

Um AbsoluteLayout é usado para posicionar e dimensionar filhos usando valores explícitos. A posição é especificada pelo canto superior esquerdo do filho em relação ao canto superior esquerdo do AbsoluteLayout, em unidades independentes do dispositivo. AbsoluteLayout também implementa um recurso de posicionamento e dimensionamento proporcional. Além disso, ao contrário de algumas outras classes de layout, AbsoluteLayout é capaz de posicionar os filhos para que eles se sobreponham.

Um AbsoluteLayout deve ser considerado como um layout de finalidade especial a ser usado somente quando você pode impor um tamanho aos filhos ou quando o tamanho do elemento não afeta o posicionamento de outros filhos.

A AbsoluteLayout classe define as seguintes propriedades:

  • LayoutBounds, do tipo Rectangle, que é uma propriedade anexada que representa a posição e o tamanho de um filho. O valor padrão dessa propriedade é (0,0,AutoSize,AutoSize).
  • LayoutFlags, do tipo AbsoluteLayoutFlags, que é uma propriedade anexada que indica se as propriedades dos limites de layout usados para posicionar e dimensionar o filho são interpretadas proporcionalmente. O valor padrão dessa propriedade é AbsoluteLayoutFlags.None.

Essas propriedades são apoiadas por BindableProperty objetos , o que significa que as propriedades podem ser destinos de associações de dados e estilizadas. Para obter mais informações sobre propriedades anexadas, consulte Xamarin.Forms Propriedades anexadas.

A AbsoluteLayout classe deriva da Layout<T> classe , que define uma Children propriedade do tipo IList<T>. A Children propriedade é a ContentPropertyLayout<T> da classe e, portanto, não precisa ser definida explicitamente a partir de XAML.

Dica

Para obter o melhor desempenho de layout possível, siga as diretrizes em Otimizar o desempenho do layout.

Filhos de posição e tamanho

A posição e o tamanho dos filhos em um AbsoluteLayout é definido definindo a AbsoluteLayout.LayoutBounds propriedade anexada de cada filho, usando valores absolutos ou valores proporcionais. Valores absolutos e proporcionais podem ser misturados para filhos quando a posição deve ser dimensionada, mas o tamanho deve permanecer fixo ou vice-versa. Para obter informações sobre valores absolutos, consulte Posicionamento e dimensionamento absolutos. Para obter informações sobre valores proporcionais, consulte Posicionamento e dimensionamento proporcionais.

A AbsoluteLayout.LayoutBounds propriedade anexada pode ser definida usando dois formatos, independentemente de valores absolutos ou proporcionais serem usados:

  • x, y. Com esse formato, os x valores e y indicam a posição do canto superior esquerdo do filho em relação ao pai. A criança é irrestrita e se dimensiona.
  • x, y, width, height. Com esse formato, os x valores e y indicam a posição do canto superior esquerdo do filho em relação ao pai, enquanto os width valores e height indicam o tamanho do filho.

Para especificar que um filho se dimensione horizontal ou verticalmente, ou ambos, defina os width valores e/ou height como a AbsoluteLayout.AutoSize propriedade . No entanto, o uso excessivo dessa propriedade pode prejudicar o desempenho do aplicativo, pois faz com que o mecanismo de layout execute cálculos de layout adicionais.

Importante

As HorizontalOptions propriedades e VerticalOptions não têm nenhum efeito sobre os filhos de um AbsoluteLayout.

Posicionamento e dimensionamento absolutos

Por padrão, uma AbsoluteLayout posição e tamanhos filhos usando valores absolutos, especificados em unidades independentes de dispositivo, que definem explicitamente onde os filhos devem ser colocados no layout. Isso é feito adicionando filhos à Children coleção de um AbsoluteLayout e definindo a AbsoluteLayout.LayoutBounds propriedade anexada em cada filho como valores absolutos de posição e/ou tamanho.

Aviso

Usar valores absolutos para posicionar e dimensionar filhos pode ser problemático, pois diferentes dispositivos têm diferentes tamanhos de tela e resoluções. Portanto, as coordenadas para o centro da tela em um dispositivo podem ser deslocadas em outros dispositivos.

O XAML a seguir mostra um AbsoluteLayout cujos filhos estão posicionados usando valores absolutos:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AbsoluteLayoutDemos.Views.StylishHeaderDemoPage"
             Title="Stylish header demo">
    <AbsoluteLayout Margin="20">
        <BoxView Color="Silver"
                 AbsoluteLayout.LayoutBounds="0, 10, 200, 5" />
        <BoxView Color="Silver"
                 AbsoluteLayout.LayoutBounds="0, 20, 200, 5" />
        <BoxView Color="Silver"
                 AbsoluteLayout.LayoutBounds="10, 0, 5, 65" />
        <BoxView Color="Silver"
                 AbsoluteLayout.LayoutBounds="20, 0, 5, 65" />
        <Label Text="Stylish Header"
               FontSize="24"
               AbsoluteLayout.LayoutBounds="30, 25" />
    </AbsoluteLayout>
</ContentPage>

Neste exemplo, a posição de cada BoxView objeto é definida usando os dois primeiros valores absolutos especificados na AbsoluteLayout.LayoutBounds propriedade anexada. O tamanho de cada BoxView um é definido usando os valores de terceiro e próximo. A posição do Label objeto é definida usando os dois valores absolutos especificados na AbsoluteLayout.LayoutBounds propriedade anexada. Os valores de tamanho não são especificados para o Labele, portanto, são irrestritos e tamanhos em si. Em todos os casos, os valores absolutos representam unidades independentes do dispositivo.

A captura de tela a seguir mostra o layout resultante:

Filhos colocados em um AbsoluteLayout usando valores absolutos

O código C# equivalente é mostrado abaixo:

public class StylishHeaderDemoPageCS : ContentPage
{
    public StylishHeaderDemoPageCS()
    {
        AbsoluteLayout absoluteLayout = new AbsoluteLayout
        {
            Margin = new Thickness(20)
        };

        absoluteLayout.Children.Add(new BoxView
        {
            Color = Color.Silver,
        }, new Rectangle(0, 10, 200, 5));
        absoluteLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, new Rectangle(0, 20, 200, 5));
        absoluteLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, new Rectangle(10, 0, 5, 65));
        absoluteLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, new Rectangle(20, 0, 5, 65));

        absoluteLayout.Children.Add(new Label
        {
            Text = "Stylish Header",
            FontSize = 24
        }, new Point(30,25));                    

        Title = "Stylish header demo";
        Content = absoluteLayout;
    }
}

Neste exemplo, a posição e o tamanho de cada BoxView um são definidos usando um Rectangle objeto . A posição do Label é definida usando um Point objeto .

Em C#, também é possível definir a posição e o tamanho de um filho de um AbsoluteLayout depois que ele tiver sido adicionado à Children coleção, usando o AbsoluteLayout.SetLayoutBounds método . O primeiro argumento para esse método é o filho e o segundo é um Rectangle objeto .

Observação

Um AbsoluteLayout que usa valores absolutos pode posicionar e dimensionar filhos para que eles não se ajustem aos limites do layout.

Posicionamento e dimensionamento proporcionais

Um AbsoluteLayout pode posicionar e dimensionar filhos usando valores proporcionais. Isso é feito adicionando filhos à Children coleção do AbsoluteLayoute definindo a AbsoluteLayout.LayoutBounds propriedade anexada em cada filho como valores de posição e/ou tamanho proporcionais no intervalo de 0 a 1. Os valores de posição e tamanho são proporcionais definindo a AbsoluteLayout.LayoutFlags propriedade anexada em cada filho.

A AbsoluteLayout.LayoutFlags propriedade anexada, do tipo AbsoluteLayoutFlags, permite que você defina um sinalizador que indica que os valores de posição e tamanho dos limites de layout para um filho são proporcionais ao tamanho do AbsoluteLayout. Ao definir um filho, AbsoluteLayout dimensiona os valores de posição e tamanho adequadamente para qualquer tamanho de dispositivo.

A enumeração AbsoluteLayoutFlags define os seguintes membros:

  • None, indica que os valores serão interpretados como absolutos. Esse é o valor padrão da AbsoluteLayout.LayoutFlags propriedade anexada.
  • XProportional, indica que o x valor será interpretado como proporcional, ao mesmo tempo em que trata todos os outros valores como absolutos.
  • YProportional, indica que o y valor será interpretado como proporcional, ao mesmo tempo em que trata todos os outros valores como absolutos.
  • WidthProportional, indica que o width valor será interpretado como proporcional, ao mesmo tempo em que trata todos os outros valores como absolutos.
  • HeightProportional, indica que o height valor será interpretado como proporcional, ao mesmo tempo em que trata todos os outros valores como absolutos.
  • PositionProportional, indica que os x valores e y serão interpretados como proporcionais, enquanto os valores de tamanho são interpretados como absolutos.
  • SizeProportional, indica que os width valores e height serão interpretados como proporcionais, enquanto os valores de posição são interpretados como absolutos.
  • All, indica que todos os valores serão interpretados como proporcionais.

Dica

A AbsoluteLayoutFlags enumeração é uma Flags enumeração , o que significa que os membros de enumeração podem ser combinados. Isso é feito em XAML com uma lista separada por vírgulas e em C# com o operador OR bit a bit.

Por exemplo, se você usar o SizeProportional sinalizador e definir a largura de um filho como 0,25 e a altura como 0,1, o filho terá um quarto da largura do AbsoluteLayout e um décimo da altura. O PositionProportional sinalizador é semelhante. Uma posição de (0,0) coloca o filho no canto superior esquerdo, enquanto uma posição de (1,1) coloca o filho no canto inferior direito e uma posição de (0,5,0,5) centraliza o filho dentro do AbsoluteLayout.

O XAML a seguir mostra um AbsoluteLayout cujos filhos estão posicionados usando valores proporcionais:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AbsoluteLayoutDemos.Views.ProportionalDemoPage"
             Title="Proportional demo">
    <AbsoluteLayout>
        <BoxView Color="Blue"
                 AbsoluteLayout.LayoutBounds="0.5,0,100,25"
                 AbsoluteLayout.LayoutFlags="PositionProportional" />
        <BoxView Color="Green"
                 AbsoluteLayout.LayoutBounds="0,0.5,25,100"
                 AbsoluteLayout.LayoutFlags="PositionProportional" />
        <BoxView Color="Red"
                 AbsoluteLayout.LayoutBounds="1,0.5,25,100"
                 AbsoluteLayout.LayoutFlags="PositionProportional" />
        <BoxView Color="Black"
                 AbsoluteLayout.LayoutBounds="0.5,1,100,25"
                 AbsoluteLayout.LayoutFlags="PositionProportional" />
        <Label Text="Centered text"
               AbsoluteLayout.LayoutBounds="0.5,0.5,110,25"
               AbsoluteLayout.LayoutFlags="PositionProportional" />
    </AbsoluteLayout>
</ContentPage>

Neste exemplo, cada filho é posicionado usando valores proporcionais, mas dimensionado usando valores absolutos. Isso é feito definindo a AbsoluteLayout.LayoutFlags propriedade anexada de cada filho como PositionProportional. Os dois primeiros valores especificados na AbsoluteLayout.LayoutBounds propriedade anexada, para cada filho, definem a posição usando valores proporcionais. O tamanho de cada filho é definido com o terceiro e o próximo valores absolutos, usando unidades independentes de dispositivo.

A captura de tela a seguir mostra o layout resultante:

Filhos colocados em um AbsoluteLayout usando valores de posição proporcional

O código C# equivalente é mostrado abaixo:

public class ProportionalDemoPageCS : ContentPage
{
    public ProportionalDemoPageCS()
    {
        BoxView blue = new BoxView { Color = Color.Blue };
        AbsoluteLayout.SetLayoutBounds(blue, new Rectangle(0.5, 0, 100, 25));
        AbsoluteLayout.SetLayoutFlags(blue, AbsoluteLayoutFlags.PositionProportional);

        BoxView green = new BoxView { Color = Color.Green };
        AbsoluteLayout.SetLayoutBounds(green, new Rectangle(0, 0.5, 25, 100));
        AbsoluteLayout.SetLayoutFlags(green, AbsoluteLayoutFlags.PositionProportional);

        BoxView red = new BoxView { Color = Color.Red };
        AbsoluteLayout.SetLayoutBounds(red, new Rectangle(1, 0.5, 25, 100));
        AbsoluteLayout.SetLayoutFlags(red, AbsoluteLayoutFlags.PositionProportional);

        BoxView black = new BoxView { Color = Color.Black };
        AbsoluteLayout.SetLayoutBounds(black, new Rectangle(0.5, 1, 100, 25));
        AbsoluteLayout.SetLayoutFlags(black, AbsoluteLayoutFlags.PositionProportional);

        Label label = new Label { Text = "Centered text" };
        AbsoluteLayout.SetLayoutBounds(label, new Rectangle(0.5, 0.5, 110, 25));
        AbsoluteLayout.SetLayoutFlags(label, AbsoluteLayoutFlags.PositionProportional);

        Title = "Proportional demo";
        Content = new AbsoluteLayout
        {
            Children = { blue, green, red, black, label }
        };
    }
}

Neste exemplo, a posição e o tamanho de cada filho são definidos com o AbsoluteLayout.SetLayoutBounds método . O primeiro argumento para o método é o filho e o segundo é um Rectangle objeto . A posição de cada filho é definida com valores proporcionais, enquanto o tamanho de cada filho é definido com valores absolutos, usando unidades independentes do dispositivo.

Observação

Um AbsoluteLayout que usa valores proporcionais pode posicionar e dimensionar filhos para que eles não se ajustem aos limites do layout usando valores fora do intervalo de 0 a 1.