[C#] Xamarin.Form의 LayoutOptions, 특히 채우기 및 확장의 차이점은 무엇입니까?

짧은 답변

Start, Center, End및 Fill뷰의 정의 의 공간에 정렬 .

Expand사용 가능한 경우 더 많은 공간을 차지하는지 여부를 정의 합니다 .

이론

구조 LayoutOptions는 두 가지 별개의 동작을 제어합니다.

1. 정렬 : 상위 뷰 내에서 뷰가 어떻게 정렬됩니까?

   • Start: 세로 정렬의 경우보기가 맨 위로 이동합니다. 수평 정렬의 경우 일반적으로 왼쪽입니다. (단, 오른쪽에서 왼쪽으로 언어가 설정되어있는 장치에서는 다른 방법, 즉 오른쪽 정렬입니다.)
   • Center: 뷰가 중앙에 있습니다.
   • End: 일반적으로보기가 아래쪽 또는 오른쪽으로 정렬됩니다. (물론 오른쪽에서 왼쪽으로 쓰는 언어에서는 왼쪽 정렬됩니다.)
   • Fill:이 정렬은 약간 다릅니다. 뷰는 부모 뷰의 전체 크기로 확장됩니다.

   그러나 부모가 자식보다 크지 않으면 해당 정렬 사이에 차이가 없습니다. 정렬은 사용 가능한 추가 공간이있는 부모 뷰에만 중요합니다.

2. 확장 : 가능한 경우 요소가 더 많은 공간을 차지합니까?

   • 접미사 Expand: 상위 뷰가 모든 하위의 결합 된 크기보다 큰 경우, 즉 추가 공간을 사용할 수있는 경우 해당 접미사가있는 하위 뷰 사이에 공간이 비례합니다. 그 아이들은 자신의 공간을 “사용”하지만 반드시 “채우지”는 않습니다. 아래 예제에서이 동작을 살펴 보겠습니다.
   • 접미사 없음 : Expand접미사가없는 어린이 는 사용 가능한 공간이 더 있어도 추가 공간을 얻지 못합니다.

   다시 말하지만 부모 뷰가 자식 뷰보다 크지 않으면 확장 접미사도 아무런 차이가 없습니다.

예

다음 예제에서 8 가지 레이아웃 옵션의 차이점을 살펴 보겠습니다.

앱에는 StackLayout8 개의 중첩 된 흰색 버튼 이있는 짙은 회색이 있으며 각 버튼에는 세로 레이아웃 옵션이 표시되어 있습니다. 버튼 중 하나를 클릭하면 세로 레이아웃 옵션이 스택 레이아웃에 할당됩니다. 이런 식으로 서로 다른 레이아웃 옵션을 사용하여 뷰와 부모와의 상호 작용을 쉽게 테스트 할 수 있습니다.

(마지막 몇 줄의 코드는 노란색 상자를 추가합니다. 잠시 후 다시 올 것입니다.)

public static class App
{
    static readonly StackLayout stackLayout = new StackLayout {
        BackgroundColor = Color.Gray,
        VerticalOptions = LayoutOptions.Start,
        Spacing = 2,
        Padding = 2,
    };

    public static Page GetMainPage()
    {
        AddButton("Start", LayoutOptions.Start);
        AddButton("Center", LayoutOptions.Center);
        AddButton("End", LayoutOptions.End);
        AddButton("Fill", LayoutOptions.Fill);
        AddButton("StartAndExpand", LayoutOptions.StartAndExpand);
        AddButton("CenterAndExpand", LayoutOptions.CenterAndExpand);
        AddButton("EndAndExpand", LayoutOptions.EndAndExpand);
        AddButton("FillAndExpand", LayoutOptions.FillAndExpand);

        return new NavigationPage(new ContentPage {
            Content = stackLayout,
        });
    }

    static void AddButton(string text, LayoutOptions verticalOptions)
    {
        stackLayout.Children.Add(new Button {
            Text = text,
            BackgroundColor = Color.White,
            VerticalOptions = verticalOptions,
            HeightRequest = 20,
            Command = new Command(() => {
                stackLayout.VerticalOptions = verticalOptions;
                (stackLayout.ParentView as Page).Title = "StackLayout: " + text;
            }),
        });
        stackLayout.Children.Add(new BoxView {
            HeightRequest = 1,
            Color = Color.Yellow,
        });
    }
}

다음 스크린 샷은 8 개의 각 버튼을 클릭했을 때의 결과를 보여줍니다. 우리는 다음을 관찰합니다.

• 부모 stackLayout가 타이트한 경우 ( Fill페이지 는 아님 ) 각각의 세로 레이아웃 옵션 Button은 무시할 수 있습니다.
• 수직 레이아웃 옵션 stackLayout은 크기가 더 크고 (예 : Fill정렬을 통해 ) 개별 버튼에 Expand접미사 가있는 경우에만 중요합니다 .
• 추가 공간은 결국 Expand접미사가있는 모든 버튼 사이에 비례합니다 . 이를보다 명확하게 확인하기 위해 인접한 두 버튼 사이에 노란색 수평선을 추가했습니다.
• 요청한 높이보다 더 많은 공간이있는 버튼이 반드시 “채우는”것은 아닙니다. 이 경우 실제 동작은 해당 정렬에 의해 제어됩니다. 예를 들어 공간의 상단, 중앙 또는 버튼에 정렬되거나 완전히 채워집니다.
• 모든 버튼은 레이아웃의 전체 너비에 걸쳐 VerticalOptions있습니다.

여기에 해당 고해상도 스크린 샷이 있습니다.

답변

        <StackLayout HorizontalOptions="FillAndExpand"
                     Orientation="Vertical"
                     WidthRequest="300">
            <Label BackgroundColor="{StaticResource TileAlerts}"
                   HorizontalOptions="FillAndExpand"
                   Style="{StaticResource LabelStyleReversedLrg}"
                   HorizontalTextAlignment="Center"
                   Text="Alerts" />

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Alignments.MainPage"
             BackgroundColor="White">


    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="LightGray" Padding="1" Margin="30">
        <Label Text="Vert: EndAndExpand, Horz: EndAndExpand" VerticalOptions="EndAndExpand" HorizontalOptions="EndAndExpand" BackgroundColor="White"/>
    </StackLayout>


</ContentPage>

<Label Text="Vert: Start, Horz: Start" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="White"/>

<Label Text="Vert: StartAndExpand, Horz: StartAndExpand" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" BackgroundColor="White"/>