Xamarin Forms CollectionView 소개Xamarin.Forms CollectionView Introduction

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

CollectionView는 다른 레이아웃 사양을 사용하여 데이터 목록을 표시하는 뷰입니다.CollectionView is a view for presenting lists of data using different layout specifications. ListView보다 유연 하 고 성능이 뛰어난 대안을 제공 하는 것을 목표로 합니다.It aims to provide a more flexible, and performant alternative to ListView. 예를 들어 다음 스크린샷은 두 열 세로 그리드를 사용 하 고 여러 항목을 선택할 수 있는 CollectionView을 보여 줍니다.For example, the following screenshots show a CollectionView that uses a two column vertical grid, and which allows multiple selection:

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

CollectionView 는 Xamarin. Forms 4.3에서 사용할 수 있습니다.CollectionView is available from Xamarin.Forms 4.3.

중요

CollectionView 는 IOS 및 Android에서 사용할 수 있지만 유니버설 Windows 플랫폼 부분적 으로만 사용할 수 있습니다.CollectionView is available on iOS and Android, but is only partially available on the Universal Windows Platform.

CollectionView 및 ListView 차이점CollectionView and ListView differences

CollectionViewListView api는 비슷하지만 몇 가지 주목할 만한 차이점이 있습니다.While the CollectionView and ListView APIs are similar, there are some notable differences:

  • CollectionView 에는 목록이 나 그리드에서 데이터를 가로 또는 세로로 표시할 수 있는 유연한 레이아웃 모델이 있습니다.CollectionView has a flexible layout model, which allows data to be presented vertically or horizontally, in a list or a grid.
  • CollectionView 는 단일 및 다중 선택을 지원 합니다.CollectionView supports single and multiple selection.
  • CollectionView 에는 셀의 개념이 없습니다.CollectionView has no concept of cells. 대신 데이터 템플릿을 사용 하 여 목록에 있는 각 데이터 항목의 모양을 정의 합니다.Instead, a data template is used to define the appearance of each item of data in the list.
  • CollectionView 는 기본 네이티브 컨트롤에서 제공 하는 가상화를 자동으로 활용 합니다.CollectionView automatically utilizes the virtualization provided by the underlying native controls.
  • CollectionView ListView의 API 화면을 축소 합니다.CollectionView reduces the API surface of ListView. ListView 의 많은 속성 및 이벤트는 CollectionView에 표시 되지 않습니다.Many properties and events from ListView are not present in CollectionView.
  • CollectionView 은 기본 제공 구분 기호를 포함 하지 않습니다.CollectionView does not include built-in separators.
  • ItemsSource UI 스레드 외부에서 업데이트 되는 경우 CollectionView 예외를 throw 합니다.CollectionView will throw an exception if its ItemsSource is updated off the UI thread.

ListView에서 CollectionView로 이동Move from ListView to CollectionView

기존 Xamarin.ios의 구현 ListView 다음 표를 사용 하 여 CollectionView 구현으로 마이그레이션할 수 있습니다.ListView implementations in existing Xamarin.Forms implementations can be migrated to CollectionView implementations with the help of the following table:

개념Concept ListView APIListView API CollectionViewCollectionView
데이터Data ItemsSource CollectionView ItemsSource 속성을 설정 하 여 데이터로 채워집니다.A CollectionView is populated with data by setting its ItemsSource property. 자세한 내용은 데이터를 사용 하 여 CollectionView 채우기를 참조 하세요.For more information, see Populate a CollectionView with data.
항목 모양Item appearance ItemTemplate ItemTemplate 속성을 DataTemplate로 설정 하 여 CollectionView 에 있는 각 항목의 모양을 정의할 수 있습니다.The appearance of each item in a CollectionView can be defined by setting the ItemTemplate property to a DataTemplate. 자세한 내용은 항목 모양 정의를 참조 하세요.For more information, see Define item appearance.
Cells TextCell에서 ImageCell에서 ViewCellTextCell, ImageCell, ViewCell CollectionView 에는 셀의 개념이 없습니다.CollectionView has no concept of cells. 대신 데이터 템플릿을 사용 하 여 목록에 있는 각 데이터 항목의 모양을 정의 합니다.Instead, a data template is used to define the appearance of each item of data in the list.
행 구분 기호Row separators SeparatorColor, SeparatorVisibilitySeparatorColor, SeparatorVisibility CollectionView 은 기본 제공 구분 기호를 포함 하지 않습니다.CollectionView does not include built-in separators. 이러한 항목은 원하는 경우 항목 템플릿에서 제공 될 수 있습니다.These can be provided, if desired, in the item template.
선택 항목Selection SelectionMode, SelectedItemSelectionMode, SelectedItem CollectionView 는 단일 및 다중 선택을 지원 합니다.CollectionView supports single and multiple selection. 자세한 내용은 Xamarin.ios CollectionView Selection을 참조 하세요.For more information, see Xamarin.Forms CollectionView Selection.
행 높이Row height HasUnevenRows, RowHeightHasUnevenRows, RowHeight CollectionView에서 각 항목의 행 높이는 ItemSizingStrategy 속성에 따라 결정 됩니다.In a CollectionView, the row height of each item is determined by the ItemSizingStrategy property. 자세한 내용은 항목 크기 조정을 참조 하세요.For more information, see Item sizing.
캐싱Caching CachingStrategy CollectionView 는 기본 네이티브 컨트롤에서 제공 하는 가상화를 자동으로 사용 합니다.CollectionView automatically uses the virtualization provided by the underlying native controls.
머리글 및 바닥글Headers and footers Header, HeaderElement, HeaderTemplate, Footer, FooterElement, FooterTemplateHeader, HeaderElement, HeaderTemplate, Footer, FooterElement, FooterTemplate CollectionViewHeader, Footer, HeaderTemplateFooterTemplate 속성을 통해 목록의 항목으로 스크롤 하는 머리글 및 바닥글을 제공할 수 있습니다.CollectionView can present a header and footer that scroll with the items in the list, via the Header, Footer, HeaderTemplate, and FooterTemplate properties. 자세한 내용은 머리글 및 바닥글을 참조 하세요.For more information, see Headers and footers.
그룹화Grouping GroupDisplayBinding, GroupHeaderTemplate, GroupShortNameBinding, IsGroupingEnabledGroupDisplayBinding, GroupHeaderTemplate, GroupShortNameBinding, IsGroupingEnabled CollectionView IsGrouped 속성을 true로 설정 하 여 올바르게 그룹화 된 데이터를 표시 합니다.CollectionView displays correctly grouped data by setting its IsGrouped property to true. GroupHeaderTemplateGroupFooterTemplate 속성을 DataTemplate 개체로 설정 하 여 그룹 머리글 및 그룹 바닥글을 사용자 지정할 수 있습니다.Group headers and group footers can be customized by setting the GroupHeaderTemplate and GroupFooterTemplate properties to DataTemplate objects. 자세한 내용은 Xamarin.ios CollectionView Grouping을 참조 하세요.For more information, see Xamarin.Forms CollectionView Grouping.
새로 고치려면 끌어오기Pull to refresh IsPullToRefreshEnabled, IsRefreshing, RefreshAllowed, RefreshCommand, RefreshControlColor, BeginRefresh(), EndRefresh()IsPullToRefreshEnabled, IsRefreshing, RefreshAllowed, RefreshCommand, RefreshControlColor, BeginRefresh(), EndRefresh() CollectionViewRefreshView의 자식으로 설정 하 여 새로 고침 기능을 사용할 수 있습니다.Pull to refresh functionality is supported by setting a CollectionView as the child of a RefreshView. 자세한 내용은 Pull to refresh를참조 하세요.For more information, see Pull to refresh.
컨텍스트 작업Context actions ContextActions 컨텍스트 작업은 현재 CollectionView 지원 되지 않지만 향후 릴리스에 추가 될 예정입니다.Context actions are currently unsupported in CollectionView, but will be added in a future release.
스크롤Scrolling ScrollTo() CollectionView 는 항목을 뷰로 스크롤 하는 ScrollTo 메서드를 정의 합니다.CollectionView defines ScrollTo methods, that scroll items into view. 자세한 내용은 스크롤을 참조 하십시오.For more information, see Scrolling.