Chapter 4. Scrolling the stack, part 2

The Expands option

HorizontalOptions 및 VerticalOptions 속성 이름이 복수형이라는 것을 알아채셨을 것입니다. 이 속성들은 일반적으로 LayoutOptions 구조체의 정적 필드로 설정됩니다. 

지금까지 우리는 LayoutOptions에  미리 정의된 static read-only LayoutOptions 필드에 관해 얘기했습니다. 그것들은 다음과 같습니다.

• LayoutOptions.Start
• LayoutOptions.Center
• LayoutOptions.End
• LayoutOptions.Fill

View 클래스에 의해 설정된 디폴트 값은 LayoutOptions.Fill이기 때문에 view는 컨테이너를 가득 채웁니다.

지금까지 본 바에 따르면, Label이 세로 StackLayout의 child인 경우 Label의 VerticalOptions 설정은 차이를 만들지 않습니다. StackLayout 자체가 child의 높이를 필요한 높이로 제한하므로, child는 정해진 슬롯 내에서 수직 방향으로 이동할 자유가 없습니다.

이제 이 원칙을 좀 수정하겠습니다.

LayoutOptions에는 아직 거론하지 않은 네 개의 static read-only 필드가 더 있습니다:

• LayoutOptions.StartAndExpand
• LayoutOptions.CenterAndExpand
• LayoutOptions.EndAndExpand
• LayoutOptions.FillAndExpand

또한 LayoutOptions는 Alignment와 Expands라는 두 개의 인스턴스 속성도 정의합니다. AndExpand로 끝나는 이 네 개의 LayoutOptions 인스턴스에는 모두 Expands 속성이 true로 설정되어 있습니다.

이 Expands 속성은 StackLayout에 의해서만 인식됩니다. 페이지의 레이아웃을 관리하는 데 매우 유용하지만, 처음 볼 때는 혼동이 올 수 있습니다. 다음은 Expands가 수직 StackLayout에서 역할을 수행하기 위한 요구 사항입니다.

• StackLayout의 내용의 전체 높이는 StackLayout 자체의 높이보다 작아야 합니다. 즉, 사용되지 않는 여분의 수직 공간이 StackLayout에 존재해야 합니다.
• 이 첫 번째 요구 사항이 의미하는 바는, 수직 StackLayout은 Start, Center 또는 End로 설정될 수 없다는 뜻입니다. Start, Center, End로 설정되면 StackLayout이 그 children의 높이를 모두 더한 것과 같게 설정되어, 여분의 공간이 없어지기 때문입니다.
• StackLayout의 하나 이상의 자식은 Expands 속성이 true로 설정된 VerticalOptions 설정을 가져야합니다.

이러한 조건이 만족되면, StackLayout은 Expands가 true로 설정된 VerticalOptions 설정을 가진 모든 자식간에 균등하게 추가 수직 공간을 할당합니다. 이러한 각 children은, StackLayout 내에서 통상보다 큰 슬롯을 얻습니다. 자식이 해당 슬롯을 차지하는 방식은 LayoutOptions 값의 Alignment 설정인 Start, Center, End, Fill에 따라 다릅니다.

다음은 VerticalOptionsDemo라는 프로그램으로, 리플렉션을 사용하여 가능한 모든 VerticalOptions 설정이있는 Label 객체를 세로 StackLayout에 만듭니다. 배경색과 전경색이 번갈아 가며 각 Label이 차지하는 공간을 정확히 볼 수 있습니다. 이 프로그램은 LINQ를 사용하여 시각적으로 더 밝은 방식으로 LayoutOptions 구조체의 필드를 정렬합니다. 

public class VerticalOptionsDemoPage : ContentPage {     public VerticalOptionsDemoPage()     {         Color[] colors = { Color.Yellow, Color.Blue };         int flipFlopper = 0;         // LayoutAlignment property에 의해 정렬된 Label 생성         IEnumerable<Label> labels =             from field in typeof(LayoutOptions).GetRuntimeFields()             where field.IsPublic && field.IsStatic             orderby ((LayoutOptions)field.GetValue(null)).Alignment             select new Label             {                 Text = "Vertical options = " + field.Name,                 VerticalOptions = (LayoutOptions)field.GetValue(null),                 HorizontalTextAlignment = TextAlignment.Center,                 FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),                 TextColor = colors[flipFlopper],                 BackgroundColor = colors[flipFlopper = 1 - flipFlopper]             };         // Transfer to StackLayout         StackLayout stackLayout = new StackLayout();         foreach (Label label in labels)         {             stackLayout.Children.Add(label);         }         Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);         Content = stackLayout;     } } Colored by Color Scripter

cs

결과에 대해서 좀 알아보도록 합시다.

파란색 배경에 노란색 텍스트가있는 Label view는 Expands 플래그가 설정되지 않은 상태에서 VerticalOptions 속성이 LayoutOptions 값으로 설정된 것입니다. 세로 StackLayout항목의 LayoutOptions 값에 Expands 플래그가 설정되어 있지 않으면 VerticalOptions 설정이 무시됩니다. 보시다시피, Label은 수직 StackLayout에서 필요한 만큼만 수직 공간을 차지합니다. 이 StackLayout 내 children의 전체 높이는 StackLayout의 높이보다 작으므로, StackLayout에는 여분의 공간이 있습니다. 이 화면에는 네 개의 children이 있어서 여분의 공간이 그들 사이에 균등하게 할당됩니다.

위의 네 가지 경우에서 LayoutOptions 값의 Alignment 속성은 추가 공간이 포함된 영역 내에서 children이 정렬되는 방법을 나타냅니다. 첫번째 것은(VerticalOptions가LayoutOptions.StartAndExpand로 설정된) 여분의 공간 위에 올려집니다. 그리고, 두 번째 (CenterAndExpand)는 추가 공간의 중간에, 세 번째(EndAndExpand)는 추가 공간 아래에 배치됩니다. 그러나 세 가지 경우 모두 레이블은 배경색으로 알수 있듯이, 필요한 수직 공간만큼만 표시됩니다. 나머지 공간은 StackLayout에 속하며 페이지의 배경색을 표시합니다.

마지막 레이블은 VerticalOptions 속성이 LayoutOptions.FillAndExpand로 되어 있습니다. 이 경우 노란색 배경색이 전체에 퍼져있는 것으로 알 수 있듯이 Label은 추가공간을 포함한 전체 영역을 차지합니다. 텍스트는 이 영역의 가장 위에 있는데, 그 이유는 VerticalTextAlignment의 기본 설정이 TextAlignment.Start이기 때문입니다. 텍스트를 영역 내에 세로 방향으로 배치하려면 다른 것으로 설정하십시오.

LayoutOptions의 Expands 속성은 뷰가 StackLayout의 child일 때만 역할을 수행합니다. 다른 맥락에서는 무시됩니다.