ListView 모양ListView appearance

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

Xamarin.ios ListView 를 사용 하 여 목록의 각 행에 대 한 ViewCell 인스턴스와 함께 목록의 표시를 사용자 지정할 수 있습니다.The Xamarin.Forms ListView allows you to customize the presentation of the list, in addition to the ViewCell instances for each row in the list.

그룹화Grouping

연속 스크롤 목록에서 많은 데이터 집합을 표시 하는 것이 어려울 수 있습니다.Large sets of data can become unwieldy when presented in a continuously scrolling list. 그룹화를 사용 하면 데이터를 더 쉽게 탐색할 수 있도록 콘텐츠를 구성 하 고 플랫폼별 컨트롤을 활성화 하 여 이러한 경우에서 사용자 환경을 향상 시킬 수 있습니다.Enabling grouping can improve the user experience in these cases by better organizing the content and activating platform-specific controls that make navigating data easier.

ListView에 대해 그룹화가 활성화 되 면 각 그룹에 대해 머리글 행이 추가 됩니다.When grouping is activated for a ListView, a header row is added for each group.

그룹화를 사용 하도록 설정 하려면:To enable grouping:

  • 목록 목록 (그룹 목록, 각 그룹이 요소 목록)을 만듭니다.Create a list of lists (a list of groups, each group being a list of elements).
  • ListViewItemsSource을 해당 목록으로 설정 합니다.Set the ListView's ItemsSource to that list.
  • IsGroupingEnabled를 true로 설정 합니다.Set IsGroupingEnabled to true.
  • 그룹의 제목으로 사용 되는 그룹의 속성에 바인딩하려면 GroupDisplayBinding 설정 합니다.Set GroupDisplayBinding to bind to the property of the groups that is being used as the title of the group.
  • 필드 그룹의 짧은 이름으로 사용 되는 그룹의 속성에 바인딩하려면 GroupShortNameBinding 설정 합니다.[Optional] Set GroupShortNameBinding to bind to the property of the groups that is being used as the short name for the group. 짧은 이름은 점프 목록 (iOS의 오른쪽 열)에 사용 됩니다.The short name is used for the jump lists (right-side column on iOS).

먼저 그룹에 대 한 클래스를 만듭니다.Start by creating a class for the groups:

public class PageTypeGroup : List<PageModel>
    {
        public string Title { get; set; }
        public string ShortName { get; set; } //will be used for jump lists
        public string Subtitle { get; set; }
        private PageTypeGroup(string title, string shortName)
        {
            Title = title;
            ShortName = shortName;
        }

        public static IList<PageTypeGroup> All { private set; get; }
    }

위의 코드에서 All은 ListView에 바인딩 소스로 제공 되는 목록입니다.In the above code, All is the list that will be given to our ListView as the binding source. TitleShortName는 그룹 제목에 사용 되는 속성입니다.Title and ShortName are the properties that will be used for group headings.

이 단계에서 All은 빈 목록입니다.At this stage, All is an empty list. 프로그램이 시작 될 때 목록이 채워지도록 정적 생성자를 추가 합니다.Add a static constructor so that the list will be populated at program start:

static PageTypeGroup()
{
    List<PageTypeGroup> Groups = new List<PageTypeGroup> {
            new PageTypeGroup ("Alpha", "A"){
                new PageModel("Amelia", "Cedar", new switchCellPage(),""),
                new PageModel("Alfie", "Spruce", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Ava", "Pine", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Archie", "Maple", new switchCellPage(), "grapefruit.jpg")
            },
            new PageTypeGroup ("Bravo", "B"){
                new PageModel("Brooke", "Lumia", new switchCellPage(),""),
                new PageModel("Bobby", "Xperia", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Bella", "Desire", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Ben", "Chocolate", new switchCellPage(), "grapefruit.jpg")
            }
        };
        All = Groups; //set the publicly accessible list
}

위의 코드에서는 PageTypeGroup형식의 인스턴스인 Groups의 요소에 대해 Add를 호출할 수도 있습니다.In the above code, we can also call Add on elements of Groups, which are instances of type PageTypeGroup. 이 메서드는 PageTypeGroup List<PageModel>에서 상속 되기 때문에 가능 합니다.This method is possible because PageTypeGroup inherits from List<PageModel>.

그룹화 된 목록을 표시 하는 XAML은 다음과 같습니다.Here is the XAML for displaying the grouped list:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DemoListView.GroupingViewPage"
    <ContentPage.Content>
        <ListView  x:Name="GroupedView"
                   GroupDisplayBinding="{Binding Title}"
                   GroupShortNameBinding="{Binding ShortName}"
                   IsGroupingEnabled="true">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}"
                              Detail="{Binding Subtitle}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

이 XAML은 다음 작업을 수행 합니다.This XAML performs the following actions:

  • GroupShortNameBinding를 그룹 클래스에 정의 된 ShortName 속성으로 설정 합니다.Set GroupShortNameBinding to the ShortName property defined in our group class
  • GroupDisplayBinding를 그룹 클래스에 정의 된 Title 속성으로 설정 합니다.Set GroupDisplayBinding to the Title property defined in our group class
  • IsGroupingEnabled를 true로 설정 합니다.Set IsGroupingEnabled to true
  • ListViewItemsSource를 그룹화 된 목록으로 변경 했습니다.Changed the ListView's ItemsSource to the grouped list

다음 스크린샷은 결과 UI를 보여 줍니다.This following screenshot shows the resulting UI:

그룹화 사용자 지정Customizing grouping

목록에서 그룹화를 사용 하도록 설정한 경우 그룹 머리글도 사용자 지정할 수 있습니다.If grouping has been enabled in the list, the group header can also be customized.

ListView에 행 표시 방법을 정의 하는 ItemTemplate 있는 방법과 마찬가지로 ListView에는 GroupHeaderTemplate있습니다.Similar to how the ListView has an ItemTemplate for defining how rows are displayed, ListView has a GroupHeaderTemplate.

XAML에서 그룹 헤더를 사용자 지정 하는 예제는 다음과 같습니다.An example of customizing the group header in XAML is shown here:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DemoListView.GroupingViewPage">
    <ContentPage.Content>
        <ListView x:Name="GroupedView"
                  GroupDisplayBinding="{Binding Title}"
                  GroupShortNameBinding="{Binding ShortName}"
                  IsGroupingEnabled="true">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}"
                              Detail="{Binding Subtitle}"
                              TextColor="#f35e20"
                              DetailColor="#503026" />
                </DataTemplate>
            </ListView.ItemTemplate>
            <!-- Group Header Customization-->
            <ListView.GroupHeaderTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}"
                              Detail="{Binding ShortName}"
                              TextColor="#f35e20"
                              DetailColor="#503026" />
                </DataTemplate>
            </ListView.GroupHeaderTemplate>
            <!-- End Group Header Customization -->
        </ListView>
    </ContentPage.Content>
</ContentPage>

머리글 및 바닥글Headers and footers

ListView가 목록의 요소로 스크롤되는 머리글 및 바닥글을 표시할 수 있습니다.It is possible for a ListView to present a header and footer that scroll with the elements of the list. 머리글과 바닥글은 텍스트 문자열 또는 보다 복잡 한 레이아웃 일 수 있습니다.The header and footer can be strings of text or a more complicated layout. 이 동작은 섹션 그룹과구분 됩니다.This behavior is separate from section groups.

Header 및/또는 Footerstring 값으로 설정 하거나 보다 복잡 한 레이아웃으로 설정할 수 있습니다.You can set the Header and/or Footer to a string value, or you can set them to a more complex layout. 또한 데이터 바인딩을 지 원하는 머리글 및 바닥글에 대해 더 복잡 한 레이아웃을 만들 수 있는 HeaderTemplateFooterTemplate 속성도 있습니다.There are also HeaderTemplate and FooterTemplate properties that let you create more complex layouts for the header and footer that support data binding.

기본 머리글/바닥글을 만들려면 머리글 또는 바닥글 속성을 표시 하려는 텍스트로 설정 하면 됩니다.To create a basic header/footer, just set the Header or Footer properties to the text you want to display. 코드In code:

ListView HeaderList = new ListView()
{
    Header = "Header",
    Footer = "Footer"
};

XAML에서:In XAML:

<ListView x:Name="HeaderList" 
          Header="Header"
          Footer="Footer">
    ...
</ListView>

사용자 지정 된 머리글 및 바닥글을 만들려면 머리글 및 바닥글 뷰를 정의 합니다.To create a customized header and footer, define the Header and Footer views:

<ListView.Header>
    <StackLayout Orientation="Horizontal">
        <Label Text="Header"
               TextColor="Olive"
               BackgroundColor="Red" />
    </StackLayout>
</ListView.Header>
<ListView.Footer>
    <StackLayout Orientation="Horizontal">
        <Label Text="Footer"
               TextColor="Gray"
               BackgroundColor="Blue" />
    </StackLayout>
</ListView.Footer>

스크롤 막대 표시 유형Scrollbar visibility

ListView 클래스에는 가로 또는 세로 스크롤 막대가 표시 될 때를 나타내는 ScrollBarVisibility 값을 가져오거나 설정 하는 HorizontalScrollBarVisibilityVerticalScrollBarVisibility 속성이 있습니다.The ListView class has HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties, which get or set a ScrollBarVisibility value that represents when the horizontal, or vertical, scroll bar is visible. 두 속성은 모두 다음 값으로 설정할 수 있습니다.Both properties can be set to the following values:

  • Default 는 플랫폼에 대 한 기본 스크롤 막대 동작을 나타내며 HorizontalScrollBarVisibilityVerticalScrollBarVisibility 속성의 기본값입니다.Default indicates the default scroll bar behavior for the platform, and is the default value for the HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties.
  • Always 콘텐츠가 보기에 맞는 경우에도 스크롤 막대가 표시 됨을 나타냅니다.Always indicates that scroll bars will be visible, even when the content fits in the view.
  • Never 은 콘텐츠가 뷰에 맞지 않는 경우에도 스크롤 막대가 표시 되지 않음을 나타냅니다.Never indicates that scroll bars will not be visible, even if the content doesn't fit in the view.

행 구분 기호Row separators

기본적으로 iOS 및 Android에서 ListView 요소 사이에 구분 기호가 표시 됩니다.Separator lines are displayed between ListView elements by default on iOS and Android. IOS 및 Android에서 구분선을 숨기려는 경우 ListView에서 SeparatorVisibility 속성을 설정 합니다.If you'd prefer to hide the separator lines on iOS and Android, set the SeparatorVisibility property on your ListView. SeparatorVisibility에 대 한 옵션은 다음과 같습니다.The options for SeparatorVisibility are:

  • 기본값 -IOS 및 Android의 구분선을 표시 합니다.Default - shows a separator line on iOS and Android.
  • 없음 -모든 플랫폼에서 구분 기호를 숨깁니다.None - hides the separator on all platforms.

기본 표시 유형:Default Visibility:

C#:C#:

SeparatorDemoListView.SeparatorVisibility = SeparatorVisibility.Default;

PAGE.XAMLXAML:

<ListView x:Name="SeparatorDemoListView" SeparatorVisibility="Default" />

없음을None:

C#:C#:

SeparatorDemoListView.SeparatorVisibility = SeparatorVisibility.None;

PAGE.XAMLXAML:

<ListView x:Name="SeparatorDemoListView" SeparatorVisibility="None" />

SeparatorColor 속성을 통해 구분 기호 선의 색을 설정할 수도 있습니다.You can also set the color of the separator line via the SeparatorColor property:

C#:C#:

SeparatorDemoListView.SeparatorColor = Color.Green;

PAGE.XAMLXAML:

<ListView x:Name="SeparatorDemoListView" SeparatorColor="Green" />

참고

ListView를 로드 한 후 Android에서 이러한 속성 중 하나를 설정 하면 성능이 크게 저하 됩니다.Setting either of these properties on Android after loading the ListView incurs a large performance penalty.

행 높이Row height

ListView의 모든 행은 기본적으로 높이가 같습니다.All rows in a ListView have the same height by default. ListView에는 해당 동작을 변경 하는 데 사용할 수 있는 두 가지 속성이 있습니다.ListView has two properties that can be used to change that behavior:

  • /false 값을 trueHasUnevenRows true로 설정 된 경우 행의 높이가 달라질 수 있습니다.HasUnevenRowstrue/false value, rows have varying heights if set to true. 기본값은 false입니다.Defaults to false.
  • RowHeightHasUnevenRows false될 때 각 행의 높이를 설정 합니다.RowHeight – sets the height of each row when HasUnevenRows is false.

ListView에서 RowHeight 속성을 설정 하 여 모든 행의 높이를 설정할 수 있습니다.You can set the height of all rows by setting the RowHeight property on the ListView.

사용자 지정 고정 행 높이Custom fixed row height

C#:C#:

RowHeightDemoListView.RowHeight = 100;

PAGE.XAMLXAML:

<ListView x:Name="RowHeightDemoListView" RowHeight="100" />

불균형 행Uneven rows

개별 행의 높이가 서로 다른 경우에는 HasUnevenRows 속성을 true로 설정할 수 있습니다.If you'd like individual rows to have different heights, you can set the HasUnevenRows property to true. 높이가 Xamarin.ios에서 자동으로 계산 되기 때문에 HasUnevenRowstrue로 설정 하면 행 높이를 수동으로 설정할 필요가 없습니다.Row heights don't have to be manually set once HasUnevenRows has been set to true, because the heights will be automatically calculated by Xamarin.Forms.

C#:C#:

RowHeightDemoListView.HasUnevenRows = true;

PAGE.XAMLXAML:

<ListView x:Name="RowHeightDemoListView" HasUnevenRows="true" />

런타임에 행 크기 조정Resize rows at runtime

HasUnevenRows 속성이 true으로 설정 된 경우 개별 ListView 행은 런타임에 프로그래밍 방식으로 크기를 조정할 수 있습니다.Individual ListView rows can be programmatically resized at runtime, provided that the HasUnevenRows property is set to true. Cell.ForceUpdateSize 메서드는 다음 코드 예제에서 보여 주는 것 처럼 현재 표시 되지 않는 경우에도 셀의 크기를 업데이트 합니다.The Cell.ForceUpdateSize method updates a cell's size, even when it isn't currently visible, as demonstrated in the following code example:

void OnImageTapped (object sender, EventArgs args)
{
    var image = sender as Image;
    var viewCell = image.Parent.Parent as ViewCell;

    if (image.HeightRequest < 250) {
        image.HeightRequest = image.Height + 100;
        viewCell.ForceUpdateSize ();
    }
}

OnImageTapped 이벤트 처리기는 탭 하는 셀의 Image 에 대 한 응답으로 실행 되며 쉽게 볼 수 있도록 셀에 표시 되는 Image 크기를 늘립니다.The OnImageTapped event handler is executed in response to an Image in a cell being tapped, and increases the size of the Image displayed in the cell so that it's easily viewed.

경고

런타임 행 크기 조정을 과도 하 게 사용할 경우 성능이 저하 될 수 있습니다.Overuse of runtime row resizing can cause performance degradation.