Grid를 사용하여 보기 정렬

10분

7x5 그리드에 이미지를 표시하는 페이지를 작성한다고 가정해 봅니다. 여러 개의 가로 및 세로 StackLayout 컨테이너를 사용하여 이 페이지를 만들 수 있습니다. 하지만 지루한 코딩 작업을 수행해야 하고, 여러 레이아웃 패널의 메모리 및 처리 요구 사항으로 인해 성능 문제가 발생할 수 있습니다. 행과 열이 모두 필요한 UI에 보다 적합한 선택은 Grid 레이아웃 패널입니다. 이 단원에서는 Grid를 정의하고 해당 셀 안에 보기를 배치하는 방법을 알아보겠습니다.

Grid란?

Grid은(는) 행과 열로 구성되는 레이아웃 패널입니다. 다음은 그리드 보기의 개념을 보여주는 일러스트레이션입니다.

여러 행과 열이 포함된 상자와 행 및 열이 있는 예제 표를 보여 주는 일러스트레이션.

행과 열이 교차하는 지점에 생성되는 셀에 보기를 배치합니다. 예를 들어 3개 열과 2개 행이 있는 Grid을(를) 만드는 경우 보기에 사용할 수 있는 셀은 6개입니다. 행과 열의 크기를 다르게 할 수도 있고, 내부에 배치되는 자식의 크기에 맞게 자동으로 조정되도록 설정할 수도 있습니다. 자식 보기는 단일 셀을 점유할 수도 있고 여러 셀에 걸쳐 배치될 수도 있습니다. Grid는 이처럼 유연하기 때문에 여러 앱의 루트 레이아웃 패널에 적합한 선택입니다.

그리드의 행과 열을 지정하는 방법

Grid를 만들 때 각 행과 열을 개별적으로 정의할 수 있습니다. 이 시스템을 통해 각 행의 높이와 각 열의 너비를 완벽하게 제어할 수 있습니다. 모든 Grid에는 그리드의 모양을 정의하는 RowDefinition 및 ColumnDefinition 개체 컬렉션이 있습니다. 이러한 컬렉션을 각각 UI의 행 또는 열을 나타내는 RowDefinition 및 ColumnDefinition의 인스턴스로 채웁니다.

다음은 RowDefinition 및 ColumnDefinition의 클래스 정의를 보여주는 두 가지 코드 조각입니다.

public sealed class RowDefinition : ...
{
    ...
    public GridLength Height { get; set; }
}

public sealed class ColumnDefinition : ...
{
    ...
    public GridLength Width { get; set; }
}

RowDefinition에는 Height 속성이 있고 ColumnDefinition에는 Width 속성이 있습니다. 이러한 속성을 사용하여 다음 섹션에 설명된 대로 행의 높이와 열의 너비를 설정합니다.

GridLength란?

Width 및 Height 속성의 데이터 형식은 GridLength입니다. 이 형식은 GridUnitType 및 Value 속성을 포함합니다. 다음은 형식 정의의 일부를 보여주는 코드 조각입니다.

public struct GridLength
{
    ...
    public GridUnitType GridUnitType { get; }
    public double Value { get; }
}

GridUnitType 속성을 다음 값 중 하나로 설정할 수 있습니다.

Absolute
Auto
Star

각 값을 자세히 살펴보겠습니다.

Absolute GridUnitType

Absolute은(는) 행 또는 열의 크기가 고정되도록 지정합니다. Value 속성을 사용하여 크기를 나타냅니다. 다음은 C#에서 행 높이를 100 디바이스 단위로 고정하도록 설정하는 방법을 보여주는 예제입니다. 숫자 값을 갖는 GridLength 생성자를 사용하는 방법을 잘 보세요. 이 생성자는 자동으로 GridUnitType을(를) Absolute(으)로 설정합니다.

var row = new RowDefinition() { Height = new GridLength(100) };

XAML(Extensible Application Markup Language)에서는 숫자 값만 제공합니다. XAML 파서는 GridLength 인스턴스를 만들기 위해 형식 변환기를 호출합니다. 다음은 XAML의 동일한 작업을 보여주는 예제입니다.

<RowDefinition Height="100" />

Auto GridUnitType

Auto는 자식 보기에 맞게 행 또는 열 크기를 자동으로 조정합니다. Grid는 해당 행 또는 열의 모든 자식 보기를 검사하여 가장 큰 보기를 선택한 다음, 해당 자식에 맞게 행 또는 열 크기를 조정합니다. 코드로 행 정의를 만들 때 숫자 값은 무시됩니다. 아무 값이나 사용해도 됩니다. 다음은 C#에서 행 높이가 자동으로 조정되도록 설정하는 방법을 보여주는 예제입니다. 값을 임의로 1로 선택했습니다.

var row = new RowDefinition() { Height = new GridLength(1, GridUnitType.Auto) };

XAML에서는 Auto 값을 사용합니다. 다음은 XAML의 동일한 작업을 보여주는 예제입니다.

<RowDefinition Height="Auto" />

Star GridUnitType

Star를 사용하면 배율 크기 조정이 가능합니다. 비례 크기 조정에서, 사용 가능한 총 공간과 각 행 또는 열이 요구하는 비율에 따라 크기가 결정됩니다. 대화할 때 비례 크기 조정 대신 배율 크기 조정이라는 표현을 사용하는 분들도 종종 있습니다.

그리드의 행에 배율 크기 조정을 사용하는 프로세스를 살펴보겠습니다.

사용 가능한 공간 확인: Grid는 배율 크기 조정을 사용하지 Grid 모든 행을 검사합니다. 이러한 행의 높이를 추가하고, 추가한 높이만큼 Grid 자체의 높이를 줄입니다. 이 계산을 통해 모든 배율 크기 조정 행에 사용할 수 있는 공간의 양을 알 수 있습니다.
사용 가능한 공간 나누기: 그 후 Grid는 각 행의 Value 설정에 따라 사용 가능한 공간을 여러 배율 크기 조정 행에 분할합니다. Value 속성을 배율 크기 조정으로 정의된 모든 행 간의 비율을 결정하는 승수라고 생각하시면 됩니다. 예를 들어 배율 크기 조정 행이 2개 있고 두 행의 승수가 모두 1이면 사용 가능한 공간이 두 행에 균등하게 분배됩니다. 하지만 둘 중 하나의 값이 2이면 해당 행은 다른 행보다 2배의 공간을 차지하게 됩니다.

다음은 C#에서 행 높이를 2 Star로 설정하는 방법을 보여주는 예제입니다.

var row = new RowDefinition() { Height = new GridLength(2, GridUnitType.Star) };

XAML에서는 * 기호를 사용하여 배율 크기를 나타냅니다. 값과 *를 단일 문자열에 결합하면 형식 변환기가 자동으로 GridLength를 만듭니다. 다음은 XAML과 동일한 예제입니다.

<RowDefinition Height="2*" />

그리드 컬렉션

RowDefinition 및 ColumnDefinition을(를) 사용하여 행과 열을 정의한 후 Grid에 추가할 수 있습니다. Grid의 RowDefinitions 및 ColumnDefinitions 컬렉션 속성을 사용합니다. 이러한 컬렉션 채우기는 XAML에서 가장 일반적으로 수행됩니다.

이 예제는 RowDefinitions 속성을 사용하여 4개 행을 정의하고 Grid에 추가하는 방법을 보여줍니다.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="1*" />
        <RowDefinition Height="2*" />
    </Grid.RowDefinitions>
    ...
</Grid>

이 정의는 다음으로 단축할 수 있습니다.

<Grid RowDefinitions="100, Auto, 1*, 2*">
    ...
</Grid>

열을 정의하기 위한 XAML은 이전 XAML과 유사합니다. ColumnDefinitions를 사용하고 Width를 설정합니다.

런타임에 이 XAML은 4개의 행이 있는 Grid을(를) 생성합니다. 첫 번째 행에는 100 디바이스 단위의 고정 높이가 있습니다. 두 번째 행은 행에서 가장 높은 보기의 높이를 사용합니다. 세 번째와 네 번째 행은 배율 크기 조정을 사용합니다. 즉, 사용 가능한 나머지 공간을 Value 승수에 비례하여 나눕니다. 세 번째 행은 1*이고 네 번째 행은 2*이므로 네 번째 행의 높이는 세 번째 행의 2배입니다.

행 및 열 기본 크기

행 및 열의 기본 크기는 1*입니다. 예를 들어 다음 XAML을 살펴보세요.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    ...
</Grid>

이 정의는 다음으로 단축할 수 있습니다.

<Grid RowDefinitions="*, *, *" ColumnDefinitions="*, *">
    ...
</Grid>

크기를 지정하는 행 또는 열이 하나도 없기 때문에 모든 행과 열에 1*가 적용됩니다. 런타임에 이 구성은 모든 행의 높이가 같고 모든 열의 너비가 같은 균일한 Grid을(를) 생성합니다.

그리드에 보기를 추가하는 방법

Grid에 보기를 추가하면 특정 셀에 추가됩니다. 셀은 행과 열이 교차하는 위치에 생성됩니다. 셀에 보기를 배치하려면 셀의 위치를 알아야 합니다. 행 번호와 열 번호의 조합을 사용하여 셀을 식별합니다.

행 및 열 번호 지정

행과 열의 번호는 0부터 시작합니다. 원점은 왼쪽 위 모서리입니다. 다음은 4개 행과 2개 열이 있는 Grid의 번호 매기기를 보여주는 일러스트레이션입니다.

4개의 행과 2개의 열이 있는 그리드를 보여 주는 일러스트레이션. 각 행과 열에 대해 번호 매기기를 표시합니다. 열 0과 행 0의 왼쪽 위 상자부터 열 1과 행 3의 오른쪽 아래 상자까지.

예를 들어 오른쪽 아래 셀에 보기를 추가하려면 보기의 위치를 row 3 column 1로 표현합니다.

연결된 속성을 사용하여 Grid에 보기 추가

그리드에 보기를 추가할 때 보기의 행 및 열 번호를 지정하는 방법이 필요합니다. 한 가지 방법은 보기에서 직접 위치를 지정할 수 있도록 View 기본 클래스에서 Row 및 Column 속성을 정의하는 것입니다. 이 기술은 작동하기는 하지만 가장 효율적인 방법은 아닙니다. 보기가 항상 Grid에 있는 것은 아니므로 이러한 속성이 필요 없는 경우가 가끔 있습니다. 연결된 속성을 사용하는 것이 더 좋은 방법입니다.

연결된 속성은 한 클래스에 정의되었지만 다른 형식의 개체에 설정된 속성입니다.

연결된 속성을 보기의 일부인 키-값 쌍 컬렉션으로 생각하시면 됩니다. Grid에 보기를 추가할 때 행과 열을 지정합니다. 연결된 속성을 사용하면 키가 Grid.Row인 키-값 쌍과 행 번호를 지정하는 값을 추가할 수 있습니다. Grid는 보기를 배치할 준비가 완료되면 컬렉션을 검사하여 Grid.Row 키가 있는지 확인합니다. 있는 경우 Grid은(는) 이 값을 사용하여 보기를 배치합니다.

다음은 연결된 속성을 사용하여 Grid를 만들고 보기를 추가하는 방법을 보여주는 예제입니다.

<Grid RowDefinitions="*, *, *" ColumnDefinitions="*, *">

    <BoxView Grid.Row="1" Grid.Column="0" Color="Navy" />
    
</Grid>

이 예에서, Grid.Row=1 및 Grid.Column=0은 BoxView의 내부 컬렉션에 추가되는 키-값 쌍입니다. Grid는 이러한 값을 사용하여 보기를 배치할 위치를 결정합니다. 디바이스에서 애플리케이션을 실행하면 Grid가 다음 그림처럼 보입니다.

세 개의 행과 두 개의 열이 있는 그리드를 보여주는 그림. BoxView는 첫 번째 열의 두 번째 행에 표시됩니다.

보기가 여러 행 또는 열에 걸치도록 하는 방법

알아 두어야 하는 연결된 속성이 2개 더 있습니다. 바로 Grid.RowSpan과 Grid.ColumnSpan입니다. 두 속성은 보기가 점유해야 하는 행 또는 열 수를 지정합니다. 예를 들어 다음 XAML을 살펴보세요.

<Grid RowDefinitions="*, *, *" ColumnDefinitions="*, *">

    <BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Color="Navy" />
    
</Grid>

이 예제에서는 ColumnSpan을 2로 설정합니다. 이 보기는 Column 0에서 시작하는 두 개의 열을 차지합니다. 디바이스에서 애플리케이션을 실행하면 Grid가 다음 그림처럼 보입니다.

세 개의 행과 두 개의 열이 있는 그리드를 보여 주는 그림. BoxView는 첫 번째 열의 두 번째 행에 위치하며 두 열에 걸쳐 있습니다.

지식 점검

Star GridUnitType은 어떤 용도로 사용되나요?

열 또는 행의 고정 크기 조정입니다. 지정한 숫자에 따라 크기가 결정됩니다.

열 또는 행의 비례 크기 조정입니다. 사용 가능한 총 공간과 각 행 또는 열이 요구하는 비율에 따라 크기가 결정됩니다.

Grid가 포함하는 자식 보기를 기반으로 행 또는 열의 크기를 결정하도록 자동으로 허용합니다.

작업을 확인하기 전에 모든 질문에 대답해야 합니다.