Xamarin.Forms RelativeLayout

  • Artículo
  • 10 minutos para leer

Ejemplo de descarga Descarga del ejemplo

<span class= RelativeLayout de Xamarin.Forms" data-linktype=

Se RelativeLayout usa para colocar y cambiar el tamaño de los elementos secundarios en relación con las propiedades del diseño o los elementos relacionados. Esto permite crear las IA que se escalan proporcionalmente entre los tamaños de dispositivo. Además, a diferencia de otras clases de diseño, es capaz de colocar elementos RelativeLayout secundarios para que se superpongan.

La clase RelativeLayout define las propiedades siguientes:

  • XConstraint, de tipo Constraint , que es una propiedad adjunta que representa la restricción en la posición X del elemento secundario.
  • YConstraint, de tipo Constraint , que es una propiedad adjunta que representa la restricción en la posición Y del elemento secundario.
  • WidthConstraint, de tipo Constraint , que es una propiedad adjunta que representa la restricción en el ancho del elemento secundario.
  • HeightConstraint, de tipo Constraint , que es una propiedad adjunta que representa la restricción en el alto del elemento secundario.
  • BoundsConstraint, de tipo BoundsConstraint , que es una propiedad adjunta que representa la restricción en la posición y el tamaño del elemento secundario. Esta propiedad no se puede consumir fácilmente desde XAML.

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 .

Nota:

El ancho y el alto de un elemento secundario en también se pueden especificar a través de las propiedades y del elemento secundario, en lugar de las RelativeLayoutWidthRequest propiedades HeightRequestWidthConstraintHeightConstraint adjuntas y .

La RelativeLayout 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.

Sugerencia

Evite el uso de un RelativeLayout siempre que sea posible. Como resultado, la CPU tendrá que realizar mucho más trabajo.

Restricciones

Dentro de RelativeLayout , la posición y el tamaño de los secundarios se especifican como restricciones mediante valores absolutos o valores relativos. Cuando no se especifican restricciones, un elemento secundario se colocará en la esquina superior izquierda del diseño.

En la tabla siguiente se muestra cómo especificar restricciones en XAML y C#:

XAML C#
Valores absolutos Las restricciones absolutas se especifican estableciendo las RelativeLayout propiedades adjuntas en double valores. El método especifica restricciones absolutas Constraint.Constant o mediante la sobrecarga que requiere un argumento Children.AddFunc<Rectangle> .
Valores relativos Las restricciones relativas se especifican estableciendo las RelativeLayout propiedades adjuntas en Constraint objetos devueltos por la extensión de ConstraintExpression marcado. Los objetos devueltos por métodos de la clase especifican Constraint restricciones Constraint relativas.

Para obtener más información sobre cómo especificar restricciones mediante valores absolutos, vea Posición y tamaño absolutos. Para obtener más información sobre cómo especificar restricciones mediante valores relativos, vea Posición relativa y tamaño.

En C#, los secundarios se pueden agregar a RelativeLayout mediante tres Add sobrecargas. La primera sobrecarga requiere un Expression<Func<Rectangle>> para especificar la posición y el tamaño de un elemento secundario. La segunda sobrecarga requiere objetos Expression<Func<double>> opcionales para x los ywidth argumentos , , height y . La tercera sobrecarga requiere objetos Constraint opcionales para x los ywidth argumentos , , height y .

Es posible cambiar la posición y el tamaño de un elemento secundario en con los métodos RelativeLayoutSetXConstraint , , y SetYConstraintSetWidthConstraintSetHeightConstraint . El primer argumento para cada uno de estos métodos es el secundario y el segundo es un Constraint objeto . Además, el SetBoundsConstraint método también se puede usar para cambiar la posición y el tamaño de un elemento secundario. El primer argumento de este método es el secundario y el segundo es un BoundsConstraint objeto .

Posicionamiento y tamaño absolutos

puede colocar y cambiar el tamaño de los secundarios mediante valores absolutos, especificados en unidades independientes del dispositivo, que definen explícitamente dónde se deben colocar los secundarios RelativeLayout en el diseño. Esto se logra agregando elementos secundarios a la colección de y estableciendo las propiedades adjuntas , , y en cada elemento secundario en valores absolutos de posición ChildrenRelativeLayout o XConstraintYConstraintWidthConstraintHeightConstraint tamaño.

Advertencia

El uso de valores absolutos para colocar y cambiar el tamaño de los secundarios puede ser problemático, ya que los distintos dispositivos tienen diferentes tamaños de pantalla y resoluciones. Por lo tanto, las coordenadas del centro de la pantalla en un dispositivo pueden desplazarse en otros dispositivos.

El código XAML siguiente muestra RelativeLayout 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="RelativeLayoutDemos.Views.StylishHeaderDemoPage"
             Title="Stylish header demo">
    <RelativeLayout Margin="20">
        <BoxView Color="Silver"
                 RelativeLayout.XConstraint="0"
                 RelativeLayout.YConstraint="10"
                 RelativeLayout.WidthConstraint="200"
                 RelativeLayout.HeightConstraint="5" />
        <BoxView Color="Silver"
                 RelativeLayout.XConstraint="0"
                 RelativeLayout.YConstraint="20"
                 RelativeLayout.WidthConstraint="200"
                 RelativeLayout.HeightConstraint="5" />
        <BoxView Color="Silver"
                 RelativeLayout.XConstraint="10"
                 RelativeLayout.YConstraint="0"
                 RelativeLayout.WidthConstraint="5"
                 RelativeLayout.HeightConstraint="65" />
        <BoxView Color="Silver"
                 RelativeLayout.XConstraint="20"
                 RelativeLayout.YConstraint="0"
                 RelativeLayout.WidthConstraint="5"
                 RelativeLayout.HeightConstraint="65" />
        <Label Text="Stylish header"
               FontSize="24"
               RelativeLayout.XConstraint="30"
               RelativeLayout.YConstraint="25" />
    </RelativeLayout>
</ContentPage>

En este ejemplo, la posición de cada objeto se define utilizando los valores BoxView especificados en las XConstraint propiedades YConstraint adjuntas y . El tamaño de cada BoxView se define utilizando los valores especificados en las propiedades WidthConstraintHeightConstraint adjuntas y . La posición del Label objeto también se define mediante los valores especificados en las propiedades XConstraintYConstraint adjuntas y . Sin embargo, los valores de tamaño no se especifican para , por lo que no están entrenados y Label se tamaños en sí. En todos los casos, los valores absolutos representan unidades independientes del dispositivo.

En las capturas de pantalla siguientes se muestra el diseño resultante:

Los secundarios colocados en RelativeLayout mediante valores absolutos

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

public class StylishHeaderDemoPageCS : ContentPage
{
    public StylishHeaderDemoPageCS()
    {
        RelativeLayout relativeLayout = new RelativeLayout
        {
            Margin = new Thickness(20)
        };

        relativeLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, () => new Rectangle(0, 10, 200, 5));

        relativeLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, () => new Rectangle(0, 20, 200, 5));

        relativeLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, () => new Rectangle(10, 0, 5, 65));

        relativeLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, () => new Rectangle(20, 0, 5, 65));

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

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

En este ejemplo, los objetos se agregan a mediante una sobrecarga que requiere un para especificar la BoxView posición y el tamaño de cada elemento RelativeLayoutAddExpression<Func<Rectangle>> secundario. La posición de se Label define mediante una sobrecarga que requiere objetos AddConstraint opcionales, en este caso creados por el Constraint.Constant método .

Nota:

Un que usa valores absolutos puede colocar y ajustar el tamaño de los secundarios para que no quepa dentro de los RelativeLayout límites del diseño.

Posicionamiento y tamaño relativos

puede colocar y cambiar el tamaño de los elementos secundarios mediante valores relativos a RelativeLayout las propiedades del diseño o elementos relacionados. Esto se logra agregando elementos secundarios a la colección de y estableciendo las propiedades ChildrenRelativeLayoutXConstraintYConstraint adjuntas , WidthConstraint , y HeightConstraintConstraint en cada elemento secundario en valores relativos mediante objetos .

Las restricciones pueden ser una constante, relativa a un elemento primario o relativa a un elemento relacionado. El tipo de restricción se representa mediante la ConstraintType enumeración , que define los miembros siguientes:

  • RelativeToParent, que indica una restricción relativa a un elemento primario.
  • RelativeToView, que indica una restricción relativa a una vista (o del mismo nivel).
  • Constant, que indica una restricción constante.

Extensión de marcado de restricción

En XAML, la Constraint extensión de marcado puede crear un objeto ConstraintExpression . Esta extensión de marcado se usa normalmente para relacionar la posición y el tamaño de un elemento secundario dentro de con su elemento primario RelativeLayout o con un elemento relacionado.

La clase ConstraintExpression define las propiedades siguientes:

Para obtener más información sobre Xamarin.Forms las extensiones de marcado, vea Extensiones de Xamarin.Forms

El código XAML siguiente muestra RelativeLayout un cuyos elementos secundarios están restringidos por la ConstraintExpression extensión de marcado:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="RelativeLayoutDemos.Views.RelativePositioningAndSizingDemoPage"
             Title="RelativeLayout demo">
    <RelativeLayout>
        <BoxView Color="Red"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />
        <BoxView Color="Green"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-40}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />
        <BoxView Color="Blue"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-40}" />
        <BoxView Color="Yellow"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-40}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-40}" />

        <!-- Centered and 1/3 width and height of parent -->
        <BoxView x:Name="oneThird"
                 Color="Silver"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.33}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.33}"
                 RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.33}"
                 RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.33}" />

        <!-- 1/3 width and height of previous -->
        <BoxView Color="Black"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=oneThird, Property=X}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=oneThird, Property=Y}"
                 RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=oneThird, Property=Width, Factor=0.33}"
                 RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=oneThird, Property=Height, Factor=0.33}" />
    </RelativeLayout>
</ContentPage>

En este ejemplo, la posición de cada BoxView objeto se define estableciendo las propiedades XConstraintYConstraint adjuntas y . La primera BoxView tiene sus XConstraint propiedades YConstraint adjuntas y establecidas en constantes, que son valores absolutos. Todos los BoxView objetos restantes tienen su posición establecida mediante al menos un valor relativo. Por ejemplo, el objeto amarillo establece la propiedad adjunta en el ancho de BoxViewXConstraint su elemento primario RelativeLayout () menos 40. De forma similar, BoxView establece la propiedad adjunta en el alto de su elemento primario menos YConstraint 40. Esto garantiza que el amarillo BoxView aparece en la esquina inferior derecha de la pantalla.

Nota:

BoxView Los objetos que no especifican un tamaño tienen un tamaño automático de 40 x 40 por Xamarin.Forms .

La silver BoxView con nombre se coloca oneThird centralmente, en relación con su elemento primario. También tiene un tamaño relativo a su elemento primario, siendo un tercio de su ancho y alto. Esto se logra estableciendo las propiedades adjuntas y en el ancho del elemento primario (el ), multiplicado XConstraintWidthConstraint por RelativeLayout 0,33. De forma similar, las propiedades adjuntas y se establecen en el alto del elemento YConstraintHeightConstraint primario, multiplicado por 0,33.

El negro BoxView se coloca y se dimensiona con respecto a oneThirdBoxView . Esto se logra estableciendo sus propiedades adjuntas y en los valores y XConstraintYConstraint , XY respectivamente, del elemento relacionado. De forma similar, su tamaño se establece en un tercio del ancho y alto de su elemento relacionado. Esto se logra estableciendo sus propiedades adjuntas y en los valores y del elemento relacionado, respectivamente, que luego se multiplican por WidthConstraintHeightConstraintWidthHeight 0,33.

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

Los secundarios colocados en RelativeLayout mediante valores relativos

Objetos de restricción

La Constraint clase define los siguientes métodos estáticos públicos, que devuelven objetos Constraint :

  • Constant, que restringe un elemento secundario a un tamaño especificado con double .
  • FromExpression, que restringe un elemento secundario mediante una expresión lambda.
  • RelativeToParent, que restringe un elemento secundario en relación con el tamaño de su elemento primario.
  • RelativeToView, que restringe un elemento secundario en relación con el tamaño de una vista.

Además, la BoundsConstraint clase define un único método, , que devuelve un que restringe la posición y el tamaño de un elemento secundario con FromExpressionBoundsConstraintExpression<Func<Rectangle>> . Este método se puede usar para establecer la BoundsConstraint propiedad adjunta.

El siguiente código de C# muestra RelativeLayout un cuyos elementos secundarios están restringidos por Constraint objetos :

public class RelativePositioningAndSizingDemoPageCS : ContentPage
{
    public RelativePositioningAndSizingDemoPageCS()
    {
        RelativeLayout relativeLayout = new RelativeLayout();

        // Four BoxView's
        relativeLayout.Children.Add(
            new BoxView { Color = Color.Red },
            Constraint.Constant(0),
            Constraint.Constant(0));

        relativeLayout.Children.Add(
            new BoxView { Color = Color.Green },
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width - 40;
            }), Constraint.Constant(0));

        relativeLayout.Children.Add(
            new BoxView { Color = Color.Blue },
            Constraint.Constant(0),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Height - 40;
            }));

        relativeLayout.Children.Add(
            new BoxView { Color = Color.Yellow },
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width - 40;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Height - 40;
            }));

        // Centered and 1/3 width and height of parent
        BoxView silverBoxView = new BoxView { Color = Color.Silver };
        relativeLayout.Children.Add(
            silverBoxView,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width * 0.33;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Height * 0.33;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width * 0.33;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Height * 0.33;
            }));

        // 1/3 width and height of previous
        relativeLayout.Children.Add(
            new BoxView { Color = Color.Black },
            Constraint.RelativeToView(silverBoxView, (parent, sibling) =>
            {
                return sibling.X;
            }),
            Constraint.RelativeToView(silverBoxView, (parent, sibling) =>
            {
                return sibling.Y;
            }),
            Constraint.RelativeToView(silverBoxView, (parent, sibling) =>
            {
                return sibling.Width * 0.33;
            }),
            Constraint.RelativeToView(silverBoxView, (parent, sibling) =>
            {
                return sibling.Height * 0.33;
            }));

        Title = "RelativeLayout demo";
        Content = relativeLayout;
    }
}

En este ejemplo, los elementos secundarios se agregan a mediante la sobrecarga que requiere un objeto opcional para los RelativeLayoutAddConstraintxywidth argumentos , , height y .

Nota:

Un que usa valores relativos puede colocar y ajustar el tamaño de los secundarios para que no quepa dentro de los RelativeLayout límites del diseño.