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 typeConstraint
, qui est une propriété jointe qui représente la contrainte sur la position X de l’enfant.YConstraint
, de typeConstraint
, qui est une propriété jointe qui représente la contrainte sur la position Y de l’enfant.WidthConstraint
, de typeConstraint
, qui est une propriété jointe qui représente la contrainte sur la largeur de l’enfant.HeightConstraint
, de typeConstraint
, qui est une propriété jointe qui représente la contrainte sur la hauteur de l’enfant.BoundsConstraint
, de typeBoundsConstraint
, 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 x
arguments , y
, width
et height
. La troisième surcharge nécessite des objets facultatifs Constraint
pour les x
arguments , y
, width
et height
.
Il est possible de modifier la position et la taille d’un enfant dans un RelativeLayout
avec les SetXConstraint
méthodes , SetYConstraint
, SetWidthConstraint
et 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 XConstraint
propriétés jointes , YConstraint
, WidthConstraint
et 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 , Label
et 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 :
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 XConstraint
propriétés , , YConstraint
WidthConstraint
et 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 typedouble
, qui représente la valeur constante de contrainte.ElementName
, de typestring
, qui représente le nom d’un élément source sur lequel calculer la contrainte.Factor
, de typedouble
, 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 typestring
, qui représente le nom de la propriété sur l’élément source à utiliser dans le calcul de contrainte.Type
, de typeConstraintType
, 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 à .oneThird
BoxView
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 :
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 undouble
.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 x
arguments , y
, width
et 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.