Xamarin.Forms CollectionView 레이아웃

아티클
03/05/2024

Download Sample 샘플 다운로드

CollectionView 는 레이아웃을 제어하는 다음 속성을 정의합니다.

ItemsLayout형식 IItemsLayout의 는 사용할 레이아웃을 지정합니다.
ItemSizingStrategy형식 ItemSizingStrategy의 , 사용할 항목 측정값 전략을 지정합니다.

이러한 속성은 개체에 의해 BindableProperty 지원되므로 속성이 데이터 바인딩의 대상이 될 수 있습니다.

기본적으로 항목은 CollectionView 세로 목록에 표시됩니다. 그러나 다음 레이아웃을 사용할 수 있습니다.

세로 목록 - 새 항목이 추가되면 세로로 증가하는 단일 열 목록입니다.
가로 목록 - 새 항목이 추가될 때 가로로 증가하는 단일 행 목록입니다.
세로 눈금 - 새 항목이 추가되면 세로로 증가하는 다중 열 눈금입니다.
가로 눈금 - 새 항목이 추가될 때 가로로 증가하는 다중 행 눈금입니다.

이러한 레이아웃은 클래스에서 ItemsLayout 파생되는 클래스로 속성을 설정 ItemsLayout 하여 지정할 수 있습니다. 이 클래스는 다음과 같은 속성을 정의합니다.

Orientation형식 ItemsLayoutOrientation의 은 항목이 추가되면 확장되는 CollectionView 방향을 지정합니다.
SnapPointsAlignment형식 SnapPointsAlignment의 스냅 포인트가 항목과 정렬되는 방법을 지정합니다.
SnapPointsType형식 SnapPointsType의 은 스크롤할 때 맞춤 지점의 동작을 지정합니다.

이러한 속성은 개체에 의해 BindableProperty 지원되므로 속성이 데이터 바인딩의 대상이 될 수 있습니다. 끌기 지점에 대한 자세한 내용은 CollectionView 스크롤 가이드의 Xamarin.Forms 끌기 지점을 참조하세요.

ItemsLayoutOrientation 열거형은 다음 멤버를 정의합니다.

Vertical 는 항목이 CollectionView 추가될 때 세로로 확장됨을 나타냅니다.
Horizontal 는 항목이 CollectionView 추가될 때 가로로 확장됨을 나타냅니다.

클래스는 LinearItemsLayout 클래스에서 ItemsLayout 상속되며 각 항목 주위의 빈 공간을 나타내는 형식double의 속성을 정의 ItemSpacing 합니다. 이 속성의 기본값은 0이며 해당 값은 항상 0보다 크거나 같아야 합니다. 또한 클래스는 LinearItemsLayout 정적 Vertical 및 Horizontal 멤버를 정의합니다. 이러한 멤버는 각각 세로 또는 가로 목록을 만드는 데 사용할 수 있습니다. 또는 열거형 멤버를 LinearItemsLayout 인수로 지정하여 ItemsLayoutOrientation 개체를 만들 수 있습니다.

클래스는 GridItemsLayout 클래스에서 ItemsLayout 상속되며 다음 속성을 정의합니다.

VerticalItemSpacing각 항목 주위의 세로 빈 공간을 나타내는 형식 double의 입니다. 이 속성의 기본값은 0이며 해당 값은 항상 0보다 크거나 같아야 합니다.
HorizontalItemSpacing각 항목 주위의 수평 빈 공간을 나타내는 형식 double의 입니다. 이 속성의 기본값은 0이며 해당 값은 항상 0보다 크거나 같아야 합니다.
Span표에 표시할 열 또는 행의 수를 나타내는 형식 int의

이러한 속성은 개체에 의해 BindableProperty 지원되므로 속성이 데이터 바인딩의 대상이 될 수 있습니다.

참고 항목

CollectionView 는 네이티브 레이아웃 엔진을 사용하여 레이아웃을 수행합니다.

세로 목록

기본적으로 CollectionView 항목은 세로 목록 레이아웃으로 표시됩니다. 따라서 이 레이아웃을 사용하도록 속성을 설정할 ItemsLayout 필요는 없습니다.

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

그러나 완전성을 위해 XAML CollectionView 에서는 해당 속성을 다음으로 설정 ItemsLayout 하여 항목을 세로 목록에 표시하도록 VerticalList설정할 수 있습니다.

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="VerticalList">
    ...
</CollectionView>

또는 속성을 개체로 설정하고 ItemsLayout 열거형 멤버를 속성 LinearItemsLayout 값으로 Orientation 지정하여 VerticalItemsLayoutOrientation 이 작업을 수행할 수도 있습니다.

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

해당하는 C# 코드는 다음과 같습니다.

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = LinearItemsLayout.Vertical
};

그러면 새 항목이 추가되면 세로로 증가하는 단일 열 목록이 생성됩니다.

가로 목록

XAML CollectionView 에서는 해당 속성을 다음으로 설정 ItemsLayout 하여 해당 항목을 가로 목록에 표시할 HorizontalList수 있습니다.

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="HorizontalList">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="140" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

또는 이 레이아웃은 속성을 LinearItemsLayout 개체로 설정하고 ItemsLayout 열거형 멤버를 속성 값으로 Orientation 지정하여 HorizontalItemsLayoutOrientation 수행할 수도 있습니다.

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

해당하는 C# 코드는 다음과 같습니다.

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = LinearItemsLayout.Horizontal
};

그러면 새 항목이 추가될 때 가로로 증가하는 단일 행 목록이 생성됩니다.

세로 눈금

XAML CollectionView 에서는 해당 속성을 다음으로 설정 ItemsLayout 하여 세로 눈금에 해당 항목을 표시할 VerticalGrid수 있습니다.

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="VerticalGrid, 2">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="80" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

또는 속성을 다음으로 설정된 Vertical개체 Orientation 로 설정 ItemsLayoutGridItemsLayout 하여 이 레이아웃을 수행할 수도 있습니다.

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Vertical"
                        Span="2" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

해당하는 C# 코드는 다음과 같습니다.

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical)
};

기본적으로 세 GridItemsLayout 로는 단일 열에 항목을 표시합니다. 그러나 이 예제에서는 속성을 2로 설정합니다 GridItemsLayout.Span . 그러면 새 항목이 추가되면 세로로 증가하는 2열 그리드가 생성됩니다.

가로 눈금

XAML에서 A는 CollectionView 해당 속성을 다음으로 설정 ItemsLayout 하여 해당 항목을 가로 눈금에 표시할 HorizontalGrid수 있습니다.

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="HorizontalGrid, 4">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="140" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

또는 속성을 다음으로 설정된 Horizontal개체 Orientation 로 설정 ItemsLayoutGridItemsLayout 하여 이 레이아웃을 수행할 수도 있습니다.

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Horizontal"
                        Span="4" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

해당하는 C# 코드는 다음과 같습니다.

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new GridItemsLayout(4, ItemsLayoutOrientation.Horizontal)
};

기본적으로 가로 GridItemsLayout 는 단일 행에 항목을 표시합니다. 그러나 이 예제에서는 속성을 4로 설정합니다 GridItemsLayout.Span . 그러면 새 항목이 추가될 때 가로로 증가하는 4행 그리드가 생성됩니다.

머리글 및 바닥글

CollectionView 는 목록의 항목과 함께 스크롤되는 머리글과 바닥글을 표시할 수 있습니다. 머리글과 바닥글은 문자열, 뷰 또는 DataTemplate 개체일 수 있습니다.

CollectionView 는 머리글 및 바닥글을 지정하기 위해 다음 속성을 정의합니다.

Header의 형식 object은 목록의 시작 부분에 표시될 문자열, 바인딩 또는 뷰를 지정합니다.
HeaderTemplate형식 DataTemplate의 < a0/>은 DataTemplate .의 서식을 지정하는 데 사용할 형식을 Header지정합니다.
Footer의 형식 object은 목록의 끝에 표시될 문자열, 바인딩 또는 뷰를 지정합니다.
FooterTemplate형식 DataTemplate의 < a0/>은 DataTemplate .의 서식을 지정하는 데 사용할 형식을 Footer지정합니다.

이러한 속성은 개체에 의해 BindableProperty 지원되므로 속성이 데이터 바인딩의 대상이 될 수 있습니다.

머리글이 왼쪽에서 오른쪽으로 가로로 증가하는 레이아웃에 추가되면 머리글이 목록의 왼쪽에 표시됩니다. 마찬가지로 바닥글이 가로로 증가하는 레이아웃에 추가되면 왼쪽에서 오른쪽으로 바닥글이 목록의 오른쪽에 표시됩니다.

머리글 및 바닥글에 문자열 표시

Header 다음 예제와 같이 속성과 Footer 속성을 값으로 설정할 string 수 있습니다.

<CollectionView ItemsSource="{Binding Monkeys}"
                Header="Monkeys"
                Footer="2019">
    ...
</CollectionView>

해당하는 C# 코드는 다음과 같습니다.

CollectionView collectionView = new CollectionView
{
    Header = "Monkeys",
    Footer = "2019"
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

이 코드는 iOS 스크린샷에 표시된 머리글 및 Android 스크린샷에 표시된 바닥글과 함께 다음 스크린샷을 생성합니다.

머리글 및 바닥글에 보기 표시

및 Footer 속성은 Header 각각 보기로 설정할 수 있습니다. 단일 보기 또는 여러 자식 뷰가 포함된 보기일 수 있습니다. 다음 예제에서는 각 집합이 Header 개체를 포함하는 개체로 StackLayout 설정된 속성과 Footer 속성을 보여 줍니다Label.

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.Header>
        <StackLayout BackgroundColor="LightGray">
            <Label Margin="10,0,0,0"
                   Text="Monkeys"
                   FontSize="Small"
                   FontAttributes="Bold" />
        </StackLayout>
    </CollectionView.Header>
    <CollectionView.Footer>
        <StackLayout BackgroundColor="LightGray">
            <Label Margin="10,0,0,0"
                   Text="Friends of Xamarin Monkey"
                   FontSize="Small"
                   FontAttributes="Bold" />
        </StackLayout>
    </CollectionView.Footer>
    ...
</CollectionView>

해당하는 C# 코드는 다음과 같습니다.

CollectionView collectionView = new CollectionView
{
    Header = new StackLayout
    {
        Children =
        {
            new Label { Text = "Monkeys", ... }
        }
    },
    Footer = new StackLayout
    {
        Children =
        {
            new Label { Text = "Friends of Xamarin Monkey", ... }
        }
    }
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

이 코드는 iOS 스크린샷에 표시된 머리글 및 Android 스크린샷에 표시된 바닥글과 함께 다음 스크린샷을 생성합니다.

서식 파일 머리글 및 바닥글 표시

및 FooterTemplate 속성은 HeaderTemplate 머리글과 바닥글의 서식을 지정하는 데 사용되는 개체로 설정할 DataTemplate 수 있습니다. 이 시나리오 Header 에서는 다음 예제와 같이 템플릿을 적용하기 위해 속성과 Footer 속성을 현재 원본에 바인딩해야 합니다.

<CollectionView ItemsSource="{Binding Monkeys}"
                Header="{Binding .}"
                Footer="{Binding .}">
    <CollectionView.HeaderTemplate>
        <DataTemplate>
            <StackLayout BackgroundColor="LightGray">
                <Label Margin="10,0,0,0"
                       Text="Monkeys"
                       FontSize="Small"
                       FontAttributes="Bold" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.HeaderTemplate>
    <CollectionView.FooterTemplate>
        <DataTemplate>
            <StackLayout BackgroundColor="LightGray">
                <Label Margin="10,0,0,0"
                       Text="Friends of Xamarin Monkey"
                       FontSize="Small"
                       FontAttributes="Bold" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.FooterTemplate>
    ...
</CollectionView>

해당하는 C# 코드는 다음과 같습니다.

CollectionView collectionView = new CollectionView
{
    HeaderTemplate = new DataTemplate(() =>
    {
        return new StackLayout { };
    }),
    FooterTemplate = new DataTemplate(() =>
    {
        return new StackLayout { };
    })
};
collectionView.SetBinding(ItemsView.HeaderProperty, ".");
collectionView.SetBinding(ItemsView.FooterProperty, ".");
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

이 코드는 iOS 스크린샷에 표시된 머리글 및 Android 스크린샷에 표시된 바닥글과 함께 다음 스크린샷을 생성합니다.

항목 간격

기본적으로 CollectionView. 이 동작은 에서 사용하는 CollectionView항목 레이아웃의 속성을 설정하여 변경할 수 있습니다.

CollectionView 속성을 ItemsLayout 개체 LinearItemsLayout.ItemSpacing 로 LinearItemsLayout 설정하면 항목 사이의 공간을 나타내는 값으로 double 속성을 설정할 수 있습니다.

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           ItemSpacing="20" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

참고 항목

속성의 LinearItemsLayout.ItemSpacing 값이 항상 0보다 크거나 같은지 확인하는 유효성 검사 콜백 집합이 있습니다.

해당하는 C# 코드는 다음과 같습니다.

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        ItemSpacing = 20
    }
};

이 코드는 항목 사이의 간격이 20인 세로 단일 열 목록을 생성합니다.

속성을 개체로 설정하면 항목 GridItemsLayout.HorizontalItemSpacing 간에 빈 공간을 세로 및 가로로 double 나타내는 값으로 설정할 수 있습니다.GridItemsLayoutGridItemsLayout.VerticalItemSpacingItemsLayoutCollectionView

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Vertical"
                        Span="2"
                        VerticalItemSpacing="20"
                        HorizontalItemSpacing="30" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

참고 항목

및 GridItemsLayout.HorizontalItemSpacing 속성에는 GridItemsLayout.VerticalItemSpacing 유효성 검사 콜백이 설정되어 속성 값이 항상 0보다 크거나 같은지 확인합니다.

해당하는 C# 코드는 다음과 같습니다.

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical)
    {
        VerticalItemSpacing = 20,
        HorizontalItemSpacing = 30
    }
};

이 코드는 항목 사이의 세로 간격이 20이고 항목 사이의 가로 간격이 30인 세로 2열 눈금이 생성됩니다.

항목 크기 조정

기본적으로 고정 크기를 지정하지 않는 UI 요소 DataTemplate 의 경우 각 항목 CollectionView 은 개별적으로 측정되고 크기가 조정됩니다. 변경할 수 있는 이 동작은 속성 값으로 CollectionView.ItemSizingStrategy 지정됩니다. 이 속성 값은 열거형 멤버 중 ItemSizingStrategy 하나로 설정할 수 있습니다.

MeasureAllItems – 각 항목은 개별적으로 측정됩니다. 기본값입니다.
MeasureFirstItem – 첫 번째 항목만 측정되며 모든 후속 항목은 첫 번째 항목과 동일한 크기로 제공됩니다.

Important

MeasureFirstItem 크기 조정 전략은 항목 크기가 모든 항목에서 균일하도록 의도된 상황에서 사용될 때 성능이 향상됩니다.

다음 코드 예제에서는 속성 설정을 보여 있습니다 ItemSizingStrategy .

<CollectionView ...
                ItemSizingStrategy="MeasureFirstItem">
    ...
</CollectionView>

해당하는 C# 코드는 다음과 같습니다.

CollectionView collectionView = new CollectionView
{
    ...
    ItemSizingStrategy = ItemSizingStrategy.MeasureFirstItem
};

항목의 동적 크기 조정

내 요소DataTemplate의 CollectionView 레이아웃 관련 속성을 변경하여 런타임에 항목의 크기를 동적으로 조정할 수 있습니다. 예를 들어 다음 코드 예제에서는 개체의 HeightRequestImage 속성과 WidthRequest 속성을 변경합니다.

void OnImageTapped(object sender, EventArgs e)
{
    Image image = sender as Image;
    image.HeightRequest = image.WidthRequest = image.HeightRequest.Equals(60) ? 100 : 60;
}

OnImageTapped 이벤트 처리기는 탭되는 개체에 대한 응답으로 Image 실행되고 이미지의 크기를 변경하여 더 쉽게 볼 수 있도록 합니다.

오른쪽에서 왼쪽 레이아웃

CollectionView 에서는 속성을 .로 설정 FlowDirection 하여 콘텐츠를 오른쪽에서 왼쪽 흐름 방향으로 레이아웃할 RightToLeft수 있습니다. 그러나 이 속성은 FlowDirection 페이지 또는 루트 레이아웃에서 설정해야 하며, 이로 인해 페이지 내의 모든 요소 또는 루트 레이아웃이 흐름 방향에 응답합니다.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CollectionViewDemos.Views.VerticalListFlowDirectionPage"
             Title="Vertical list (RTL FlowDirection)"
             FlowDirection="RightToLeft">
    <StackLayout Margin="20">
        <CollectionView ItemsSource="{Binding Monkeys}">
            ...
        </CollectionView>
    </StackLayout>
</ContentPage>

부모가 있는 요소의 기본값 FlowDirection 은 .입니다 MatchParent. 따라서 CollectionView 속성 값을 StackLayout상속합니다FlowDirection. 이 값은 다시 속성 값을 ContentPage상속합니다FlowDirection. 그러면 다음 스크린샷에 오른쪽에서 왼쪽으로 레이아웃이 표시됩니다.

흐름 방향에 대한 자세한 내용은 오른쪽에서 왼쪽 지역화를 참조 하세요.

Xamarin.Forms CollectionView 레이아웃

세로 목록

가로 목록

세로 눈금

가로 눈금

머리글 및 바닥글

머리글 및 바닥글에 문자열 표시

머리글 및 바닥글에 보기 표시

서식 파일 머리글 및 바닥글 표시

항목 간격

항목 크기 조정

항목의 동적 크기 조정

오른쪽에서 왼쪽 레이아웃

관련 링크

추가 리소스