Xamarin.Forms
Mise en page relative au Xamarin
Recherche…
Remarques
L'utilisation de ForceLayout dans ce cas
La taille des étiquettes et des boutons change en fonction du texte à l'intérieur d'eux. Par conséquent, lorsque les enfants sont ajoutés à la mise en page, leur taille reste égale à 0 en largeur et en hauteur. Par exemple:
relativeLayout.Children.Add(label,
Constraint.RelativeToParent(parent => label.Width));
L'expression ci-dessus renverra 0 car la largeur est 0 pour le moment. Pour contourner ce problème , nous devons écouter l'événement SizeChanged et, lorsque la taille change, nous devons forcer la mise en page afin de la redessiner.
label.SizeChanged += (s, e) => relativeLayout.ForceLayout();
Pour une vue comme BoxView, c'est inutile. Parce que nous pouvons définir leurs tailles lors de l'instanciation. L'autre chose est que, dans les deux cas, nous pouvons définir leur largeur et leur hauteur comme une contrainte lorsque nous les ajoutons à la mise en page. Par exemple:
relativeLayout.Children.Add(label,
Constraint.Constant(0),
Constraint.Constant(0),
//Width constraint
Constraint.Constant(30),
//Height constraint
Constraint.Constant(40));
Cela ajoutera l'étiquette au point 0, 0. La largeur et la hauteur de l'étiquette seront 30 et 40. Cependant, si le texte est trop long, une partie pourrait ne pas apparaître. Si votre étiquette a ou peut avoir une hauteur élevée, vous pouvez utiliser la propriété LineBreakMode de l'étiquette. Qui peut envelopper le texte. Il y a beaucoup d'options dans LineBreakMode enum .
Page avec une étiquette simple au milieu
public class MyPage : ContentPage
{
RelativeLayout _layout;
Label MiddleText;
public MyPage()
{
_layout = new RelativeLayout();
MiddleText = new Label
{
Text = "Middle Text"
};
MiddleText.SizeChanged += (s, e) =>
{
//We will force the layout so it will know the actual width and height of the label
//Otherwise width and height of the label remains 0 as far as layout knows
_layout.ForceLayout();
};
_layout.Children.Add(MiddleText
Constraint.RelativeToParent(parent => parent.Width / 2 - MiddleText.Width / 2),
Constraint.RelativeToParent(parent => parent.Height / 2 - MiddleText.Height / 2));
Content = _layout;
}
}
Boîte après boîte
public class MyPage : ContentPage
{
RelativeLayout _layout;
BoxView centerBox;
BoxView rightBox;
BoxView leftBox;
BoxView topBox;
BoxView bottomBox;
const int spacing = 10;
const int boxSize = 50;
public MyPage()
{
_layout = new RelativeLayout();
centerBox = new BoxView
{
BackgroundColor = Color.Black
};
rightBox = new BoxView
{
BackgroundColor = Color.Blue,
//You can both set width and hight here
//Or when adding the control to the layout
WidthRequest = boxSize,
HeightRequest = boxSize
};
leftBox = new BoxView
{
BackgroundColor = Color.Yellow,
WidthRequest = boxSize,
HeightRequest = boxSize
};
topBox = new BoxView
{
BackgroundColor = Color.Green,
WidthRequest = boxSize,
HeightRequest = boxSize
};
bottomBox = new BoxView
{
BackgroundColor = Color.Red,
WidthRequest = boxSize,
HeightRequest = boxSize
};
//First adding center box since other boxes will be relative to center box
_layout.Children.Add(centerBox,
//Constraint for X, centering it horizontally
//We give the expression as a paramater, parent is our layout in this case
Constraint.RelativeToParent(parent => parent.Width / 2 - boxSize / 2),
//Constraint for Y, centering it vertically
Constraint.RelativeToParent(parent => parent.Height / 2 - boxSize / 2),
//Constraint for Width
Constraint.Constant(boxSize),
//Constraint for Height
Constraint.Constant(boxSize));
_layout.Children.Add(leftBox,
//The x constraint will relate on some level to centerBox
//Which is the first parameter in this case
//We both need to have parent and centerBox, which will be called sibling,
//in our expression paramters
//This expression will be our second paramater
Constraint.RelativeToView(centerBox, (parent, sibling) => sibling.X - spacing - boxSize),
//Since we only need to move it left,
//it's Y constraint will be centerBox' position at Y axis
Constraint.RelativeToView(centerBox, (parent, sibling) => sibling.Y)
//No need to define the size constraints
//Since we initialize them during instantiation
);
_layout.Children.Add(rightBox,
//The only difference hear is adding spacing and boxSize instead of substracting them
Constraint.RelativeToView(centerBox, (parent, sibling) => sibling.X + spacing + boxSize),
Constraint.RelativeToView(centerBox, (parent, sibling) => sibling.Y)
);
_layout.Children.Add(topBox,
//Since we are going to move it vertically this thime
//We need to do the math on Y Constraint
//In this case, X constraint will be centerBox' position at X axis
Constraint.RelativeToView(centerBox, (parent, sibling) => sibling.X),
//We will do the math on Y axis this time
Constraint.RelativeToView(centerBox, (parent, sibling) => sibling.Y - spacing - boxSize)
);
_layout.Children.Add(bottomBox,
Constraint.RelativeToView(centerBox, (parent, sibling) => sibling.X),
Constraint.RelativeToView(centerBox, (parent, sibling) => sibling.Y + spacing + boxSize)
);
Content = _layout;
}
}
