Xamarin.Forms
Xamarin 상대 레이아웃
수색…
비고
이 경우 ForceLayout 의 사용법
라벨과 버튼의 크기는 내부의 텍스트에 따라 변경됩니다. 따라서 레이아웃에 자식을 추가하면 크기가 너비와 높이 모두 0으로 유지됩니다. 예 :
relativeLayout.Children.Add(label,
Constraint.RelativeToParent(parent => label.Width));
위의 표현식은 너비가 0이므로 0을 반환합니다. 이 문제를 해결하려면 SizeChanged 이벤트를 수신해야하며 크기가 변경되면 레이아웃을 강제로 다시 그려야합니다.
label.SizeChanged += (s, e) => relativeLayout.ForceLayout();
BoxView 와 같은 뷰에서는 이것이 필요하지 않습니다. 인스턴스화시 크기를 정의 할 수 있기 때문입니다. 다른 하나는 레이아웃에 폭과 높이를 추가 할 때 폭과 높이를 제약 조건으로 정의 할 수 있다는 것입니다. 예 :
relativeLayout.Children.Add(label,
Constraint.Constant(0),
Constraint.Constant(0),
//Width constraint
Constraint.Constant(30),
//Height constraint
Constraint.Constant(40));
그러면 포인트 0, 0에 레이블이 추가됩니다. 레이블의 너비와 높이는 30과 40입니다. 그러나 텍스트가 너무 길면 일부는 표시되지 않을 수 있습니다. 레이블의 높이가 높거나 높이가있는 경우 label의 LineBreakMode 속성을 사용할 수 있습니다. 어떤 텍스트를 래핑 할 수 있습니다. LineBreakMode 열거 형 에는 많은 옵션이 있습니다.
중간에 간단한 라벨이있는 페이지
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;
}
}
상자 이후 상자
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;
}
}
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow