챕터 4 요약. 스택 스크롤

  • 아티클

Download Sample 샘플 다운로드

참고 항목

이 책은 2016년 봄에 출간되었으며, 그 후로 업데이트되지 않았습니다. 이 책의 많은 내용이 지금까지도 무척 유용하나, 일부 내용은 오래되었고 올바르지 않거나 완전하지 않은 주제도 있습니다.

이 장에서는 Xamarin.Forms가 페이지에 있는 여러 가지 보기의 시각적 표시를 구성하는 데 사용하는 클래스와 기법을 통칭하는 용어인 ‘레이아웃’의 개념을 소개합니다.

레이아웃에는 Layout과 Layout<T>에서 파생되는 몇 가지 클래스가 있습니다. 이 챕터에서는 StackLayout을 주로 다룹니다.

참고 항목

Xamarin.Forms 3.0에서 도입된 FlexLayout은 StackLayout과 비슷한 방법으로 사용할 수 있으며 그보다 더 많은 유연성을 제공합니다.

이 챕터에서는 ScrollView, Frame 및 BoxView 클래스도 소개합니다.

보기 스택

StackLayout은 Layout<View>에서 파생되며 IList<View> 형식의 Children 속성을 상속합니다. 이 컬렉션에는 여러 개의 보기 항목을 추가할 수 있으며, StackLayout은 여러 개의 항목을 가로 또는 세로 스택으로 표시합니다.

StackLayout의 Orientation 속성을 StackOrientation 열거형의 멤버인 Vertical 또는 Horizontal로 설정합니다. 기본값은 Vertical입니다.

StackLayout의 Spacing 속성을 double 값으로 지정하여 자식 요소 사이의 간격을 지정합니다. 기본값은 6입니다.

코드에서는 ColorLoop 샘플에 나와 있는 것처럼 for 또는 foreach 루프에서 StackLayout의 Children 컬렉션에 여러 항목을 추가하거나 ColorList에 나와 있는 것처럼 Children 컬렉션을 개별 보기의 목록으로 초기화할 수 있습니다. 자식 요소는 View에서 파생되어야 하지만 다른 StackLayout 개체를 포함할 수 있습니다.

콘텐츠 스크롤

StackLayout에 하나의 페이지에 표시하기에 너무 많은 자식 요소가 있는 경우 ScrollView에 StackLayout을 배치하여 스크롤을 사용할 수 있습니다.

ScrollView의 Content 속성을 스크롤하려는 보기로 설정합니다. 이 보기는 StackLayout인 경우가 많지만 임의의 보기일 수 있습니다.

ScrollView의 Orientation 속성을 ScrollOrientation 속성의 멤버인 Vertical, Horizontal 또는 Both로 설정합니다. 기본값은 Vertical입니다. ScrollView의 콘텐츠가 StackLayout이면 두 방향이 동일해야 합니다.

ReflectedColors 샘플에서는 ScrollView와 StackLayout을 사용하여 사용 가능한 색을 표시하는 방법을 보여 줍니다. 샘플에서는 .NET 리플렉션을 사용하여 명시적으로 나열하지 않고도 Color 구조체의 모든 고정적인 퍼블릭 속성과 필드를 가져오는 방법도 보여 줍니다.

Expands 옵션

StackLayout이 자식 요소를 스택하면 각 자식 요소는 자식 요소의 크기와 HorizontalOptions 및 VerticalOptions 속성의 설정에 따라 달라지는 StackLayout의 총 높이 내에서 특정 슬롯을 차지합니다. 해당 속성에는 LayoutOptions 형식의 값이 할당됩니다.

LayoutOptions 구조체는 다음 두 가지 속성을 정의합니다.

편의를 위해, LayoutOptions 구조체는 두 가지 인스턴스 속성의 모든 조합을 아우르는 LayoutOptions 형식의 8가지 고정적인 읽기 전용 필드도 정의합니다.

아래에서는 기본 세로 방향을 갖는 StackLayout에 대해 설명하며, 가로 StackLayout도 이와 동일합니다.

세로 StackLayout에 대해, HorizontalOptions 설정은 자식 요소가 StackLayout의 너비 내에서 어떻게 배치되는지를 결정합니다. Alignment가 Start, Center 또는 End로 설정되면 자식 요소가 가로 방향으로 제한되지 않습니다. 자식 요소는 자체적으로 너비를 결정하며 StackLayout의 왼쪽, 가운데 또는 오른쪽에 배치됩니다. Fill 옵션을 사용하면 자식 요소가 가로 방향으로 제한되어 StackLayout의 너비를 채웁니다.

세로 StackLayout에 대해, 각 자식 요소는 세로 방향으로 제한되지 않으며 자식 요소의 높이에 따라 세로 슬롯을 갖습니다. 이때 VerticalOptions 설정은 무시됩니다.

세 StackLayout 로 자체가 제약이 없는 경우( 해당 설정이 StartCenter해당 설정인 경우VerticalOptions) 또는 End높이가 자식의 StackLayout 총 높이입니다.

그러나 세 StackLayout 로가 세로로 제한되는 경우(설정인 Fill경우VerticalOptions) 높이가 컨테이너의 StackLayout 높이이며 이는 자식의 총 높이보다 클 수 있습니다. 이때 하나 이상의 자식 요소의 VerticalOptions 설정에서 Expands 플래그가 true로 설정된 경우, StackLayout의 여분의 공간은 Expands 플래그가 true인 자식 요소들에 동일하게 할당됩니다. 자식 요소들의 높이 합계는 StackLayout의 높이와 같아지며, VerticalOptions 설정의 Alignment 부분이 슬롯에서 자식 요소가 세로 방향으로 배치되는 방식을 결정합니다.

이는 VerticalOptionsDemo 샘플에 나와 있습니다.

Frame 및 BoxView

이 두 개의 사각형 보기는 프레젠테이션 용도로 자주 사용됩니다.

Frame 보기는 다른 보기를 둘러싸는 사각형 프레임을 표시합니다. 이 다른 보기는 StackLayout과 같은 레이아웃일 수 있습니다. Frame은 Frame 내부에 표시되도록 설정된 ContentView에서 Content 속성을 상속합니다. Frame은 기본적으로 투명합니다. 다음과 같은 세 가지 속성을 설정하여 프레임의 모양을 사용자 지정할 수 있습니다.

  • OutlineColor 속성을 설정하여 표시합니다. 기본 색 구성표를 모를 때에는 일반적으로 OutlineColor를 Color.Accent로 설정합니다.
  • HasShadow 속성을 true로 설정하여 iOS 디바이스에서 검은색 그림자를 표시할 수 있습니다.
  • Padding 속성을 Thickness 값으로 설정하여 프레임과 프레임의 콘텐츠 사이에 공백을 둘 수 있습니다. 기본값은 모든 쪽에서 20단위입니다.

Frame의 HorizontalOptions 및 VerticalOptions 기본값은 LayoutOptions.Fill입니다. 즉, Frame이 컨테이너를 채웁니다. 다른 설정에서는 Frame의 크기가 콘텐츠의 크기에 따라 정해집니다.

Frame의 예는 FramedText 샘플에 나와 있습니다.

BoxView는 Color 속성으로 지정된 색으로 사각형 영역을 표시합니다.

BoxView가 제한되는 경우(HorizontalOptions 및 VerticalOptions 속성이 기본값 LayoutOptions.Fill로 설정된 경우) BoxView는 사용 가능한 공간을 채웁니다. BoxView가 제한되지 않은 경우(HorizontalOptions 및 LayoutOptions 설정이 Start, Center 또는 End인 경우) 크기가 40단위인 정사각형의 기본 크기를 갖습니다. BoxView는 하나의 차원에서는 제한되고 다른 차원에서는 제한되지 않을 수 있습니다.

BoxView의 WidthRequest 및 HeightRequest 속성을 설정하여 특정 크기를 지정할 수 있습니다. 이는 SizedBoxView 샘플에 나와 있습니다.

StackLayout의 여러 인스턴스를 사용하여 하나의 Frame에서 하나의 BoxView와 여러 개의 Label 인스턴스를 결합하여 특정 색을 표시하도록 한 다음 각 보기를 하나의 ScrollView 안에 있는 StackLayout에 배치하여 ColorBlocks 샘플에 나와 있는 화려한 색 목록을 만들 수 있습니다.

Triple screenshot of color blocks

StackLayout 안의 ScrollView?

ScrollView 안에 StackLayout을 배치하는 것은 흔한 일이지만 때때로 StackLayout 안에 ScrollView를 배치하는 것이 유용할 수 있습니다. 세로 StackLayout의 자식 요소는 세로 방향으로 제한되지 않으므로 이론상으로는 이것이 불가능합니다. 그러나 ScrollView는 세로 방향으로 제한되어야 합니다. 스크롤을 위해 자식 요소의 크기를 확인할 수 있어야 하므로 특정 높이가 지정되어야 합니다.

이를 위한 요령은 StackLayout의 ScrollView 자식 요소의 VerticalOptions를 FillAndExpand로 설정하는 것입니다. 이는 BlackCat 샘플에 나와 있습니다.

BlackCat 샘플에서는 공유 라이브러리에 포함된 프로그램 리소스를 정의하고 라이브러리에 액세스하는 방법도 보여 줍니다. 이는 SAP(공유 자산 프로젝트)를 사용하여 달성할 수 있지만, BlackCatSap 샘플에 나와 있는 것처럼 그보다 조금 더 까다롭습니다.