Xamarin.Forms RelativeLayout

Télécharger l’exemple Télécharger l’exemple

Xamarin.Forms RelativeLayout

Un RelativeLayout est utilisé pour positionner et dimensionner les enfants par rapport aux propriétés de la disposition ou des éléments frères. Cela permet de créer des interfaces utilisateur qui sont mises à l’échelle proportionnellement selon les tailles d’appareil. En outre, contrairement à d’autres classes de disposition, RelativeLayout est capable de positionner les enfants de façon à ce qu’ils se chevauchent.

La RelativeLayout classe définit les propriétés suivantes :

  • XConstraint, de type Constraint, qui est une propriété jointe qui représente la contrainte sur la position X de l’enfant.
  • YConstraint, de type Constraint, qui est une propriété jointe qui représente la contrainte sur la position Y de l’enfant.
  • WidthConstraint, de type Constraint, qui est une propriété jointe qui représente la contrainte sur la largeur de l’enfant.
  • HeightConstraint, de type Constraint, qui est une propriété jointe qui représente la contrainte sur la hauteur de l’enfant.
  • BoundsConstraint, de type BoundsConstraint, qui est une propriété jointe qui représente la contrainte sur la position et la taille de l’enfant. Cette propriété ne peut pas être facilement consommée à partir de XAML.

Ces propriétés sont adossées à BindableProperty des objets, ce qui signifie qu’elles peuvent être cibles de liaisons de données et de style. Pour plus d’informations sur les propriétés jointes, consultez Xamarin.Forms Propriétés jointes.

Notes

La largeur et la hauteur d’un enfant dans un RelativeLayout peuvent également être spécifiées via les propriétés et HeightRequest de WidthRequest l’enfant, au lieu des WidthConstraint propriétés jointes et HeightConstraint .

La RelativeLayout classe dérive de la Layout<T> classe , qui définit une Children propriété de type IList<T>. La Children propriété est le ContentProperty de la Layout<T> classe et n’a donc pas besoin d’être définie explicitement à partir de XAML.

Conseil

Évitez d’utiliser un élément RelativeLayout autant que possible. Le processeur aurait considérablement plus de travail à effectuer.

Contraintes

Dans un RelativeLayout, la position et la taille des enfants sont spécifiées en tant que contraintes à l’aide de valeurs absolues ou de valeurs relatives. Lorsque les contraintes ne sont pas spécifiées, un enfant est positionné dans le coin supérieur gauche de la disposition.

Le tableau suivant montre comment spécifier des contraintes en XAML et C# :

XAML C#
Valeurs absolues Les contraintes absolues sont spécifiées en définissant les RelativeLayout propriétés jointes sur des double valeurs. Les contraintes absolues sont spécifiées par la Constraint.Constant méthode ou à l’aide de la Children.Add surcharge qui nécessite un Func<Rectangle> argument.
Valeurs relatives Les contraintes relatives sont spécifiées en définissant les RelativeLayout propriétés jointes sur Constraint les objets retournés par l’extension de ConstraintExpression balisage. Les contraintes relatives sont spécifiées par Constraint les objets retournés par les méthodes de la Constraint classe .

Pour plus d’informations sur la spécification de contraintes à l’aide de valeurs absolues, consultez Positionnement et dimensionnement absolus. Pour plus d’informations sur la spécification de contraintes à l’aide de valeurs relatives, consultez Positionnement et dimensionnement relatifs.

En C#, les enfants peuvent être ajoutés à RelativeLayout par trois Add surcharges. La première surcharge nécessite un Expression<Func<Rectangle>> pour spécifier la position et la taille d’un enfant. La deuxième surcharge nécessite des objets facultatifs Expression<Func<double>> pour les xarguments , y, widthet height . La troisième surcharge nécessite des objets facultatifs Constraint pour les xarguments , y, widthet height .

Il est possible de modifier la position et la taille d’un enfant dans un RelativeLayout avec les SetXConstraintméthodes , SetYConstraint, SetWidthConstraintet SetHeightConstraint . Le premier argument de chacune de ces méthodes est l’enfant, et le second est un Constraint objet. En outre, la SetBoundsConstraint méthode peut également être utilisée pour modifier la position et la taille d’un enfant. Le premier argument de cette méthode est l’enfant, et le second est un BoundsConstraint objet .

Positionnement et dimensionnement absolus

Un RelativeLayout peut positionner et dimensionner des enfants à l’aide de valeurs absolues, spécifiées dans des unités indépendantes de l’appareil, qui définissent explicitement où les enfants doivent être placés dans la disposition. Pour ce faire, ajoutez des enfants à la Children collection d’un RelativeLayout et définissez les XConstraintpropriétés jointes , YConstraint, WidthConstraintet HeightConstraint sur chaque enfant sur des valeurs de position et/ou de taille absolues.

Avertissement

L’utilisation de valeurs absolues pour le positionnement et le dimensionnement des enfants peut être problématique, car différents appareils ont des tailles d’écran et des résolutions différentes. Par conséquent, les coordonnées du centre de l’écran sur un appareil peuvent être décalées sur d’autres appareils.

Le code XAML suivant montre un RelativeLayout dont les enfants sont positionnés à l’aide de valeurs absolues :

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

Dans cet exemple, la position de chaque BoxView objet est définie à l’aide des valeurs spécifiées dans les XConstraint propriétés jointes et YConstraint . La taille de chaque BoxView est définie à l’aide des valeurs spécifiées dans les WidthConstraint propriétés jointes et HeightConstraint . La position de l’objet Label est également définie à l’aide des valeurs spécifiées dans les XConstraint propriétés jointes et YConstraint . Toutefois, les valeurs de taille ne sont pas spécifiées pour , Labelet elle est donc sans contrainte et elle se taille elle-même. Dans tous les cas, les valeurs absolues représentent des unités indépendantes de l’appareil.

Les captures d’écran suivantes illustrent la disposition obtenue :

Enfants placés dans un RelativeLayout à l’aide de valeurs absolues

Le code C# équivalent est illustré ci-dessous :

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

Dans cet exemple, BoxView les objets sont ajoutés à à l’aide RelativeLayout d’une Add surcharge qui nécessite un Expression<Func<Rectangle>> pour spécifier la position et la taille de chaque enfant. La position du est définie à l’aide Label d’une Add surcharge qui nécessite des objets facultatifs Constraint , dans ce cas créés par la Constraint.Constant méthode .

Notes

Un RelativeLayout qui utilise des valeurs absolues peut positionner et dimensionner des enfants afin qu’ils ne s’inscrivent pas dans les limites de la disposition.

Positionnement et dimensionnement relatifs

Un RelativeLayout peut positionner et dimensionner des enfants à l’aide de valeurs relatives aux propriétés de la disposition ou aux éléments frères. Pour ce faire, ajoutez des enfants à la Children collection des RelativeLayout et définissez les XConstraintpropriétés , , YConstraintWidthConstraintet HeightConstraint attachées sur chaque enfant sur des valeurs relatives à l’aide Constraint d’objets .

Les contraintes peuvent être une constante, relative à un parent ou relative à un frère. Le type de contrainte est représenté par l’énumération ConstraintType , qui définit les membres suivants :

  • RelativeToParent, qui indique une contrainte relative à un parent.
  • RelativeToView, qui indique une contrainte relative à une vue (ou frère).
  • Constant, qui indique une contrainte constante.

Extension de balisage de contrainte

En XAML, un Constraint objet peut être créé par l’extension de ConstraintExpression balisage. Cette extension de balisage est généralement utilisée pour lier la position et la taille d’un enfant au sein d’un RelativeLayout à son parent ou à un frère.

La ConstraintExpression classe définit les propriétés suivantes :

  • Constant, de type double, qui représente la valeur constante de contrainte.
  • ElementName, de type string, qui représente le nom d’un élément source sur lequel calculer la contrainte.
  • Factor, de type double, qui représente le facteur par lequel mettre à l’échelle une dimension contrainte, par rapport à l’élément source. Cette propriété est définie par défaut sur 1.
  • Property, de type string, qui représente le nom de la propriété sur l’élément source à utiliser dans le calcul de contrainte.
  • Type, de type ConstraintType, qui représente le type de la contrainte.

Pour plus d’informations sur Xamarin.Forms les extensions de balisage, consultez Extensions de balisage XAML.

Le code XAML suivant montre un RelativeLayout dont les enfants sont limités par l’extension de ConstraintExpression balisage :

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

Dans cet exemple, la position de chaque BoxView objet est définie en définissant les XConstraint propriétés jointes et YConstraint . La première BoxView a ses XConstraint propriétés et YConstraint attachées définies sur des constantes, qui sont des valeurs absolues. La position des objets restants BoxView est définie à l’aide d’au moins une valeur relative. Par exemple, l’objet jaune BoxView définit la XConstraint propriété jointe sur la largeur de son parent (le RelativeLayout) moins 40. De même, cela BoxView définit la YConstraint propriété jointe à la hauteur de son parent moins 40. Cela garantit que le jaune BoxView s’affiche dans le coin inférieur droit de l’écran.

Notes

BoxView Les objets qui ne spécifient pas de taille sont automatiquement dimensionnés à 40 x 40 par Xamarin.Forms.

L’argent BoxView nommé oneThird est positionné au centre, par rapport à son parent. Il est également dimensionné par rapport à son parent, soit un tiers de sa largeur et de sa hauteur. Pour ce faire, définissez les XConstraint propriétés et WidthConstraint attachées à la largeur du parent (le RelativeLayout), multiplié par 0,33. De même, les YConstraint propriétés jointes et HeightConstraint sont définies sur la hauteur du parent, multipliée par 0,33.

Le noir BoxView est positionné et dimensionné par rapport à .oneThirdBoxView Pour ce faire, définissez ses XConstraint propriétés et YConstraint attachées aux X valeurs et Y , respectivement, de l’élément frère. De même, sa taille est définie sur un tiers de la largeur et de la hauteur de son élément frère. Pour ce faire, définissez ses WidthConstraint propriétés et HeightConstraint attachées aux Width valeurs et Height de l’élément frère, respectivement, qui sont ensuite multipliées par 0,33.

La capture d’écran suivante montre la disposition résultante :

Enfants placés dans un RelativeLayout à l’aide de valeurs relatives

Objets de contrainte

La Constraint classe définit les méthodes statiques publiques suivantes, qui retournent Constraint des objets :

  • Constant, qui limite un enfant à une taille spécifiée avec un double.
  • FromExpression, qui limite un enfant à l’aide d’une expression lambda.
  • RelativeToParent, qui limite un enfant par rapport à la taille de son parent.
  • RelativeToView, qui limite un enfant par rapport à la taille d’une vue.

En outre, la BoundsConstraint classe définit une méthode unique, FromExpression, qui retourne un BoundsConstraint qui limite la position et la taille d’un enfant avec un Expression<Func<Rectangle>>. Cette méthode peut être utilisée pour définir la BoundsConstraint propriété jointe.

Le code C# suivant montre un RelativeLayout dont les enfants sont limités par Constraint des objets :

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

Dans cet exemple, les enfants sont ajoutés à à l’aide de RelativeLayout la Add surcharge qui nécessite un objet facultatif Constraint pour les xarguments , y, widthet height .

Notes

Un RelativeLayout qui utilise des valeurs relatives peut positionner et dimensionner des enfants afin qu’ils ne s’inscrivent pas dans les limites de la disposition.