보기의 크기 지정

  • 7분

디바이스의 크기와 픽셀 밀도가 다양하기 때문에 여러 디바이스에서 일관적으로 표시되는 사용자 인터페이스를 디자인하기는 쉽지 않습니다. 휴대전화, 태블릿, 데스크톱 등, 우리가 사용할 수 있는 다양한 디바이스를 떠올려 보세요. 각 디바이스에서 비슷하게 보이는 사용자 인터페이스를 만들려면 어떻게 해야 할까요?

.NET MAUI는 일관적인 사용자 인터페이스를 빌드할 수 있는 레이아웃 패널을 제공합니다. 레이아웃 패널은 자식 보기의 크기와 위치를 조정하는 일을 담당합니다. 이 단원에서는 레이아웃 시스템이 .NET MAUI에서 어떤 방식으로 작동하는지 알아보겠습니다. 특히 보기의 크기가 기본적으로 어떻게 조정되는지, 런타임에 보기의 특정 크기 및 위치를 요청하려면 어떻게 해야 하는지 알아보겠습니다.

레이아웃 패널이란?

레이아웃 패널은 자식 보기 컬렉션을 보관하고 자식 보기의 크기와 위치를 결정하는 .NET MAUI 컨테이너입니다. 사용자가 디바이스를 회전하는 경우처럼 앱 크기가 변하면 레이아웃 패널이 자동으로 다시 계산합니다.

참고

용어 보기 또는 자식 보기는 레이아웃 패널에 배치된 컨트롤을 나타냅니다. 보기는 레이블, 단추, 입력 필드 또는 .NET MAUI에서 지원하는 다른 유형의 시각적 요소일 수 있습니다.

.NET MAUI에는 선택할 수 있는 여러 레이아웃 패널이 있습니다. 각 패널은 자식 보기를 다른 방식으로 관리합니다. 다음은 가장 일반적인 옵션 중 일부의 개념적 개요를 보여주는 일러스트레이션입니다.

Illustration showing representative StackLayout, AbsoluteLayout, FlexLayout, and Grid designs.

  • StackLayout: 단일 행 또는 열에 자식 보기를 정렬합니다. StackLayout 외에도 방향을 변경할 필요가 없는 경우 새롭게 최적화된 VerticalStackLayout 및 HorizontalStackLayout도 있습니다.
  • AbsoluteLayout: x 및 y 좌표를 사용하여 자식 보기를 정렬합니다.
  • Grid: 행과 열의 교차점에서 만든 셀에서 자식 뷰를 정렬합니다.
  • FlexLayout: 자식 보기가 단일 행 또는 열에 맞지 않는 경우 래핑할 수 있다는 점을 제외하고 자식 보기를 StackLayout처럼 정렬합니다.

참고 항목

또한 서로 상대적으로 자식 보기를 정렬하는 방식을 지정할 수 있는 RelativeLayout이라는 다섯 번째 형식이 있습니다. RelativeLayout보다는 더 나은 성능을 제공하는 FlexLayout 컨트롤을 사용해야 합니다. RelativeLayout은 이전 Xamarin 앱에 대한 이전 버전과의 호환성을 위해 .NET MAUI에 포함되어 있습니다.

.NET MAUI 페이지를 빌드하는 일반적인 프로세스는 레이아웃 패널을 만든 다음, 자식 보기를 레이아웃 패널에 추가하는 것입니다. 레이아웃에 보기를 추가할 때 보기의 크기와 위치에 영향력을 행사할 수 있습니다. 그러나 내부 레이아웃 알고리즘에 따라 최정 결정을 내리는 것은 패널입니다.

보기의 특정 크기를 요청하는 방법을 살펴보기 전에, 레이아웃 시스템이 보기의 크기를 기본적으로 어떻게 조정하는지 살펴보겠습니다.

보기의 기본 크기

보기의 크기를 지정하지 않으면 콘텐츠에 딱 맞는 크기로 자동 확장됩니다. 예를 들어 다음 XAML을 생각해 보세요.

<Label
    Text="Hello"
    BackgroundColor="Silver"
    VerticalOptions="Center"
    HorizontalOptions="Center" 
    FontSize="40"/>

이 예제에서는 은색 배경에 단어 Hello를 표시하는 레이블을 정의합니다. 크기를 지정하지 않으므로 레이블의 크기가 자동으로 단어 Hello 주위에 맞게 조정됩니다. 다음 이미지는 Android 디바이스에서 렌더링된 레이블을 보여줍니다.

Screenshot showing a label rendered on an Android device that displays the word Hello in the center with a silver background.

참고 항목

런타임에 크기가 어떻게 되는지 쉽게 확인할 수 있도록 레이블의 배경색을 설정할 수 있습니다. 이 디버깅 기술을 기억해 두면 UI를 빌드할 때 유용하게 활용할 수 있습니다.

보기의 크기 지정

일반적으로 UI를 빌드할 때 보기의 크기를 제어하려 합니다. 예를 들어 로그인 페이지를 빌드할 예정이며 로그인 단추의 크기를 정확히 화면 너비의 절반으로 만들려 한다고 가정해 봅시다. 보기에 기본 크기를 사용하면 단추가 로그인 텍스트 크기로 표시됩니다. 크기가 충분히 크지 않으므로 직접 크기를 지정해야 합니다.

View 기본 클래스는 보기의 크기에 영향을 주는 두 가지 속성 WidthRequest 및 HeightRequest를 정의합니다. WidthRequest는 너비를 지정하고, HeightRequest는 높이를 지정합니다. 두 속성 모두 double 형식입니다.

다음은 XAML에서 레이블의 너비와 높이를 지정하는 방법을 보여주는 예제입니다.

<Label
    Text="Hello"
    BackgroundColor="Silver"
    VerticalOptions="Center"
    HorizontalOptions="Center"
    WidthRequest="100"
    HeightRequest="300"
    FontSize="40"/>

결과는 다음과 같습니다.

Screenshot showing a label rendered on an Android device that displays the word Hello in the center with a silver background. The label is sized explicitly

참고 항목

레이블의 텍스트가 레이블 중앙에 없더라도 레이블은 여전히 가운데에 있습니다.

이러한 속성의 이름을 잘 보시기 바랍니다. 두 속성 모두 request라는 단어를 포함하고 있습니다. 이 단어는 레이아웃 패널이 런타임에 두 속성을 따르지 않을 수도 있다는 의미입니다. 레이아웃 패널은 크기를 계산하는 동안 이러한 값을 읽고, 가능하다면 요청을 수용하려고 시도합니다. 공간이 충분하지 않은 경우 레이아웃 패널이 값을 무시하도록 허용됩니다.

크기 단위

WidthRequest 및 HeightRequest를 설정할 때 100 같은 리터럴 값을 사용합니다. .NET MAUI 수준에서는 이 값에 단위가 없습니다. 포인트도 아니고 픽셀도 아닙니다. 단지 double 형식의 값일 뿐입니다. .NET MAUI는 런타임에 이러한 값을 기본 운영 체제로 전달합니다. 숫자의 의미를 확인하는 데 필요한 컨텍스트를 제공하는 것은 운영 체제입니다.

  • iOS에서는 이 값을 포인트라고 부릅니다.
  • Android에서는 밀도 독립적 픽셀입니다.

렌더링된 보기의 크기

보기의 크기를 결정하는 것은 레이아웃 패널이므로 WidthRequest 및 HeightRequest를 사용하여 런타임에 실제 크기를 알려줄 수 없습니다. 예를 들어 레이블의 WidthRequest를 100으로 설정했지만 레이블에 이 요청을 충족할 공간이 부족하다고 가정해 봅시다. 그래서 패널이 레이블의 너비를 80으로 설정합니다. 이 시점에서 WidthRequest 속성의 값을 확인하면 렌더링된 값이 80에 불과한데도 100으로 표시됩니다.

이 문제를 해결하기 위해 View 기본 클래스는 Width 및 Height라는 두 가지 다른 속성을 정의합니다. 두 속성은 double 형식이며 보기의 렌더링된 너비와 높이를 나타냅니다. 보기의 크기를 검색할 때마다 Width 및 Height 속성을 사용합니다.

보기의 위치 지정

보기의 위치도 설정해야 합니다. 예를 들어 앞에서 본 로그인 페이지 예제에서는 로그인 단추를 화면 너비의 절반 크기로 만들려 했습니다. 로그인 단추의 크기는 화면의 전체 너비가 아니므로 단추를 이동할 수 있는 공간이 있습니다. 로그인 단추를 화면의 왼쪽, 오른쪽 또는 가운데에 배치할 수 있습니다.

View 기본 클래스에는 보기의 위치를 설정하는 데 사용되는 VerticalOptions 및 HorizontalOptions 속성이 있습니다. 두 설정은 레이아웃 패널이 할당한 사각형 안에서 보기가 배치되는 위치에 영향을 줍니다. 뷰가 사각형의 네 가장자리 중 하나에 맞춰지도록 지정할 수 있습니다. 또는 전체 사각형을 차지하려고 합니다.

LayoutOptions 형식인 VerticalOptions 또는 HorizontalOptions의 값을 지정하는 것은 크기를 설정하는 것보다 어렵습니다.

LayoutOptions 형식이란?

LayoutOptions는 두 레이아웃 기본 설정 Alignment 및 Expands를 캡슐화하는 C# 형식입니다. 두 속성은 위치와 관련이 있지만, 둘 사이에는 아무 관계도 없습니다. 이 형식의 정의는 다음과 같습니다.

public struct LayoutOptions
{
    public LayoutAlignment Alignment { get; set; }
    public bool Expands { get; set; }
    ...
}

다음으로 가장 일반적이고 직관적인 레이아웃 옵션인 Alignment을(를) 자세히 살펴봅니다.

LayoutAlignment 열거형이란?

LayoutAlignment는 Start, Center, End 및 Fill 값을 포함하는 열거형입니다. 이러한 값을 사용하여 레이아웃 패널이 제공하는 사각형 내에 자식 보기를 배치하는 방식을 제어할 수 있습니다. 예를 들어 다음 코드와 Android 스크린샷을 살펴보겠습니다.

<StackLayout>
    <Label Text="Start" HorizontalOptions="Start" BackgroundColor="Silver" FontSize="40" />
    <Label Text="Center" HorizontalOptions="Center" BackgroundColor="Silver"  FontSize="40" />
    <Label Text="End" HorizontalOptions="End" BackgroundColor="Silver"  FontSize="40"/>
    <Label Text="Fill" HorizontalOptions="Fill" BackgroundColor="Silver"  FontSize="40"/>
</StackLayout>

Screenshot showing four labels rendered on iOS with different HorizontalOptions: Start to the left side, Center centered, End to the right side, and Fill spanning the full screen.

이 예제에서는 수직 StackLayout을 사용하여 각 자식 보기에 행을 제공합니다. HorizontalOptions는 행 내부에서 보기의 위치를 결정합니다.

Expands란?

LayoutOptions 구조의 두 번째 속성은 Expands입니다. Expands 속성은 Xamarin.forms에서 사용 가능한 공간이 있는 경우 StackLayout의 보기가 추가 공간을 요청할 수 있도록 허용하는 bool입니다. 이 속성은 이제 사용되지 않으며 .NET MAUI에서 더 이상 사용되지 않습니다. 나중에 Grid 레이아웃의 단위에서 동일한 유형의 확장을 달성하는 방법을 살펴보겠습니다.

지식 점검

1.

LayoutPanel은 어떤 역할을 하나요?