Advances in Collection View Layout

iOS는 기본적으로 'UICollectionView' 흐름 레이아웃과 함께 제공되며, 이는 간단한 경우에 유용합니다.

그러나 사용자 정의 레이아웃을 수행하는 것은 매우 복잡하고 상용구 코드가 필요하고 성능 등에 대해 생각해야 합니다.

 

iOS 13 및 macOS 10.15의 새로운 기능: Compositional Layout

Compositional Layout은 구성 가능하고 유연하며 빠릅니다.

 

작은 레이아웃 그룹(라인 기반, 즉 플로우 레이아웃 사용)을 가져와 함께 더 큰 조각으로 구성하여 작동합니다.

 

iOS, tvOS 및 macOS에서 사용 가능(동일한 API):

UI/NSCollectionViewCompositionalLayout ⭢ NSCollectionLayoutSection ⭢ NSCollectionLayoutGroup ⭢ NSCollectionLayoutItem

NSCollectionLayoutSize – 항목 또는 그룹의 크기(너비 + 높이)를 정의합니다.

.fractionalWidth(0.5) – 컨테이너 너비의 절반

.fractionalHeight(0.5) – 컨테이너 높이의 절반

.absolute(200)

.estimated(200) – iOS에 예상되는 금액을 알려주지만 최종 값은 AutoLayout에서 계산됩니다.

너비와 높이는 모두 컨테이너의 너비 또는 높이에 비례할 수 있습니다.

NSCollectionLayoutItem – 크기, 삽입 등의 정의와 함께 단일 셀 유형의 사양입니다.

NSCollectionLayoutGroup – 레이아웃의 기본 단위, 일반적으로 항목의 일부 행 또는 열

• 수평, 수직 또는 사용자 정의 가능
• 정의된 크기를 가지며 많은 항목을 포함합니다.
• 사용자 지정 그룹에는 NSCollectionLayoutGroupCustomItemProvider가 포함됩니다.
• 다른 중첩 그룹을 항목으로 포함할 수 있습니다.

NSCollectionLayoutSection – 이전과 같은 컬렉션 보기의 섹션

• 단일 그룹 포함

UICollectionViewCompositionalLayout – UICollectionView의 레이아웃을 설정하고 전체 보기를 관리합니다.

• 섹션 또는 섹션 제공자 포함(폐쇄)
• 섹션 공급자는 섹션 인덱스와 "레이아웃 환경" 개체를 가져와 해당 섹션에 대한 사양을 반환합니다.

NSCollectionLayoutSupplementaryItem – 항목의 배지와 같은 일반 보조 항목

NSCollectionLayoutBoundarySupplementaryItem – 스크롤 시 가장자리에 붙을 수 있는 항목(머리글/바닥글)

• 섹션 또는 전체 레이아웃에 추가 가능

NSCollectionLayoutDecorationItem – 섹션의 배경에 표시되는 항목

NSCollectionLayoutAnchor – 보조 항목이 포함하는 항목/그룹에 고정되는 방법을 지정합니다.

• 가장자리(상단, 선행 등) 및 가장자리로부터의 오프셋(분수)을 포함합니다.

추가 및 장식 항목 유형은 layout.register(Klass.self, for…Kind: "background")를 사용하여 등록해야 합니다.

App Store 앱 섹션과 같은 가로 스크롤:

section.orthogonalScrollingBehavior = …

• continuous – 임의의 위치로 스크롤
• continuousGroupLeadingBoundary – 그룹 사이에서 중지
• paging – 컨테이너 너비의 배수에서 멈춤
• groupPaging – 메인 그룹의 각 항목을 전체적으로 보여줍니다.
• groupPagingCentered – 위와 같지만 그룹을 중앙에 배치합니다.