Xamarin.Forms
Xamarin Forms 레이아웃
수색…
ContentPresenter
템플릿 화 된 뷰의 레이아웃 매니저. ControlTemplate 내에서 표시 할 내용의 위치를 표시하는 데 사용됩니다.
ContentView
단일 내용을 가진 요소. ContentView는 자체적으로 사용하는 것이 거의 없습니다. 이 클래스의 목적은 사용자 정의 복합보기의 기본 클래스 역할을하는 것입니다.
XAML
<ContentView>
<Label Text="Hi, I'm a simple Label inside of a simple ContentView"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</ContentView>
암호
var contentView = new ContentView {
Content = new Label {
Text = "Hi, I'm a simple Label inside of a simple ContentView",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}
};
틀
하나의 자식을 포함하고 일부 프레임 옵션이있는 요소입니다. 프레임의 기본 Xamarin.Forms.Layout.Padding이 20입니다.
XAML
<Frame>
<Label Text="I've been framed!"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Frame>
암호
var frameView = new Frame {
Content = new Label {
Text = "I've been framed!",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
},
OutlineColor = Color.Red
};
ScrollView
Content 의 경우 스크롤 할 수있는 요소가 필요합니다.
ScrollView 에는 레이아웃이 포함되어있어 화면 밖으로 스크롤 할 수 있습니다. ScrollView 는 키보드가 표시 될 때 화면의 보이는 부분으로 뷰가 자동으로 이동하도록하는데도 사용됩니다.
참고 : ScrollViews 는 중첩되어서는 안됩니다. 또한 ScrollViews 는 ListView 및 WebView 와 같이 스크롤을 제공하는 다른 컨트롤과 중첩되어서는 안됩니다.
ScrollView 는 쉽게 정의 할 수 있습니다. XAML에서
<ContentPage.Content>
<ScrollView>
<StackLayout>
<BoxView BackgroundColor="Red" HeightRequest="600" WidthRequest="150" />
<Entry />
</StackLayout>
</ScrollView>
</ContentPage.Content>
코드에서 같은 정의 :
var scroll = new ScrollView();
Content = scroll;
var stack = new StackLayout();
stack.Children.Add(new BoxView { BackgroundColor = Color.Red, HeightRequest = 600, WidthRequest = 600 });
stack.Children.Add(new Entry());
TemplatedView
컨트롤 템플릿을 사용하여 내용을 표시하는 요소 및 ContentView 의 기본 클래스입니다.
앱솔루트 레이아웃
AbsoluteLayout 은 자체 크기 및 위치에 비례하거나 절대 값에 따라 자식 요소의 위치를 지정하고 크기를 지정합니다. 자식 뷰는 비례 값 또는 정적 값을 사용하여 위치 및 크기를 정할 수 있으며 비례 및 정적 값을 혼합 할 수 있습니다.
XAML의 AbsoluteLayout 정의는 다음과 같습니다.
<AbsoluteLayout>
<Label Text="I'm centered on iPhone 4 but no other device"
AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap" />
<Label Text="I'm bottom center on every device."
AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"
LineBreakMode="WordWrap" />
<BoxView Color="Olive" AbsoluteLayout.LayoutBounds="1,.5, 25, 100"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,1,25"
AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional" />
</AbsoluteLayout>
동일한 레이아웃이 코드에서 다음과 같이 보입니다.
Title = "Absolute Layout Exploration - Code";
var layout = new AbsoluteLayout();
var centerLabel = new Label {
Text = "I'm centered on iPhone 4 but no other device.",
LineBreakMode = LineBreakMode.WordWrap};
AbsoluteLayout.SetLayoutBounds (centerLabel, new Rectangle (115, 159, 100, 100));
// No need to set layout flags, absolute positioning is the default
var bottomLabel = new Label { Text = "I'm bottom center on every device.", LineBreakMode = LineBreakMode.WordWrap };
AbsoluteLayout.SetLayoutBounds (bottomLabel, new Rectangle (.5, 1, .5, .1));
AbsoluteLayout.SetLayoutFlags (bottomLabel, AbsoluteLayoutFlags.All);
var rightBox = new BoxView{ Color = Color.Olive };
AbsoluteLayout.SetLayoutBounds (rightBox, new Rectangle (1, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (rightBox, AbsoluteLayoutFlags.PositionProportional);
var leftBox = new BoxView{ Color = Color.Red };
AbsoluteLayout.SetLayoutBounds (leftBox, new Rectangle (0, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (leftBox, AbsoluteLayoutFlags.PositionProportional);
var topBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 100, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional);
var twoFlagsBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 1, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional | AbsoluteLayout.WidthProportional);
layout.Children.Add (bottomLabel);
layout.Children.Add (centerLabel);
layout.Children.Add (rightBox);
layout.Children.Add (leftBox);
layout.Children.Add (topBox);
Xamarin.Forms의 AbsoluteLayout 컨트롤을 사용하면 자식 요소를 표시 할 위치와 크기 및 모양 (경계)을 화면에서 정확하게 지정할 수 있습니다.
이 과정에서 사용되는 AbsoluteLayoutFlags 열거 형을 기반으로 자식 요소의 경계를 설정하는 몇 가지 방법이 있습니다. AbsoluteLayoutFlags 열거 형에는 다음 값이 들어 있습니다.
- 전체 : 모든 차원은 비례합니다.
- HeightProportional : 높이는 레이아웃에 비례합니다.
- 없음 : 해석이 이루어지지 않았습니다.
- PositionProportional : XProportional과 Yproportional을 결합합니다.
- SizeProportional : WidthProportional과 HeightProportional을 결합합니다.
- WidthProportional : 폭 레이아웃에 비례한다.
- XProportional : X 속성은 레이아웃에 비례합니다.
- Yproportional : Y 속성은 레이아웃에 비례합니다.
AbsoluteLayout 컨테이너의 레이아웃을 사용하는 과정은 처음에는 약간의 직관력을 잃어 버릴 수도 있지만 약간 익숙해지면 익숙해집니다. 자식 요소를 만든 후에는 컨테이너 내의 절대 위치에 세 요소를 설정하려면 세 단계를 수행해야합니다. AbsoluteLayout.SetLayoutFlags () 메서드를 사용하여 요소에 할당 된 플래그를 설정해야합니다. 또한 AbsoluteLayout.SetLayoutBounds () 메서드를 사용하여 요소에 경계를 부여 할 수 있습니다. 마지막으로 Children 요소를 Children 컬렉션에 추가하려고합니다. Xamarin.Forms는 Xamarin과 장치 별 구현 간의 추상화 계층이므로 위치 값은 장치 픽셀과 독립적 일 수 있습니다. 이것은 앞서 언급 한 레이아웃 플래그가 작동하는 곳입니다. Xamarin.Forms 컨트롤의 레이아웃 프로세스에서 정의한 값을 해석하는 방법을 선택할 수 있습니다.
그리드
행과 열로 배열 된 뷰가 포함 된 레이아웃입니다.
이것은 XAML의 일반적인 Grid 정의입니다.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentView Grid.Row="0" Grid.Column="0"/>
<ContentView Grid.Row="1" Grid.Column="0"/>
<ContentView Grid.Row="2" Grid.Column="0"/>
<ContentView Grid.Row="0" Grid.Column="1"/>
<ContentView Grid.Row="1" Grid.Column="1"/>
<ContentView Grid.Row="2" Grid.Column="1"/>
</Grid>
코드에서 정의 된 동일한 Grid 는 다음과 같습니다.
var grid = new Grid();
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(2, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(200)});
grid.ColumnDefinitions.Add (new ColumnDefinition{ Width = new GridLength (200) });
모눈에 항목을 추가하려면 : XAML :
<Grid>
<--DEFINITIONS...--!>
<ContentView Grid.Row="0" Grid.Column="0"/>
<ContentView Grid.Row="1" Grid.Column="0"/>
<ContentView Grid.Row="2" Grid.Column="0"/>
<ContentView Grid.Row="0" Grid.Column="1"/>
<ContentView Grid.Row="1" Grid.Column="1"/>
<ContentView Grid.Row="2" Grid.Column="1"/>
</Grid>
C # 코드에서 :
var grid = new Grid();
//DEFINITIONS...
var topLeft = new Label { Text = "Top Left" };
var topRight = new Label { Text = "Top Right" };
var bottomLeft = new Label { Text = "Bottom Left" };
var bottomRight = new Label { Text = "Bottom Right" };
grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 0, 1);
grid.Children.Add(bottomLeft, 1, 0);
grid.Children.Add(bottomRight, 1, 1);
Height 와 Width 대해 여러 단위를 사용할 수 있습니다.
- 자동 - 행이나 열의 내용에 맞게 자동으로 크기가 조절됩니다. C #에서는 GridUnitType.Auto로 지정되고 XAML에서는 Auto로 지정됩니다.
- 비례 - 나머지 열의 비율로 열과 행의 크기를 조정합니다. 값으로 지정되고 C #에서는 GridUnitType.Star로, XAML에서는 # *로, #은 원하는 값으로 지정됩니다. *로 행 / 열을 하나 지정하면 사용 가능한 공간이 채워집니다.
- 절대 - 크기, 높이 및 너비 값이 고정 된 열과 행의 크기를 지정합니다. 값으로 지정되고 C #에서는 GridUnitType.Absolute이고 XAML에서는 #이되고 원하는 값이 #입니다.
참고 : 열의 너비 값은 기본적으로 Xamarin.Forms에서 자동으로 설정됩니다. 즉, 너비는 자식 크기에서 결정됩니다. Microsoft 플랫폼에서 XAML을 구현할 때와 다른 점을 유의하십시오. 여기서 기본 너비는 *이며 사용 가능한 공간을 채 웁니다.
RelativeLayout
Constraints 를 사용해 아이를 배치하는 Layout 입니다.
RelativeLayout 은 레이아웃 또는 형제보기의 속성을 기준으로보기의 위치를 지정하고 크기를 지정하는 데 사용됩니다. AbsoluteLayout 과는 달리 RelativeLayout 에는 움직이는 앵커 개념이 없으며 레이아웃의 아래쪽 또는 오른쪽 가장자리를 기준으로 요소를 배치 할 수있는 기능이 없습니다. RelativeLayout 은 자체 경계 바깥에 위치 요소를 지원합니다.
XAML의 RelativeLayout은 다음과 같습니다.
<RelativeLayout>
<BoxView Color="Red" x:Name="redBox"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}" />
<BoxView Color="Blue"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=redBox,Property=Y,Factor=1,Constant=20}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=redBox,Property=X,Factor=1,Constant=20}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}" />
</RelativeLayout>
이 코드로 동일한 레이아웃을 수행 할 수 있습니다.
layout.Children.Add (redBox, Constraint.RelativeToParent ((parent) => {
return parent.X;
}), Constraint.RelativeToParent ((parent) => {
return parent.Y * .15;
}), Constraint.RelativeToParent((parent) => {
return parent.Width;
}), Constraint.RelativeToParent((parent) => {
return parent.Height * .8;
}));
layout.Children.Add (blueBox, Constraint.RelativeToView (redBox, (Parent, sibling) => {
return sibling.X + 20;
}), Constraint.RelativeToView (blueBox, (parent, sibling) => {
return sibling.Y + 20;
}), Constraint.RelativeToParent((parent) => {
return parent.Width * .5;
}), Constraint.RelativeToParent((parent) => {
return parent.Height * .5;
}));
StackLayout
StackLayout 은 뷰를 1 차원 라인 ( "스택")으로 수평 또는 수직으로 구성합니다. StackLayout Views 는 레이아웃 옵션을 사용하여 레이아웃의 공간을 기준으로 크기를 StackLayout 수 있습니다. 위치 지정은 뷰의 레이아웃 및 레이아웃 옵션에 뷰가 추가 된 순서에 따라 결정됩니다.
XAML의 사용법
<StackLayout>
<Label Text="This will be on top" />
<Button Text="This will be on the bottom" />
</StackLayout>
코드에서의 사용법
StackLayout stackLayout = new StackLayout
{
Spacing = 0,
VerticalOptions = LayoutOptions.FillAndExpand,
Children =
{
new Label
{
Text = "StackLayout",
HorizontalOptions = LayoutOptions.Start
},
new Label
{
Text = "stacks its children",
HorizontalOptions = LayoutOptions.Center
},
new Label
{
Text = "vertically",
HorizontalOptions = LayoutOptions.End
},
new Label
{
Text = "by default,",
HorizontalOptions = LayoutOptions.Center
},
new Label
{
Text = "but horizontal placement",
HorizontalOptions = LayoutOptions.Start
},
new Label
{
Text = "can be controlled with",
HorizontalOptions = LayoutOptions.Center
},
new Label
{
Text = "the HorizontalOptions property.",
HorizontalOptions = LayoutOptions.End
},
new Label
{
Text = "An Expand option allows one or more children " +
"to occupy the an area within the remaining " +
"space of the StackLayout after it's been sized " +
"to the height of its parent.",
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.End
},
new StackLayout
{
Spacing = 0,
Orientation = StackOrientation.Horizontal,
Children =
{
new Label
{
Text = "Stacking",
},
new Label
{
Text = "can also be",
HorizontalOptions = LayoutOptions.CenterAndExpand
},
new Label
{
Text = "horizontal.",
},
}
}
}
};
