Develop/Swift

Advances in Collection View Layout

hsleedevelop 2022. 9. 4. 14:48
반응형

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 – 위와 같지만 그룹을 중앙에 배치합니다.
반응형