앱에 혼합 레이아웃 (compositional layout) 을 가져오고 비교가능한 데이터 소스 (diffable data source) 로 유저 인터페이스 업데이트를 간소화 합니다.

개요 (Overview)

콜렉션 뷰는 유연한 시각적 배열로 데이터를 나타낼 수 있습니다. 이 샘플 앱은 레이아웃의 여러 타입을 어떻게 생성하고 콜렉션 뷰에서 데이터를 어떻게 관리하는지 보여줍니다. 샘플 앱은 2가지 기술에 집중합니다:

• 혼합, 유연, 그리고 빠른 콜렉션 뷰 레이아웃의 타입인 혼합 레이아웃 (compositional layout) 으로 모든 콘텐츠에 대한 시각적 배열을 만들 수 있습니다.
• 비교가능한 데이터 소스 (diffable data source), 콜렉션 뷰의 데이터와 유저 인터페이스에 대해 간편하고 효과적인 업데이트 관리를 제공하는 데이터 소스의 특별한 타입입니다.

샘플 코드 프로젝트 구성 (Configure the Sample Code Project)

Xcode 에서 샘플 코드 프로젝트를 실행하려면 먼저 iOS 또는 macOS 중 선택해야 합니다.

iOS 에서 예제를 보려면:

1. Modern Collection Views 타겟을 선택합니다.
2. Scheme 메뉴에서 앱을 실행하기 위해 iOS 시뮬레이터를 선택합니다.

macOS 에서 예제를 보려면:

1. Modern Collection Views Mac 타겟을 선택합니다.
2. Scheme 메뉴에서 My Mac 을 선택합니다.
3. 타겟에 Build Settings 에서 Signing & Capabilities > Signing Certificate 에서 Sign to Run Locally 를 선택합니다.
4. 앱을 실행하고 Example 메뉴에서 예제를 이동합니다.

여기서 표시된 코드 예제는 iOS 타겟이지만 macOS 타겟에 대한 .swift 파일은 macOS-equivalent 예제에서 찾을 수 있습니다.

그리드 레이아웃 생성 (Create a Grid Layout)

Grid 예제는 다섯개의 동일한 크기의 아이템의 열을 만들기 위해 분수의 크기 (fractional sizing) 을 사용하여 그리드 레이아웃을 어떻게 생성하는지 보여줍니다. .fractionalWidth(0.2) 를 사용하여 그룹의 너비의 20% 로 아이템들의 가로 그룹을 생성합니다. 다섯개 아이템의 각 열은 그리드를 생성하기 위해 하나의 섹션에서 여러번 반복됩니다.

let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.2),
                                     heightDimension: .fractionalHeight(1.0))
let item = NSCollectionLayoutItem(layoutSize: itemSize)

let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                      heightDimension: .fractionalWidth(0.2))
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,
                                                 subitems: [item])

let section = NSCollectionLayoutSection(group: group)

let layout = UICollectionViewCompositionalLayout(section: section)
return layout

아이템에 공간 추가 (Add Spacing Around Items)