Xamarin.Forms AbsoluteLayout

Descarga del ejemplo

Xamarin.Forms

se AbsoluteLayout usa para colocar y cambiar el tamaño de los secundarios mediante valores explícitos. La posición se especifica mediante la esquina superior izquierda del elemento secundario con respecto a la esquina superior izquierda de , en AbsoluteLayout unidades independientes del dispositivo. AbsoluteLayout también implementa una característica de posicionamiento y ajuste de tamaño proporcional. Además, a diferencia de otras clases de diseño, es capaz de colocar elementos AbsoluteLayout secundarios para que se superpongan.

Debe considerarse como un diseño de propósito especial que solo se debe usar cuando se puede imponer un tamaño a los elementos secundarios o cuando el tamaño del elemento no afecta al posicionamiento de otros elementos AbsoluteLayout secundarios.

La clase AbsoluteLayout define las propiedades siguientes:

• LayoutBounds, de tipo Rectangle , que es una propiedad adjunta que representa la posición y el tamaño de un elemento secundario. El valor predeterminado de esta propiedad es (0,0,AutoSize,AutoSize).
• LayoutFlags, de tipo , que es una propiedad adjunta que indica si las propiedades de los límites de diseño utilizados para colocar y cambiar el tamaño del elemento secundario se AbsoluteLayoutFlags interpretan proporcionalmente. El valor predeterminado de esta propiedad es AbsoluteLayoutFlags.None.

Estas propiedades están copiadas por objetos , lo que significa que las propiedades pueden ser destinos de enlaces BindableProperty de datos y con estilo. Para obtener más información sobre las propiedades adjuntas, vea Xamarin.Forms Attached Properties .

La AbsoluteLayout clase se deriva de la clase , que define una propiedad de tipo Layout<T>ChildrenIList<T> . La propiedad es de la clase y, por tanto, no es necesario establecer ChildrenContentPropertyLayout<T> explícitamente desde XAML.

Posición y tamaño de los secundarios

La posición y el tamaño de los elementos secundarios en se define estableciendo la propiedad adjunta de cada elemento secundario, utilizando valores absolutos AbsoluteLayoutAbsoluteLayout.LayoutBounds o valores proporcionales. Los valores absolutos y proporcionales se pueden mezclar para los secundarios cuando se debe escalar la posición, pero el tamaño debe permanecer fijo o viceversa. Para obtener información sobre los valores absolutos, vea Posición y tamaño absolutos. Para obtener información sobre los valores proporcionales, vea Posición proporcional y ajuste de tamaño.

La AbsoluteLayout.LayoutBounds propiedad adjunta se puede establecer con dos formatos, independientemente de si se usan valores absolutos o proporcionales:

• x, y. Con este formato, los valores y indican la posición de la esquina superior x izquierda del elemento secundario con respecto a su elemento y primario. El elemento secundario no está entrenado y tiene tamaños propios.
• x, y, width, height. Con este formato, los valores y indican la posición de la esquina superior izquierda del elemento secundario con respecto a su elemento primario, mientras que los valores y indican el tamaño xy del elemento widthheight secundario.

Para especificar que un elemento secundario se ajuste horizontal o verticalmente, o ambos, establezca los valores y/o en la propiedad widthheight Xamarin_Forms width _AbsoluteLayout_AutoSize" data-linktype="absolute-path">. AbsoluteLayout.AutoSize Sin embargo, el uso excesivo de esta propiedad puede dañar el rendimiento de la aplicación, ya que hace que el motor de diseño realice cálculos de diseño adicionales.

Posición y tamaño absolutos

De forma predeterminada, las posiciones y tamaños de los secundarios usan valores absolutos, especificados en unidades independientes del dispositivo, que definen explícitamente dónde se deben colocar los secundarios AbsoluteLayout en el diseño. Esto se consigue agregando elementos secundarios a la colección de y estableciendo la propiedad adjunta de cada elemento secundario en valores de posición ChildrenAbsoluteLayout o tamaño AbsoluteLayout.LayoutBounds absolutos.

El código XAML siguiente muestra AbsoluteLayout un cuyos elementos secundarios se sitúan mediante 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>

En este ejemplo, la posición de cada objeto se define utilizando los dos primeros valores absolutos que BoxView se especifican en la propiedad AbsoluteLayout.LayoutBounds adjunta. El tamaño de cada BoxView se define mediante los valores tercero y siguiente. La posición del objeto se define utilizando los dos valores absolutos Label especificados en la AbsoluteLayout.LayoutBounds propiedad adjunta. Los valores de tamaño no se especifican para , por lo que no están entrenados Label y tienen tamaños propios. En todos los casos, los valores absolutos representan unidades independientes del dispositivo.

En la captura de pantalla siguiente se muestra el diseño resultante:

El código de C# equivalente se muestra a continuación:

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;
    }
}

En este ejemplo, la posición y el tamaño de cada BoxView uno se definen mediante un objeto Rectangle . La posición de Label se define mediante un objeto Point .

En C#, también es posible establecer la posición y el tamaño de un elemento secundario de una después de agregarlo a la AbsoluteLayoutChildren colección, mediante el AbsoluteLayout.SetLayoutBounds método . El primer argumento de este método es el secundario y el segundo es un Rectangle objeto .

Posición y ajuste de tamaño proporcionales

puede AbsoluteLayout colocar y cambiar el tamaño de los secundarios mediante valores proporcionales. Esto se consigue agregando elementos secundarios a la colección de y estableciendo la propiedad adjunta de cada elemento secundario en valores proporcionales de posición o tamaño en el intervalo ChildrenAbsoluteLayoutAbsoluteLayout.LayoutBounds 0-1. Los valores de posición y tamaño se hacen proporcionales estableciendo la AbsoluteLayout.LayoutFlags propiedad adjunta en cada elemento secundario.

La propiedad adjunta, de tipo , permite establecer una marca que indica que los valores de posición y tamaño de los límites de diseño para un elemento secundario son proporcionales al AbsoluteLayout.LayoutFlagsAbsoluteLayoutFlags tamaño de AbsoluteLayout . Al crear un elemento secundario, escala los valores de posición y tamaño adecuadamente AbsoluteLayout a cualquier tamaño de dispositivo.

La enumeración AbsoluteLayoutFlags define los miembros siguientes:

• None, indica que los valores se interpretarán como absolutos. Se trata del valor predeterminado de la propiedad adjunta AbsoluteLayout.LayoutFlags.
• XProportional, indica que el valor se interpretará como proporcional, mientras se tratan todos los x demás valores como absolutos.
• YProportional, indica que el valor se interpretará como proporcional, mientras se tratan todos los y demás valores como absolutos.
• WidthProportional, indica que el valor se interpretará como proporcional, mientras se tratan todos los width demás valores como absolutos.
• HeightProportional, indica que el valor se interpretará como proporcional, mientras se tratan todos los height demás valores como absolutos.
• PositionProportional, indica que los valores y se interpretarán como proporcionales, mientras que los valores de tamaño xy se interpretan como absolutos.
• SizeProportional, indica que los valores y se interpretarán como proporcionales, mientras que los valores de posición widthheight se interpretan como absolutos.
• All, indica que todos los valores se interpretarán como proporcionales.

Por ejemplo, si usa la marca y establece el ancho de un elemento secundario en 0,25 y el alto en 0,1, el elemento secundario será un cuarto del ancho de y una décima parte del SizeProportionalAbsoluteLayout alto. La PositionProportional marca es similar. Una posición de (0,0) coloca el elemento secundario en la esquina superior izquierda, mientras que una posición de (1,1) coloca el elemento secundario en la esquina inferior derecha y una posición de (0,5,0,5) centra el elemento secundario dentro de AbsoluteLayout .

El código XAML siguiente muestra AbsoluteLayout un cuyos elementos secundarios se sitúan mediante valores proporcionales:

<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>

En este ejemplo, cada elemento secundario se coloca utilizando valores proporcionales, pero con valores absolutos. Esto se logra estableciendo la AbsoluteLayout.LayoutFlags propiedad adjunta de cada elemento secundario en PositionProportional . Los dos primeros valores especificados en la AbsoluteLayout.LayoutBounds propiedad adjunta, para cada elemento secundario, definen la posición mediante valores proporcionales. El tamaño de cada elemento secundario se define con los valores absolutos tercero y siguiente, mediante unidades independientes del dispositivo.

En la captura de pantalla siguiente se muestra el diseño resultante:

El código de C# equivalente se muestra a continuación:

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 }
        };
    }
}

En este ejemplo, la posición y el tamaño de cada elemento secundario se establecen con el AbsoluteLayout.SetLayoutBounds método . El primer argumento del método es el secundario y el segundo es un Rectangle objeto . La posición de cada elemento secundario se establece con valores proporcionales, mientras que el tamaño de cada elemento secundario se establece con valores absolutos, mediante unidades independientes del dispositivo.

Vínculos relacionados

• Demostraciones de AbsoluteLayout (ejemplo)
• Xamarin.Forms Attached Properties
• Choose a Xamarin.Forms Layout
• Improve Xamarin.Forms App Performance