Xamarin.ios CollectionView 그룹화Xamarin.Forms CollectionView Grouping

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

자주 발생 하는 데이터 집합은 계속 해 서 스크롤 목록에 표시 될 때 어려울 수 있습니다.Large data sets can often become unwieldy when presented in a continually scrolling list. 이 시나리오에서 데이터를 그룹으로 구성 하면 데이터를 쉽게 탐색할 수 있으므로 사용자 환경을 개선할 수 있습니다.In this scenario, organizing the data into groups can improve the user experience by making it easier to navigate the data.

CollectionView 그룹화 된 데이터 표시를 지원 하 고 표시 되는 방법을 제어 하는 다음 속성을 정의 합니다.CollectionView supports displaying grouped data, and defines the following properties that control how it will be presented:

  • bool 형식의 IsGrouped는 기본 데이터를 그룹으로 표시할지 여부를 나타냅니다.IsGrouped, of type bool, indicates whether the underlying data should be displayed in groups. 이 속성의 기본값은 false입니다.The default value of this property is false.
  • DataTemplate형식의 GroupHeaderTemplate 각 그룹의 헤더에 사용할 템플릿입니다.GroupHeaderTemplate, of type DataTemplate, the template to use for the header of each group.
  • GroupFooterTemplate 각 그룹의 바닥글에 사용할 템플릿 ( DataTemplate형식)입니다.GroupFooterTemplate, of type DataTemplate, the template to use for the footer of each group.

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

다음 스크린샷에는 그룹화 된 데이터를 표시 하는 CollectionView 표시 됩니다.The following screenshots show a CollectionView displaying grouped data:

IOS 및 Android에서 CollectionView의 그룹화 된 데이터 스크린샷Screenshot of a grouped data in a CollectionView, on iOS and Android

데이터 템플릿에 대한 자세한 내용은 Xamarin.Forms 데이터 템플릿을 참조하세요.For more information about data templates, see Xamarin.Forms Data Templates.

데이터 그룹화Group data

데이터를 표시 하려면 먼저 그룹화 해야 합니다.Data must be grouped before it can be displayed. 이를 위해서는 각 그룹이 항목 목록 인 그룹 목록을 만들어 수행할 수 있습니다.This can be accomplished by creating a list of groups, where each group is a list of items. 그룹 목록은 IEnumerable<T> 컬렉션 이어야 하며, 여기서 T는 두 가지 데이터를 정의 합니다.The list of groups should be an IEnumerable<T> collection, where T defines two pieces of data:

  • 그룹 이름입니다.A group name.
  • 그룹에 속한 항목을 정의 하는 IEnumerable 컬렉션입니다.An IEnumerable collection that defines the items belonging to the group.

따라서 데이터를 그룹화 하는 프로세스는 다음과 같습니다.The process for grouping data, therefore, is to:

  • 단일 항목을 모델링 하는 형식을 만듭니다.Create a type that models a single item.
  • 단일 항목 그룹을 모델링 하는 형식을 만듭니다.Create a type that models a single group of items.
  • @No__t_0 컬렉션을 만듭니다. 여기서 T는 단일 항목 그룹을 모델링 하는 형식입니다.Create an IEnumerable<T> collection, where T is the type that models a single group of items. 따라서이 컬렉션은 그룹화 된 데이터를 저장 하는 그룹의 컬렉션입니다.This collection is therefore a collection of groups, which stores the grouped data.
  • @No__t_0 컬렉션에 데이터를 추가 합니다.Add data to the IEnumerable<T> collection.

예제Example

데이터를 그룹화 할 때 첫 번째 단계는 단일 항목을 모델링 하는 형식을 만드는 것입니다.When grouping data, the first step is to create a type that models a single item. 다음 예제에서는 예제 응용 프로그램의 Animal 클래스를 보여 줍니다.The following example shows the Animal class from the sample application:

public class Animal
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string Details { get; set; }
    public string ImageUrl { get; set; }
}

@No__t_0 클래스는 단일 항목을 모델링 합니다.The Animal class models a single item. 그러면 항목 그룹을 모델링 하는 형식을 만들 수 있습니다.A type that models a group of items can then be created. 다음 예제에서는 예제 응용 프로그램의 AnimalGroup 클래스를 보여 줍니다.The following example shows the AnimalGroup class from the sample application:

public class AnimalGroup : List<Animal>
{
    public string Name { get; private set; }

    public AnimalGroup(string name, List<Animal> animals) : base(animals)
    {
        Name = name;
    }
}

@No__t_0 클래스는 List<T> 클래스에서 상속 되 고 그룹 이름을 나타내는 Name 속성을 추가 합니다.The AnimalGroup class inherits from the List<T> class and adds a Name property that represents the group name.

그런 다음 그룹의 IEnumerable<T> 컬렉션을 만들 수 있습니다.An IEnumerable<T> collection of groups can then be created:

public List<AnimalGroup> Animals { get; private set; } = new List<AnimalGroup>();

이 코드는 컬렉션의 각 항목이 AnimalGroup 개체인 Animals 이라는 컬렉션을 정의 합니다.This code defines a collection named Animals, where each item in the collection is an AnimalGroup object. AnimalGroup 개체는 이름과 그룹의 Animal 개체를 정의 하는 List<Animal> 컬렉션으로 구성 됩니다.Each AnimalGroup object comprises a name, and a List<Animal> collection that defines the Animal objects in the group.

그런 다음 그룹화 된 데이터를 Animals 컬렉션에 추가할 수 있습니다.Grouped data can then be added to the Animals collection:

Animals.Add(new AnimalGroup("Bears", new List<Animal>
{
    new Animal
    {
        Name = "American Black Bear",
        Location = "North America",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/08/01_Schwarzbär.jpg"
    },
    new Animal
    {
        Name = "Asian Black Bear",
        Location = "Asia",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/180px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG"
    },
    // ...
}));

Animals.Add(new AnimalGroup("Monkeys", new List<Animal>
{
    new Animal
    {
        Name = "Baboon",
        Location = "Africa & Asia",
        Details = "Details about the monkey go here.",
        ImageUrl = "http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
    },
    new Animal
    {
        Name = "Capuchin Monkey",
        Location = "Central & South America",
        Details = "Details about the monkey go here.",
        ImageUrl = "http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
    },
    new Animal
    {
        Name = "Blue Monkey",
        Location = "Central and East Africa",
        Details = "Details about the monkey go here.",
        ImageUrl = "http://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"
    },
    // ...
}));

이 코드는 Animals 컬렉션에 두 개의 그룹을 만듭니다.This code creates two groups in the Animals collection. 첫 번째 AnimalGroupBears 이름이 지정 되 고 세부 정보의 List<Animal> 컬렉션을 포함 합니다.The first AnimalGroup is named Bears, and contains a List<Animal> collection of bear details. 두 번째 AnimalGroupMonkeys 이름이 지정 되 고, List<Animal> 원숭이 정보 컬렉션을 포함 합니다.The second AnimalGroup is named Monkeys, and contains a List<Animal> collection of monkey details.

그룹화 된 데이터 표시Display grouped data

CollectionViewIsGrouped 속성을 true으로 설정 하 여 데이터가 올바르게 그룹화 된 경우 그룹화 된 데이터를 표시 합니다.CollectionView will display grouped data, provided that the data has been grouped correctly, by setting the IsGrouped property to true:

<CollectionView ItemsSource="{Binding Animals}"
                IsGrouped="true">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                ...
                <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>

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

CollectionView collectionView = new CollectionView
{
    IsGrouped = true
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
// ...

@No__t_1 에서 각 항목의 모양은 CollectionView.ItemTemplate 속성을 DataTemplate으로 설정 하 여 정의 됩니다.The appearance of each item in the CollectionView is defined by setting the CollectionView.ItemTemplate property to a DataTemplate. 자세한 내용은 항목 모양 정의를 참조 하세요.For more information, see Define item appearance.

참고

기본적으로 CollectionView 그룹 머리글 및 바닥글에 그룹 이름을 표시 합니다.By default, CollectionView will display the group name in the group header and footer. 그룹 머리글 및 그룹 바닥글을 사용자 지정 하 여이 동작을 변경할 수 있습니다.This behavior can be changed by customizing the group header and group footer.

그룹 헤더 사용자 지정Customize the group header

@No__t_0 속성을 DataTemplate설정 하 여 각 그룹 머리글의 모양을 사용자 지정할 수 있습니다.The appearance of each group header can be customized by setting the CollectionView.GroupHeaderTemplate property to a DataTemplate:

<CollectionView ItemsSource="{Binding Animals}"
                IsGrouped="true">
    ...
    <CollectionView.GroupHeaderTemplate>
        <DataTemplate>
            <Label Text="{Binding Name}"
                   BackgroundColor="LightGray"
                   FontSize="Large"
                   FontAttributes="Bold" />
        </DataTemplate>
    </CollectionView.GroupHeaderTemplate>
</CollectionView>

이 예에서 각 그룹 헤더는 그룹 이름을 표시 하 고 다른 모양 속성을 설정 하는 Label 로 설정 됩니다.In this example, each group header is set to a Label that displays the group name, and that has other appearance properties set. 다음 스크린샷은 사용자 지정 된 그룹 헤더를 보여 줍니다.The following screenshots show the customized group header:

IOS 및 Android에서 CollectionView의 사용자 지정 된 그룹 헤더 스크린샷Screenshot of a customized group header in a CollectionView, on iOS and Android

@No__t_0 속성을 DataTemplate설정 하 여 각 그룹 바닥글의 모양을 사용자 지정할 수 있습니다.The appearance of each group footer can be customized by setting the CollectionView.GroupFooterTemplate property to a DataTemplate:

<CollectionView ItemsSource="{Binding Animals}"
                IsGrouped="true">
    ...
    <CollectionView.GroupFooterTemplate>
        <DataTemplate>
            <Label Text="{Binding Count, StringFormat='Total animals: {0:D}'}"
                   Margin="0,0,0,10" />
        </DataTemplate>
    </CollectionView.GroupFooterTemplate>
</CollectionView>

이 예에서 각 그룹 바닥글은 그룹의 항목 수를 표시 하는 Label 설정 됩니다.In this example, each group footer is set to a Label that displays the number of items in the group. 다음 스크린샷은 사용자 지정 된 그룹 바닥글을 보여 줍니다.The following screenshots show the customized group footer:

IOS 및 Android에서 CollectionView의 사용자 지정 된 그룹 바닥글 스크린샷Screenshot of a customized group footer in a CollectionView, on iOS and Android

빈 그룹Empty groups

@No__t_1 에서 그룹화 된 데이터를 표시 하면 비어 있는 모든 그룹이 표시 됩니다.When a CollectionView displays grouped data, it will display any groups that are empty. 이러한 그룹은 그룹이 비어 있음을 나타내는 그룹 머리글 및 바닥글을 사용 하 여 표시 됩니다.Such groups will be displayed with a group header and footer, indicating that the group is empty. 다음 스크린샷에는 빈 그룹이 표시 됩니다.The following screenshots show an empty group:

IOS 및 Android에서 CollectionView의 빈 그룹에 대 한 스크린샷Screenshot of an empty group in a CollectionView, on iOS and Android

참고

IOS 10 이하의 경우 빈 그룹에 대 한 그룹 머리글 및 바닥글이 모두 CollectionView 맨 위에 표시 될 수 있습니다.On iOS 10 and lower, group headers and footers for empty groups may all be displayed at the top of the CollectionView.

템플릿이 없는 그룹Group without templates

CollectionView CollectionView.ItemTemplate 속성을 DataTemplate로 설정 하지 않고 올바르게 그룹화 된 데이터를 표시할 수 있습니다.CollectionView can display correctly grouped data without setting the CollectionView.ItemTemplate property to a DataTemplate:

<CollectionView ItemsSource="{Binding Animals}"
                IsGrouped="true" />

이 시나리오에서는 단일 항목을 모델링 하는 형식의 ToString 메서드를 재정의 하 고 단일 항목 그룹을 모델링 하는 형식을 재정의 하 여 의미 있는 데이터를 표시할 수 있습니다.In this scenario, meaningful data can be displayed by overriding the ToString method in the type that models a single item, and the type that models a single group of items.