다음을 통해 공유

Xamarin.Forms 레이아웃 선택

  • 아티클

Xamarin.Forms 레이아웃 클래스를 사용하면 애플리케이션에서 UI 컨트롤을 정렬하고 그룹화할 수 있습니다. 레이아웃 클래스를 선택하려면 레이아웃이 자식 요소의 위치를 지정하는 방법과 레이아웃의 자식 요소 크기를 조정하는 방법에 대한 지식이 필요합니다. 또한 원하는 레이아웃을 만들려면 레이아웃을 중첩해야 할 수도 있습니다.

다음 이미지는 기본 Xamarin.Forms 레이아웃 클래스를 사용하여 수행할 수 있는 일반적인 레이아웃을 보여 줍니다.

의 기본 레이아웃 클래스 Xamarin.Forms

StackLayout

StackLayout 1차원 스택의 요소를 가로 또는 세로로 구성합니다. 속성 요소 Orientation 의 방향을 지정 하 고 기본 방향은 Vertical. StackLayout 는 일반적으로 페이지에서 UI의 하위 섹션을 정렬하는 데 사용됩니다.

다음 XAML에서는 세 개의 Label 개체를 포함하는 세 StackLayout 로를 만드는 방법을 보여 있습니다.

<StackLayout Margin="20,35,20,25">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

에서 StackLayout요소의 크기가 명시적으로 설정되지 않은 경우 확장되어 사용 가능한 너비를 채우거나 속성이 설정된 경우 Orientation 높이를 Horizontal채웁니다.

A StackLayout 는 종종 다른 자식 레이아웃을 포함하는 부모 레이아웃으로 사용됩니다. 그러나 개체 조합을 StackLayout 사용하여 StackLayout 레이아웃을 Grid 재현하는 데는 사용하지 않아야 합니다. 다음 코드에서는 이러한 잘못된 사례의 예를 보여 드리고 있습니다.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Details.HomePage"
             Padding="0,20,0,0">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Name:" />
            <Entry Placeholder="Enter your name" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Age:" />
            <Entry Placeholder="Enter your age" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Occupation:" />
            <Entry Placeholder="Enter your occupation" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Address:" />
            <Entry Placeholder="Enter your address" />
        </StackLayout>
    </StackLayout>
</ContentPage>

불필요한 레이아웃 계산이 수행되기 때문에 이는 불필요합니다. 대신 , 를 사용하여 Grid원하는 레이아웃을 더 잘 구현할 수 있습니다.

팁

를 StackLayout사용하는 경우 자식 요소가 하나만으로 설정되어 있는지 확인합니다 LayoutOptions.Expands. 이 속성은 지정된 자식 요소가 StackLayout에서 허용하는 최대의 공간을 차지하도록 하며, 이는 이러한 계산이 두 번 이상 수행되도록 하여 불필요합니다.

자세한 내용은 StackLayout을 참조 Xamarin.Forms 하세요.

그리드

A Grid 는 비례 또는 절대 크기를 가질 수 있는 행과 열에 요소를 표시하는 데 사용됩니다. 표의 행과 열은 및 ColumnDefinitions 속성으로 RowDefinitions 지정됩니다.

특정 Grid 셀에 요소를 배치하려면 연결된 속성을 사용합니다 Grid.Column Grid.Row . 요소가 여러 행과 열에 걸쳐 있도록 하려면 연결된 속성과 Grid.ColumnSpan 속성을 사용합니다Grid.RowSpan.

참고 항목

레이아웃은 Grid 테이블과 혼동해서는 안 되며 테이블 형식 데이터를 표시하기 위한 것이 아닙니다. HTML 테이블과 달리 콘텐츠 Grid 배치를 위한 것입니다. 테이블 형식 데이터를 표시하려면 ListView, CollectionView 또는 TableView를 사용하는 것이 좋습니다.

다음 XAML에서는 두 개의 행과 두 개의 열로 Grid 만드는 방법을 보여 줍니다.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>    
    <Label Text="Column 0, Row 0"
           WidthRequest="200" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>

이 예제에서 크기 조정은 다음과 같이 작동합니다.

  • 각 행의 명시적 높이는 50개의 디바이스 독립적 단위입니다.
  • 첫 번째 열의 너비는 자식에 Auto필요한 만큼 너비로 설정됩니다. 이 경우 첫 번째 Label너비를 수용할 수 있는 200개의 디바이스 독립적 단위입니다.

자동 크기 조정을 사용하여 열 또는 행 내에서 공간을 분산할 수 있으므로 열과 행의 크기가 콘텐츠에 맞게 조정됩니다. 이 작업은 높이 또는 너비ColumnDefinition를 .로 설정RowDefinition하여 Auto수행됩니다. 비례 크기 조정을 사용하여 그리드의 행과 열 간에 사용 가능한 공간을 가중 비율로 분산할 수도 있습니다. 이 작업은 연산자를 사용하는 값으로 RowDefinition높이 또는 너비 ColumnDefinition를 설정하여 수행됩니다 * .

주의

가능한 한 적은 수의 행과 열이 크기로 설정되어 있는지 확인합니다 Auto . 자동으로 크기가 조정된 행이나 열은 레이아웃 엔진이 추가적인 레이아웃 계산을 수행하도록 합니다. 가능한 경우 고정된 크기의 행과 열을 대신 사용하세요. 또는 열거형 값을 사용하여 비례 공간의 양을 차지하도록 행과 GridUnitType.Star 열을 설정합니다.

자세한 내용은 Grid를 참조하세요Xamarin.Forms.

FlexLayout

A FlexLayout 는 자식 요소를 가로 또는 세로로 스택에 표시한다는 점과 비슷합니다 StackLayout . 그러나 FlexLayout 단일 행 또는 열에 맞지 않는 항목이 너무 많으면 자식을 래핑할 수도 있으며 자식 요소의 크기, 방향 및 맞춤을 보다 세밀하게 제어할 수 있습니다.

다음 XAML은 단일 열에 해당 뷰를 FlexLayout 표시하는 만드는 방법을 보여 줍니다.

<FlexLayout Direction="Column"
            AlignItems="Center"
            JustifyContent="SpaceEvenly">
    <Label Text="FlexLayout in Action" />
    <Button Text="Button" />
    <Label Text="Another Label" />
</FlexLayout>

이 예제에서 레이아웃은 다음과 같이 작동합니다.

  • 속성이 Direction 설정 Column되어 항목의 자식이 항목의 FlexLayout 단일 열에 정렬됩니다.
  • 속성이 AlignItems 설정 Center되어 각 항목이 가로 가운데에 배치됩니다.
  • 속성이 JustifyContent 설정 SpaceEvenly됩니다. 이 속성은 모든 항목 간에 모든 남은 세로 공간을 동일하게 할당하고 첫 번째 항목 위와 마지막 항목 아래에 동일하게 할당합니다.

자세한 내용은 FlexLayout을 참조 Xamarin.Forms 하세요.

RelativeLayout

A RelativeLayout 는 레이아웃 또는 형제 요소의 속성을 기준으로 요소를 배치하고 크기를 조정하는 데 사용됩니다. 기본적으로 요소는 레이아웃의 왼쪽 위 모서리에 배치됩니다. A RelativeLayout 를 사용하여 디바이스 크기에 비례하여 크기를 조정하는 UI를 만들 수 있습니다.

RelativeLayout내에서 위치 및 크기는 제약 조건으로 지정됩니다. 제약 조건에는 Factor 위치와 Constant 크기를 다른 개체의 속성에 대한 배수(또는 분수)와 상수로 정의하는 데 사용할 수 있는 속성이 있습니다. 또한 상수는 음수일 수 있습니다.

참고 항목

A RelativeLayout 는 자체 경계를 벗어난 요소의 위치 지정을 지원합니다.

다음 XAML에서는 다음의 요소를 정렬하는 방법을 보여 드립니다.RelativeLayout

<RelativeLayout>
    <BoxView Color="Blue"
             HeightRequest="50"
             WidthRequest="50"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}" />
    <BoxView Color="Red"
             HeightRequest="50"
             WidthRequest="50"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.85}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}" />
    <BoxView x:Name="pole"
             Color="Gray"
             WidthRequest="15"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.75}"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.45}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.25}" />
    <BoxView Color="Green"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.10, Constant=10}"
             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.2, Constant=20}"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=X, Constant=15}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=Y, Constant=0}" />
</RelativeLayout>

이 예제에서 레이아웃은 다음과 같이 작동합니다.

  • 파란색 BoxView 에는 50x50 디바이스 독립적 단위의 명시적 크기가 지정됩니다. 기본 위치인 레이아웃의 왼쪽 위 모서리에 배치됩니다.
  • 빨간색 BoxView 에는 50x50 디바이스 독립적 단위의 명시적 크기가 지정됩니다. 레이아웃의 오른쪽 위 모서리에 배치됩니다.
  • 회색 BoxView 은 15개의 디바이스 독립적 단위의 명시적 너비가 지정되며, 높이가 부모 높이의 75%로 설정됩니다.
  • 녹색 BoxView 에는 명시적 크기가 지정되지 않습니다. 해당 위치는 명명pole된 BoxView 위치를 기준으로 설정됩니다.

Warning

가능한 경우 RelativeLayout을 사용하지 마세요. 그러면 CPU가 훨씬 더 많은 작업을 수행해야 합니다.

자세한 내용은 RelativeLayout을 참조 Xamarin.Forms 하세요.

AbsoluteLayout

명시 AbsoluteLayout 적 값 또는 레이아웃 크기에 상대적인 값을 사용하여 요소의 위치를 지정하고 크기를 조정하는 데 사용됩니다. 위치는 자식 AbsoluteLayout의 왼쪽 위 모서리에 따라 지정됩니다.

자 AbsoluteLayout 식에 크기를 적용할 수 있거나 요소의 크기가 다른 자식의 위치 지정에 영향을 주지 않는 경우에만 사용할 특별한 용도의 레이아웃으로 간주되어야 합니다. 이 레이아웃의 표준 사용은 사용자가 페이지의 일반 컨트롤과 상호 작용하지 않도록 다른 컨트롤로 페이지를 포괄하는 오버레이를 만드는 것입니다.

Important

HorizontalOptions 및 VerticalOptions 속성은 AbsoluteLayout의 자식에 영향을 주지 않습니다.

AbsoluteLayoutAbsoluteLayout.LayoutBounds 내에서 연결된 속성은 요소의 가로 위치, 세로 위치, 너비 및 높이를 지정하는 데 사용됩니다. 또한 연결된 속성은 AbsoluteLayout.LayoutFlags 레이아웃 범위를 해석하는 방법을 지정합니다.

다음 XAML에서는 다음의 요소를 정렬하는 방법을 보여 드립니다 AbsoluteLayout.

<AbsoluteLayout Margin="40">
    <BoxView Color="Red"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="30" />
    <BoxView Color="Green"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="60" />
    <BoxView Color="Blue"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" />
</AbsoluteLayout>

이 예제에서 레이아웃은 다음과 같이 작동합니다.

  • 각각 BoxView 은 100x100의 명시적 크기로 지정되며 가로 가운데에 있는 동일한 위치에 표시됩니다.
  • 빨간색 BoxView 은 30도 회전하고 녹색 BoxView 은 60도 회전됩니다.
  • 각각의 BoxView연결된 AbsoluteLayout.LayoutFlags 속성은 너비와 높이를 고려한 후의 나머지 공간에 비례하는 위치임을 나타내는 것으로 설정 PositionProportional됩니다.

주의

레이아웃 엔진이 추가 레이아웃 계산을 AbsoluteLayout.AutoSize 수행하게 되므로 가능하면 속성을 사용하지 마세요.

자세한 내용은 AbsoluteLayout을 참조 Xamarin.Forms 하세요.

입력 투명도

각 시각적 요소에는 InputTransparent 요소가 입력을 받는지 여부를 정의하는 데 사용되는 속성이 있습니다. 기본값은 false요소가 입력을 수신하도록 하는 것입니다.

레이아웃 클래스에서 이 속성을 설정하면 해당 값이 자식 요소로 전송됩니다. 따라서 속성을 true 레이아웃 클래스에 설정 InputTransparent 하면 레이아웃 내의 모든 요소가 입력을 받지 않습니다.

레이아웃 성능

최상의 레이아웃 성능을 얻으려면 레이아웃 성능 최적화의 지침을 따르세요.

또한 시각적 트리에서 지정된 레이아웃을 제거하는 레이아웃 압축을 사용하여 페이지 렌더링 성능을 향상시킬 수도 있습니다. 자세한 내용은 레이아웃 압축을 참조 하세요.