Xamarin.ios CollectionView 레이아웃Xamarin.Forms CollectionView Layout

샘플 다운로드 샘플 다운로드Download Sample Download the sample

CollectionView 는 레이아웃을 제어 하는 다음 속성을 정의 합니다.CollectionView defines the following properties that control layout:

이러한 속성은 BindableProperty 개체에서 지원 됩니다. 즉, 속성은 데이터 바인딩의 대상이 될 수 있습니다.These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

기본적으로 CollectionView 의 항목은 세로 목록에 표시 됩니다.By default, a CollectionView will display its items in a vertical list. 그러나 다음 레이아웃 중 하나를 사용할 수 있습니다.However, any of the following layouts can be used:

  • 세로 목록 – 새 항목이 추가 될 때 세로로 확장 되는 단일 열 목록입니다.Vertical list – a single column list that grows vertically as new items are added.
  • 가로 목록 – 새 항목이 추가 될 때 가로로 증가 하는 단일 행 목록입니다.Horizontal list – a single row list that grows horizontally as new items are added.
  • 세로 그리드 – 새 항목이 추가 될 때 세로로 증가 하는 여러 열 표입니다.Vertical grid – a multi-column grid that grows vertically as new items are added.
  • 가로 그리드 – 새 항목이 추가 될 때 가로로 증가 하는 다중 행 표입니다.Horizontal grid – a multi-row grid that grows horizontally as new items are added.

이러한 레이아웃은 ItemsLayout 클래스에서 파생 되는 클래스로 ItemsLayout 속성을 설정 하 여 지정할 수 있습니다.These layouts can be specified by setting the ItemsLayout property to class that derives from the ItemsLayout class. 이 클래스는 다음 속성을 정의 합니다.This class defines the following properties:

이러한 속성은 BindableProperty 개체에서 지원 됩니다. 즉, 속성은 데이터 바인딩의 대상이 될 수 있습니다.These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings. 스냅 점에 대 한 자세한 내용은 CollectionView 스크롤 가이드의 중심점 을 참조 하세요.For more information about snap points, see Snap points in the Xamarin.Forms CollectionView Scrolling guide.

@No__t_1 열거형은 다음 멤버를 정의 합니다.The ItemsLayoutOrientation enumeration defines the following members:

  • Vertical는 항목이 추가 될 때 CollectionView 세로로 확장 됨을 나타냅니다.Vertical indicates that the CollectionView will expand vertically as items are added.
  • Horizontal는 항목이 추가 될 때 CollectionView 가로로 확장 됨을 나타냅니다.Horizontal indicates that the CollectionView will expand horizontally as items are added.

@No__t_0 클래스는 ItemsLayout 클래스에서 상속 되며 각 항목 주위의 빈 공간을 나타내는 double 형식의 ItemSpacing 속성을 정의 합니다.The LinearItemsLayout class inherits from the ItemsLayout class, and defines an ItemSpacing property, of type double, that represents the empty space around each item. 이 속성의 기본값은 0이 고 해당 값은 항상 0 보다 크거나 같아야 합니다.The default value of this property is 0, and its value must always be greater than or equal to 0. 또한 LinearItemsLayout 클래스는 정적 VerticalHorizontal 멤버를 정의 합니다.The LinearItemsLayout class also defines static Vertical and Horizontal members. 이러한 멤버를 사용 하 여 각각 세로 또는 가로 목록을 만들 수 있습니다.These members can be used to create vertical or horizontal lists, respectively. 또는 ItemsLayoutOrientation 열거형 멤버를 인수로 지정 하 여 LinearItemsLayout 개체를 만들 수 있습니다.Alternatively, a LinearItemsLayout object can be created, specifying an ItemsLayoutOrientation enumeration member as an argument.

@No__t_1 클래스는 ItemsLayout 클래스에서 상속 되며 다음 속성을 정의 합니다.The GridItemsLayout class inherits from the ItemsLayout class, and defines the following properties:

  • 각 항목 주위의 세로 빈 공간을 나타내는 double 형식의 VerticalItemSpacing입니다.VerticalItemSpacing, of type double, that represents the vertical empty space around each item. 이 속성의 기본값은 0이 고 해당 값은 항상 0 보다 크거나 같아야 합니다.The default value of this property is 0, and its value must always be greater than or equal to 0.
  • 각 항목 주위에 있는 가로 빈 공간을 나타내는 double 형식의 HorizontalItemSpacing입니다.HorizontalItemSpacing, of type double, that represents the horizontal empty space around each item. 이 속성의 기본값은 0이 고 해당 값은 항상 0 보다 크거나 같아야 합니다.The default value of this property is 0, and its value must always be greater than or equal to 0.
  • 표에 표시할 열 또는 행 수를 나타내는 int 형식의 Span입니다.Span, of type int, that represents the number of columns or rows to display in the grid. 이 속성의 기본값은 1이 고 해당 값은 항상 1 보다 크거나 같아야 합니다.The default value of this property is 1, and its value must always be greater than or equal to 1.

이러한 속성은 BindableProperty 개체에서 지원 됩니다. 즉, 속성은 데이터 바인딩의 대상이 될 수 있습니다.These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

참고

CollectionView 는 기본 레이아웃 엔진을 사용 하 여 레이아웃을 수행 합니다.CollectionView uses the native layout engines to perform layout.

세로 목록Vertical list

기본적으로 CollectionView 는 해당 항목을 세로 목록 레이아웃으로 표시 합니다.By default, CollectionView will display its items in a vertical list layout. 따라서이 레이아웃을 사용 하도록 ItemsLayout 속성을 설정 하지 않아도 됩니다.Therefore, it's not necessary to set the ItemsLayout property to use this layout:

<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>

그러나 완전성을 위해 ItemsLayout 속성을 VerticalList로 설정 하 여 해당 항목을 세로 목록에 표시 하도록 CollectionView 를 설정할 수 있습니다.However, for completeness, a CollectionView can be set to display its items in a vertical list by setting its ItemsLayout property to VerticalList:

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

또는 Vertical ItemsLayoutOrientation 열거형 멤버를 Orientation 속성 값으로 지정 하 여 ItemsLayout 속성을 LinearItemsLayout 개체로 설정 하 여이 작업을 수행할 수도 있습니다.Alternatively, this can also be accomplished by setting the ItemsLayout property to a LinearItemsLayout object, specifying the Vertical ItemsLayoutOrientation enumeration member as the Orientation property value:

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

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

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

그러면 새 항목이 추가 될 때 세로로 확장 되는 단일 열 목록이 생성 됩니다.This results in a single column list, which grows vertically as new items are added:

IOS 및 Android에서 CollectionView 세로 목록 레이아웃의 스크린샷Screenshot of a CollectionView vertical list layout, on iOS and Android

가로 목록Horizontal list

CollectionView ItemsLayout 속성을 HorizontalList으로 설정 하 여 해당 항목을 가로 목록에 표시할 수 있습니다.CollectionView can display its items in a horizontal list by setting its ItemsLayout property to 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>

또는 Horizontal ItemsLayoutOrientation 열거형 멤버를 Orientation 속성 값으로 지정 하 여 ItemsLayout 속성을 LinearItemsLayout 개체로 설정 하 여이 레이아웃을 수행할 수도 있습니다.Alternatively, this layout can also be accomplished by setting the ItemsLayout property to a LinearItemsLayout object, specifying the Horizontal ItemsLayoutOrientation enumeration member as the Orientation property value:

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

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

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

그러면 새 항목이 추가 될 때 가로 크기가 증가 하는 단일 행 목록이 생성 됩니다.This results in a single row list, which grows horizontally as new items are added:

IOS 및 Android에서 CollectionView 가로 목록 레이아웃의 스크린샷Screenshot of a CollectionView horizontal list layout, on iOS and Android

세로 모눈Vertical grid

ItemsLayout 속성을 Orientation 속성이 Vertical로 설정 된 GridItemsLayout 개체로 설정 하 여 해당 항목을 세로 모눈에 표시할 수 CollectionView .CollectionView can display its items in a vertical grid by setting its ItemsLayout property to a GridItemsLayout object whose Orientation property is set to Vertical:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Vertical"
                        Span="2" />
    </CollectionView.ItemsLayout>
    <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>

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

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

기본적으로 세로 GridItemsLayout 은 단일 열에 항목을 표시 합니다.By default, a vertical GridItemsLayout will display items in a single column. 그러나이 예제에서는 GridItemsLayout.Span 속성을 2로 설정 합니다.However, this example sets the GridItemsLayout.Span property to 2. 그러면 새 항목이 추가 될 때 세로로 증가 하는 2 열 눈금이 생성 됩니다.This results in a two-column grid, which grows vertically as new items are added:

IOS 및 Android에서 CollectionView 세로 격자 레이아웃의 스크린샷Screenshot of a CollectionView vertical grid layout, on iOS and Android

가로 그리드Horizontal grid

ItemsLayout 속성을 Orientation 속성이 Horizontal로 설정 되어 있는 GridItemsLayout 개체로 설정 하 여 해당 항목을 가로 모눈에 표시할 수 CollectionView .CollectionView can display its items in a horizontal grid by setting its ItemsLayout property to a GridItemsLayout object whoseOrientation property is set to Horizontal:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Horizontal"
                        Span="4" />
    </CollectionView.ItemsLayout>
    <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>

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

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

기본적으로 가로 GridItemsLayout 는 단일 행에 항목을 표시 합니다.By default, a horizontal GridItemsLayout will display items in a single row. 그러나이 예제에서는 GridItemsLayout.Span 속성을 4로 설정 합니다.However, this example sets the GridItemsLayout.Span property to 4. 그러면 새 항목이 추가 될 때 가로 크기가 증가 하는 4 행 표가 생성 됩니다.This results in a four-row grid, which grows horizontally as new items are added:

IOS 및 Android에서 CollectionView 가로 그리드 레이아웃의 스크린샷Screenshot of a CollectionView horizontal grid layout, on iOS and Android

머리글 및 바닥글Headers and footers

목록에 있는 항목으로 스크롤 하는 머리글 및 바닥글을 표시할 수 CollectionView .CollectionView can present a header and footer that scroll with the items in the list. 머리글과 바닥글은 문자열, 뷰 또는 DataTemplate 개체 일 수 있습니다.The header and footer can be strings, views, or DataTemplate objects.

CollectionView 머리글 및 바닥글을 지정 하기 위한 다음 속성을 정의 합니다.CollectionView defines the following properties for specifying the header and footer:

  • object 형식의 Header는 목록 시작 부분에 표시 되는 문자열, 바인딩 또는 뷰를 지정 합니다.Header, of type object, specifies the string, binding, or view that will be displayed at the start of the list.
  • DataTemplate형식의 HeaderTemplateHeader 형식을 지정 하는 데 사용할 DataTemplate를 지정 합니다.HeaderTemplate, of type DataTemplate, specifies the DataTemplate to use to format the Header.
  • object 형식의 Footer는 목록 끝에 표시 되는 문자열, 바인딩 또는 뷰를 지정 합니다.Footer, of type object, specifies the string, binding, or view that will be displayed at the end of the list.
  • DataTemplate형식의 FooterTemplateFooter 형식을 지정 하는 데 사용할 DataTemplate를 지정 합니다.FooterTemplate, of type DataTemplate, specifies the DataTemplate to use to format the Footer.

이러한 속성은 BindableProperty 개체에서 지원 됩니다. 즉, 속성은 데이터 바인딩의 대상이 될 수 있습니다.These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

왼쪽에서 오른쪽으로 수평으로 확장 되는 레이아웃에 머리글을 추가 하면 머리글은 목록 왼쪽에 표시 됩니다.When a header is added to a layout that grows horizontally, from left to right, the header is displayed to the left of the list. 마찬가지로 왼쪽에서 오른쪽으로 수평으로 증가 하는 레이아웃에 바닥글을 추가 하면 목록 오른쪽에 바닥글이 표시 됩니다.Similarly, when a footer is added to a layout that grows horizontally, from left to right, the footer is displayed to the right of the list.

@No__t_0 및 Footer 속성은 다음 예제와 같이 string 값으로 설정할 수 있습니다.The Header and Footer properties can be set to string values, as shown in the following example:

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

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

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

이 코드는 iOS 스크린샷에 표시 된 헤더와 Android 스크린샷에 표시 된 바닥글을 포함 하는 다음과 같은 스크린샷을 생성 합니다.This code results in the following screenshots, with the header shown in the iOS screenshot, and the footer shown in the Android screenshot:

IOS 및 Android에서 CollectionView 문자열 헤더 및 바닥글의 스크린샷Screenshot of a CollectionView string header and footer, on iOS and Android

@No__t_0 및 Footer 속성은 각각 뷰로 설정할 수 있습니다.The Header and Footer properties can each be set to a view. 단일 보기 이거나 여러 자식 뷰를 포함 하는 뷰입니다.This can be a single view, or a view that contains multiple child views. 다음 예에서는 Label 개체를 포함 하는 StackLayout 개체로 설정 된 HeaderFooter 속성을 보여 줍니다.The following example shows the Header and Footer properties each set to a StackLayout object that contains a Label object:

<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# 코드는 다음과 같습니다.The equivalent C# code is:

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 스크린샷에 표시 된 바닥글을 포함 하는 다음과 같은 스크린샷을 생성 합니다.This code results in the following screenshots, with the header shown in the iOS screenshot, and the footer shown in the Android screenshot:

IOS 및 Android에서 보기를 사용 하 여 CollectionView 머리글 및 바닥글의 스크린샷Screenshot of a CollectionView header and footer using views, on iOS and Android

머리글 및 바닥글의 서식을 지정 하는 데 사용 되는 DataTemplate 개체를 사용 하 여 HeaderTemplateFooterTemplate 속성을 설정할 수 있습니다.The HeaderTemplate and FooterTemplate properties can be set to DataTemplate objects that are used to format the header and footer. 이 시나리오에서 HeaderFooter 속성은 다음 예제와 같이 적용 될 템플릿이 현재 소스에 바인딩되어야 합니다.In this scenario, the Header and Footer properties must bind to the current source for the templates to be applied, as shown in the following example:

<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# 코드는 다음과 같습니다.The equivalent C# code is:

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 스크린샷에 표시 된 바닥글을 포함 하는 다음과 같은 스크린샷을 생성 합니다.This code results in the following screenshots, with the header shown in the iOS screenshot, and the footer shown in the Android screenshot:

IOS 및 Android에서 템플릿을 사용 하 여 CollectionView 헤더 및 바닥글의 스크린샷Screenshot of a CollectionView header and footer using templates, on iOS and Android

항목 간격Item spacing

기본적으로 CollectionView 의 각 항목 주위에는 빈 공간이 없습니다.By default, each item in a CollectionView doesn't have any empty space around it. @No__t_0에서 사용 하는 항목 레이아웃에 대 한 속성을 설정 하 여이 동작을 변경할 수 있습니다.This behavior can be changed by setting properties on the items layout used by the CollectionView.

@No__t_1 ItemsLayout 속성을 LinearItemsLayout 개체로 설정 하면 LinearItemsLayout.ItemSpacing 속성을 각 항목 주위의 빈 공간을 나타내는 double 값으로 설정할 수 있습니다.When a CollectionView sets its ItemsLayout property to a LinearItemsLayout object, the LinearItemsLayout.ItemSpacing property can be set to a double value that represents the empty space around each item:

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

참고

@No__t_0 속성에는 속성 값이 항상 0 보다 크거나 같도록 확인 하는 유효성 검사 콜백 집합이 있습니다.The LinearItemsLayout.ItemSpacing property has a validation callback set, which ensures that the value of the property is always greater than or equal to 0.

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

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

이 코드는 세로 단일 열 목록을 생성 하며 각 항목 주위에는 20 개의 간격이 있습니다.This code results in a vertical single column list, that has a spacing of 20 around each item:

IOS 및 Android에서 항목 간격이 있는 CollectionView의 스크린샷Screenshot of a CollectionView with item spacing, on iOS and Android

@No__t_1 ItemsLayout 속성을 GridItemsLayout 개체로 설정 하면 GridItemsLayout.VerticalItemSpacingGridItemsLayout.HorizontalItemSpacing 속성을 각 항목 주위에서 가로 및 세로로 빈 공간을 나타내는 double 값으로 설정할 수 있습니다.When a CollectionView sets its ItemsLayout property to a GridItemsLayout object, the GridItemsLayout.VerticalItemSpacing and GridItemsLayout.HorizontalItemSpacing properties can be set to double values that represent the empty space vertically and horizontally around each item:

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

참고

@No__t_0 및 GridItemsLayout.HorizontalItemSpacing 속성은 유효성 검사 콜백을 설정 하므로 속성의 값은 항상 0 보다 크거나 같아야 합니다.The GridItemsLayout.VerticalItemSpacing and GridItemsLayout.HorizontalItemSpacing properties have validation callbacks set, which ensure that the values of the properties are always greater than or equal to 0.

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

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

이 코드는 세로 2 열 그리드를 생성 하 고 각 항목 주위에는 세로 방향으로 20을, 각 항목 주위에는 가로 간격으로 30을 만듭니다.This code results in a vertical two-column grid, that has a vertical spacing of 20 around each item, and a horizontal spacing of 30 around each item:

Android에서 항목 간격이 있는 CollectionView의 스크린샷Screenshot of a CollectionView with item spacing, on Android

항목 크기 조정Item sizing

@No__t_3 의 UI 요소가 고정 크기를 지정 하지 않는 경우 기본적으로 CollectionView 의 각 항목은 개별적으로 측정 되 고 크기가 지정 됩니다.By default, each item in a CollectionView is individually measured and sized, provided that the UI elements in the DataTemplate don't specify fixed sizes. 변경할 수 있는이 동작은 CollectionView.ItemSizingStrategy 속성 값으로 지정 됩니다.This behavior, which can be changed, is specified by the CollectionView.ItemSizingStrategy property value. 이 속성 값은 ItemSizingStrategy 열거형 멤버 중 하나로 설정할 수 있습니다.This property value can be set to one of the ItemSizingStrategy enumeration members:

  • MeasureAllItems – 각 항목은 개별적으로 측정 됩니다.MeasureAllItems – each item is individually measured. 이 설정은 기본값입니다.This is the default value.
  • MeasureFirstItem – 첫 번째 항목만 측정 되며 이후의 모든 항목은 첫 번째 항목의 크기와 동일 하 게 지정 됩니다.MeasureFirstItem – only the first item is measured, with all subsequent items being given the same size as the first item.

중요

크기 조정 전략을 사용 하면 모든 항목에서 항목 크기를 균일 하 게 사용 하는 상황에서 사용 하는 경우 성능이 향상 됩니다. MeasureFirstItemThe MeasureFirstItem sizing strategy will result in increased performance when used in situations where the item size is intended to be uniform across all items.

다음 코드 예제에서는 ItemSizingStrategy 속성을 설정 하는 방법을 보여 줍니다.The following code example shows setting the ItemSizingStrategy property:

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

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

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

항목의 동적 크기 조정Dynamic resizing of items

@No__t_3내에서 요소의 레이아웃 관련 속성을 변경 하 여 런타임에 CollectionView 항목의 크기를 동적으로 조정할 수 있습니다.Items in a CollectionView can be dynamically resized at runtime by changing layout related properties of elements within the DataTemplate. 예를 들어 다음 코드 예제에서는 Image 개체의 HeightRequestWidthRequest 속성을 변경 합니다.For example, the following code example changes the HeightRequest and WidthRequest properties of an Image object:

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

@No__t_0 이벤트 처리기는 탭 하는 Image 개체에 대 한 응답으로 실행 되며 더 쉽게 볼 수 있도록 이미지의 크기를 변경 합니다.The OnImageTapped event handler is executed in response to an Image object being tapped, and changes the dimensions of the image so that it's more easily viewed:

IOS 및 Android에서 동적 항목 크기 조정을 사용 하는 CollectionView의 스크린샷Screenshot of a CollectionView with dynamic item sizing, on iOS and Android

오른쪽에서 왼쪽 레이아웃Right-to-left layout

CollectionView FlowDirection 속성을 RightToLeft로 설정 하 여 해당 콘텐츠를 오른쪽에서 왼쪽 흐름 방향으로 레이아웃을 지정할 수 있습니다.CollectionView can layout its content in a right-to-left flow direction by setting its FlowDirection property to RightToLeft. 그러나 페이지 또는 루트 레이아웃에는 FlowDirection 속성을 설정 하는 것이 가장 좋습니다. 이렇게 하면 페이지 또는 루트 레이아웃의 모든 요소가 흐름 방향에 응답 하 게 됩니다.However, the FlowDirection property should ideally be set on a page or root layout, which causes all the elements within the page, or root layout, to respond to the flow direction:

<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>

부모가 있는 요소의 기본 FlowDirectionMatchParent입니다.The default FlowDirection for an element with a parent is MatchParent. 따라서 CollectionViewStackLayout에서 FlowDirection 속성 값을 상속 하며,이 값은 ContentPage에서 FlowDirection 속성 값을 상속 합니다.Therefore, the CollectionView inherits the FlowDirection property value from the StackLayout, which in turn inherits the FlowDirection property value from the ContentPage. 이로 인해 다음 스크린샷에 오른쪽에서 왼쪽 레이아웃이 표시 됩니다.This results in the right-to-left layout shown in the following screenshots:

IOS 및 Android에 대 한 CollectionView 오른쪽에서 왼쪽 세로 목록 레이아웃의 스크린샷Screenshot of a CollectionView right-to-left vertical list layout, on iOS and Android

흐름 방향에 대 한 자세한 내용은 오른쪽에서 왼쪽 지역화를 참조 하세요.For more information about flow direction, see Right-to-left localization.